Что такое Open Graph?

Это набор мета-тегов (og:title, og:description, og:image и другие), которые управляют тем, как ссылка на страницу выглядит при репосте в соцсети или мессенджер: заголовок, описание и картинка превью.

Какой размер картинки для og:image?

Рекомендованный размер — 1200×630 пикселей (соотношение примерно 1.91:1). Вес — до 5 МБ, лучше меньше. Изображение должно быть по абсолютному адресу с https.

Нужны ли отдельные теги Twitter?

Twitter/X понимает og-теги, но для карточки с большим изображением добавляют twitter:card=summary_large_image. Генератор добавляет их автоматически.

Почему в соцсети показывается старая картинка?

Соцсети кэшируют превью надолго и сами страницу не перечитывают. Сбросьте кэш в Facebook Sharing Debugger, для Telegram отправьте адрес боту @WebpageBot, для ВКонтакте пересоберите превью в редакторе поста.

Обязательно ли писать og:title, если уже есть title?

Не обязательно: большинство парсеров подставит обычный title. Но og:title даёт свободу формулировки, в соцсети заголовок можно сделать короче и разговорнее, без ключевых слов ради поиска.

Генератор Open Graph и Twitter Card — мета-теги превью

Зачем настраивать Open Graph

Без og-тегов соцсеть собирает превью сама: берёт первый попавшийся абзац и случайную картинку из вёрстки, иногда иконку меню размером 40×40. Ссылка выглядит неопрятно, по ней не кликают. Разметка Open Graph возвращает контроль вам. Вы задаёте ровно тот заголовок, описание и картинку, которые увидит человек в ленте ВКонтакте или в чате Telegram.

Эффект измеряется просто. Пост со сверстанной карточкой 1200×630 собирает заметно больше переходов, чем голая ссылка без превью, а стоит настройка один раз и ничего не потребляет дальше.

Что заполнять в полях

og:title: до 60–70 символов. Что длиннее, обрежется многоточием. Копировать сюда тег title не обязательно, для соцсети заголовок можно написать живее.
og:description: 120–160 символов. Telegram показывает примерно две строки, ВКонтакте до трёх.
og:url: канонический абсолютный адрес страницы, без UTM-меток. Иначе соцсеть закэширует превью на адрес с параметрами.
og:image: 1200×630 пикселей, JPG или PNG, вес до 5 МБ. Разумный ориентир на практике — 300 КБ, тяжёлая картинка долго тянется в мобильной сети и превью не успевает отрисоваться.
og:type: значение website для главной и разделов, article для статей и новостей.
og:site_name: короткое имя проекта, оно подписывается рядом с доменом.

Соотношение 1.91:1 выбрано не случайно. Именно под него сверстаны карточки большинства площадок: любая другая пропорция обрежется по центру, и текст с краёв изображения исчезнет. Заголовок внутри картинки поэтому держите ближе к середине, с отступом от края не меньше 60 пикселей.

Куда вставлять теги

Все строки идут в <head>, порядок значения не имеет. У og-тегов атрибут property, у twitter-тегов name; перепутанный атрибут ломает разбор у части парсеров. На WordPress разметку обычно ставит Yoast или Rank Math, и тогда ручные теги надо не добавлять, а править в настройках плагина. Два og:title на одной странице приводят к непредсказуемому выбору: какой подхватит парсер, заранее неизвестно.

Кэш превью и как его сбросить

Соцсети запоминают карточку при первом переходе и потом не перечитывают страницу неделями. Поменяли картинку, а в ленте по-прежнему висит старая. Сбрасывают кэш через официальные отладчики: Facebook Sharing Debugger для Facebook, бот @WebpageBot для Telegram, редактор поста для ВКонтакте. Проверять превью логично до публикации, а не после того, как пост собрал 200 просмотров с битой картинкой.

Особенности площадок

Telegram читает og:title, og:description, og:image, а og:site_name игнорирует. Файлы тяжелее 5 МБ пропускает молча.
ВКонтакте понимает og-теги и дополнительно поддерживает vk:image. Превью пересобирается в редакторе поста.
X (Twitter) работает с og-тегами, но крупная карточка появится только при twitter:card=summary_large_image. Генератор добавляет эту строку автоматически.
WhatsApp строго требует абсолютный https-адрес картинки и не любит файлы больше 600 КБ.

Типичные промахи

Относительный путь в og:image встречается чаще остальных ошибок: локально всё видно, а парсер соцсети получает /img/cover.jpg и не понимает, от какого домена отсчитывать. Следом идёт картинка, закрытая в robots.txt либо отдающая 403 на сторонний запрос. Третий сюжет мягче, но заметен читателю: одна общая картинка на весь сайт. Технической ошибки здесь нет, однако лента из десяти одинаковых превью выглядит как автоматическая рассылка, и доверия к ссылкам это не добавляет.