Превью ссылки в соцсетях: Open Graph и обновление og:image
ДБ
Дмитрий Борисенко
Вы отправляете ссылку в Telegram — и под ней появляется карточка: картинка, заголовок, короткое описание. Или не появляется, и в чате висит голый адрес. Разница ровно в одном: есть на странице теги Open Graph или нет.
Open Graph — это несколько мета-тегов в <head>, которые говорят соцсети, что
показать в превью. Их читают Telegram, ВКонтакте, Facebook, WhatsApp, Slack,
Discord и почти все остальные. Разберём, что нужно положить на страницу и, самое
болезненное, как заставить соцсеть показать новую картинку вместо старой.
Минимальный набор тегов
Четыре тега закрывают почти все случаи:
og:title— заголовок карточки. Может отличаться от<title>страницы.og:description— текст под заголовком, держите в пределах 160 символов.og:image— та самая картинка. Про неё ниже отдельно.og:url— канонический адрес страницы.
Полезно добавить og:type (обычно website или article) и og:site_name —
название сайта, которое некоторые соцсети показывают мелким шрифтом. Когда теги
на месте, стоит
проверить Open Graph своей страницы: инструмент
разберёт их и покажет, как ссылка выглядит в каждой соцсети.
Каким должен быть og:image
Именно из-за картинки чаще всего всё ломается. Правила простые:
- Размер 1200×630 пикселей (соотношение 1.91:1). Минимум — 600×315.
- Формат JPG или PNG, файл до 8 МБ.
- Ссылка абсолютная и по HTTPS:
https://site.ru/preview.png, а не/preview.png. Относительный путь часть соцсетей не разберёт. - Картинка должна открываться по прямой ссылке без авторизации. Если по
адресу
og:imageотдаётся 403, редирект или HTML вместо картинки — превью будет пустым.
Рядом стоит указать размеры явно — тогда карточка отрисуется сразу, без подгрузки:
Twitter и X
X (бывший Twitter) читает и Open Graph, но у него есть свои теги. Достаточно
добавить тип карточки, остальное он возьмёт из og:*:
summary_large_image — это большая картинка сверху. Без этого тега X покажет
маленькое превью сбоку.
Как обновить превью, если поменяли картинку
Вот здесь начинается настоящая боль. Соцсети кэшируют превью — иногда на
недели. Вы поменяли og:image, открываете старую ссылку в чате, а там всё ещё
прежняя картинка. Страница отдаёт новый тег, но соцсеть его не перечитывает,
пока её не попросить. Делается это в каждой сети по-своему.
Telegram
У Telegram есть служебный бот. Откройте диалог с @WebpageBot и отправьте ему
ваш URL — бот покажет, какое превью видит прямо сейчас (по сути, то, что лежит у
него в кэше). Если картинка старая, воспользуйтесь предложенным ботом
обновлением (кнопка или команда /updatepreview) — кэш сбросится, и после этого
новая отправка ссылки в любом чате покажет свежую картинку.
Важный нюанс: уже отправленные сообщения со старым превью не изменятся — обновится только то, что вы отправите после сброса.
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, генерация недостающих тегов.
Попробовать
