Генератор социальной карточки Open Graph

Open Graph — это набор <meta> тегов, введённых Facebook, которые позволяют веб-странице описывать себя для социальных платформ. Наиболее распространённые теги — og:title, og:descriptionи og:image. Когда кто-то делится ссылкой, платформа читает эти теги и отображает расширенную карточку вместо простого URL.

Спецификация Open Graph рекомендует соотношение сторон 1.91:1 с минимальными размерами 600×315 пикселей. Большинство платформ лучше всего отображают изображение размером 1200×630, что обеспечивает ясность на экранах с высоким разрешением, при этом не превышая лимит 8 МБ, установленный Facebook. Для Twitter Cards обычно используется размер 1024×512 для формата summary_large_image.

Платформы, такие как Facebook, LinkedIn и Slack, получают изображение og:image один раз и хранят его на CDN, чтобы не перегружать ваш источник каждый раз, когда ссылка делится. Кэш может сохраняться в течение дней или недель. Чтобы обновить кэш после изменения изображения, измените URL файла или используйте инструмент проверки (например, инструмент проверки дележа Facebook) для повторного извлечения страницы.

og:image является частью протокола Open Graph и читается Facebook, LinkedIn, Slack, Discord и большинством мессенджеров. twitter:image принадлежит Twitter Cards и читается X (Twitter). Если только og:image присутствует, X будет использовать его по умолчанию, поэтому одно высококачественное изображение часто подходит для обеих платформ — но предоставление обоих позволяет оптимизировать размеры под каждую платформу.

Социальные карточки имеют фиксированный кадр, поэтому длинный заголовок, выходящий за пределы, выглядит повреждённым. HTML5 Canvas API не автоматически переносит текст, поэтому генератор измеряет каждое слово с помощью ctx.measureText(), разбивает заголовок на строки и постепенно уменьшает размер шрифта, пока заголовок помещается в безопасную зону. Это обеспечивает читаемость всех экспортируемых изображений без ручной настройки.