Превью ссылки в соцсетях: 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, генерация недостающих тегов.
Попробовать
