Превью ссылки в соцсетях: Open Graph и обновление og:image
ДБ
Дмитрий Борисенко
Вы отправляете ссылку в Telegram — и под ней появляется карточка: картинка, заголовок, короткое описание. Или не появляется, и в чате висит голый адрес. Разница ровно в одном: есть на странице теги Open Graph или нет.
Open Graph — это несколько мета-тегов в <head>, которые говорят соцсети, что
показать в превью. Их читают Telegram, ВКонтакте, Facebook, WhatsApp, Slack,
Discord и почти все остальные. Разберём, что нужно положить на страницу и, самое
болезненное, как заставить соцсеть показать новую картинку вместо старой.
Минимальный набор тегов
Четыре тега закрывают почти все случаи:
<meta property="og:title" content="Заголовок страницы" />
<meta property="og:description" content="Описание в одно-два предложения" />
<meta property="og:image" content="https://site.ru/preview.png" />
<meta property="og:url" content="https://site.ru/page" />
og:title— заголовок карточки. Может отличаться от<title>страницы.og:description— текст под заголовком, держите в пределах 160 символов.og:image— та самая картинка. Про неё ниже отдельно.og:url— канонический адрес страницы.
Полезно добавить og:type (обычно website или article) и og:site_name —
название сайта, которое некоторые соцсети показывают мелким шрифтом.
Каким должен быть og:image
Именно из-за картинки чаще всего всё ломается. Правила простые:
- Размер 1200×630 пикселей (соотношение 1.91:1). Минимум — 600×315.
- Формат JPG или PNG, файл до 8 МБ.
- Ссылка абсолютная и по HTTPS:
https://site.ru/preview.png, а не/preview.png. Относительный путь часть соцсетей не разберёт. - Картинка должна открываться по прямой ссылке без авторизации. Если по
адресу
og:imageотдаётся 403, редирект или HTML вместо картинки — превью будет пустым.
Рядом стоит указать размеры явно — тогда карточка отрисуется сразу, без подгрузки:
<meta property="og:image" content="https://site.ru/preview.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Twitter и X
X (бывший Twitter) читает и Open Graph, но у него есть свои теги. Достаточно
добавить тип карточки, остальное он возьмёт из og:*:
<meta name="twitter:card" content="summary_large_image" />
summary_large_image — это большая картинка сверху. Без этого тега X покажет
маленькое превью сбоку.
Собрали теги — проверьте, что всё на месте и как карточка выглядит в разных соцсетях. Вставьте адрес страницы:
Превью ссылки: проверка Open Graph для соцсетей
Проверьте, как ссылка выглядит при репосте: превью для Telegram, Facebook, Twitter и WhatsApp, разбор тегов Open Graph и og:image, генерация недостающих тегов.
Попробовать →
Как обновить превью, если поменяли картинку
Вот здесь начинается настоящая боль. Соцсети кэшируют превью — иногда на
недели. Вы поменяли og:image, открываете старую ссылку в чате, а там всё ещё
прежняя картинка. Страница отдаёт новый тег, но соцсеть его не перечитывает,
пока её не попросить. Делается это в каждой сети по-своему.
Telegram
У Telegram есть служебный бот. Откройте диалог с @WebpageBot, отправьте ему ваш URL — бот перечитает страницу и сбросит кэш превью. В ответ он напишет, что превью обновлено. После этого новая отправка ссылки в любом чате покажет свежую картинку.
Важный нюанс: уже отправленные сообщения со старым превью не изменятся — обновится только то, что вы отправите после сброса.
Facebook и WhatsApp
У Facebook — Sharing Debugger: developers.facebook.com/tools/debug. Вставьте URL, нажмите Scrape Again — Facebook перечитает теги и обновит кэш. Заодно он покажет, какие теги увидел и на что ругается.
WhatsApp принадлежит Meta и берёт превью из того же кэша, что и Facebook, — отдельного инструмента для него нет. Прогнали ссылку через Sharing Debugger — обновится и в WhatsApp.
ВКонтакте
ВК отдельного дебаггера не даёт, но кэш у него короче: обычно свежее превью подтягивается само в течение нескольких часов — суток. Ускорить можно, открыв окно репоста (иконка «Поделиться») — при формировании поста ВК перечитывает страницу.
X (Twitter)
Раньше был Card Validator, сейчас он фактически не работает. На практике X обновляет превью сам при новой публикации ссылки; гарантированного ручного сброса, как у Telegram, нет.
Почему превью нет вообще
Если карточка не появляется ни в одной соцсети, пройдитесь по списку:
- На странице нет тегов
og:title/og:description/og:image. og:imageведёт на недоступную картинку или отдаётся по HTTP.- Страница закрыта авторизацией,
robots-запретом или отдаёт не-200 статус. - Соцсеть закэшировала пустую версию — сбросьте кэш, как описано выше.
Чтобы не гадать, вставьте адрес страницы в валидатор — он покажет, какие теги
нашлись, как ссылка выглядит в Telegram, Facebook, Twitter и WhatsApp, и соберёт
готовый код недостающих тегов для вставки в <head>.
Превью ссылки: проверка Open Graph для соцсетей
Проверьте, как ссылка выглядит при репосте: превью для Telegram, Facebook, Twitter и WhatsApp, разбор тегов Open Graph и og:image, генерация недостающих тегов.
Попробовать →
