Превью ссылок в Telegram и ВКонтакте: как настроить Open Graph

Вы отправляете ссылку в Telegram или публикуете во ВКонтакте, а вместо аккуратной карточки с картинкой и заголовком появляется голый адрес или превью со случайной картинкой из подвала сайта. Причина почти всегда одна — у страницы не настроена разметка Open Graph. Разберёмся, как она работает и как исправить превью за полчаса.

Откуда мессенджер берёт превью

Когда вы вставляете ссылку, мессенджер или соцсеть отправляет на страницу собственного робота. Робот скачивает HTML, ищет в нём специальные метатеги и собирает из них карточку: картинку, заголовок, описание и название сайта. Если ссылка короткая, робот, как правило, проходит по редиректу и строит превью по конечной странице — поэтому настраивать разметку нужно на своём сайте, а не в сервисе сокращения.

Стандарт этих метатегов называется Open Graph. Его придумали в Facebook, но сегодня его читают Telegram, ВКонтакте, WhatsApp, Slack и многие другие.

Минимальный набор тегов

Теги размещаются внутри блока <head> страницы:

<meta property="og:title" content="Скидка 30% на зимнюю коллекцию">
<meta property="og:description" content="Только до конца недели, доставка бесплатно">
<meta property="og:image" content="https://example.ru/og/winter-sale.jpg">
<meta property="og:url" content="https://example.ru/sale">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Example">

Какой должна быть картинка

• Размер 1200 × 630 пикселей — практический стандарт, который хорошо выглядит и в Telegram, и во ВКонтакте. Сама спецификация Open Graph размер не задаёт, но площадки обрезают картинки под свои пропорции, и этот формат переживает обрезку лучше всего.
• Важное — в центре. Края могут срезаться, поэтому текст и логотип держите подальше от границ.
• Формат JPG или PNG и разумный вес. Слишком тяжёлую картинку робот может не дождаться, и превью останется без изображения.
• Крупный текст. Карточку часто смотрят на телефоне в ленте — мелкие надписи не прочитать.
• Размеры можно явно указать тегами og:image:width и og:image:height — это помогает площадкам отрисовать карточку сразу.

Почему превью не обновляется

Самая частая ситуация: вы исправили картинку, а в мессенджере по-прежнему старая. Площадки кешируют превью, чтобы не скачивать страницу при каждой отправке ссылки. Что делать:

• Telegram. Отправьте ссылку официальному боту @WebpageBot — он обновит сохранённое превью.
• ВКонтакте. Кеш сбрасывается методом API pages.clearCache; для разовой проверки проще временно добавить к ссылке параметр, например ?v=2, — для площадки это новый адрес.
• Новая короткая ссылка. Если превью нужно поменять срочно, создайте новую короткую ссылку на ту же страницу. Для площадки это другой адрес, и карточка соберётся заново.

Частые ошибки

1. Одна картинка на весь сайт. Логотип в превью каждой страницы не привлекает внимания. Сделайте шаблон с заголовком страницы.
2. Закрытый доступ. Если страница требует авторизации или заблокирована для роботов, площадка не сможет собрать карточку.
3. Превью собирается из JavaScript. Многие роботы не выполняют скрипты, поэтому теги должны быть в исходном HTML, а не добавляться на лету.
4. Разные тексты в title и og:title, которые противоречат друг другу. Пусть заголовок карточки будет вариантом заголовка страницы, а не другим обещанием.

Проверьте себя

Перед публикацией отправьте ссылку себе в «Избранное» в Telegram и в личные сообщения во ВКонтакте. Посмотрите карточку на телефоне: читается ли заголовок, не обрезана ли картинка, понятно ли, куда ведёт ссылка. И не забудьте добавить UTM-метки — тогда вы узнаете не только как выглядит ссылка, но и сколько людей по ней перешли.

Красивое превью — бесплатный способ поднять кликабельность ссылки: люди охотнее нажимают на карточку с понятной картинкой, чем на адрес из непонятных символов.