Коротко: Open Graph — это разметка, из которой Telegram, VK и соцсети собирают карточку ссылки: картинку, заголовок и описание. Минимум — пять тегов: og:title, og:description, og:image, og:url и og:type. Картинка — 1200×630 пикселей. После правок кэш превью нужно сбрасывать принудительно, а результат проверять в нашем инструменте /og-preview. Без разметки мессенджер покажет голую ссылку — и кликабельность упадёт в разы.
Что такое Open Graph и зачем он нужен
Open Graph — это протокол разметки страниц, созданный Facebook в 2010 году и описанный на ogp.me. Идея простая: страница отдаёт набор служебных meta-тегов, а любая платформа — Telegram, VK, WhatsApp, X, LinkedIn, Slack, Discord — читает их и собирает карточку ссылки: обложку, заголовок, описание и домен.
Для сайта это прямой рычаг кликабельности. Голая ссылка без превью в чате выглядит как спам, и по ней кликают неохотно. Аккуратная карточка поднимает CTR той же ссылки в разы. С учётом трафика из Telegram-каналов и чатов open graph разметка окупается быстрее любого другого мета-тега.
Карточка ссылки — это ваш сниппет в мессенджерах. За кликабельность в поиске отвечают title и description, за превью в Telegram и VK — Open Graph. Это разные каналы, и настраиваются они независимо друг от друга.
Минимальный набор тегов
Базовая настройка укладывается в пять тегов в секции head. Этого достаточно, чтобы карточка корректно собиралась во всех основных платформах:
<meta property="og:title" content="Заголовок страницы для карточки"> <meta property="og:description" content="Короткое описание — одно-два предложения"> <meta property="og:image" content="https://example.com/og/cover.png"> <meta property="og:url" content="https://example.com/page/"> <meta property="og:type" content="article">
- og:title — заголовок карточки. Не обязан совпадать с title страницы: сюда можно вынести более цепкую формулировку до 60–70 символов.
- og:description — одно-два предложения под заголовком. Платформы обрезают текст по-разному, поэтому главное — в первые 100 символов.
- og:image — абсолютный URL обложки с протоколом https. Относительные пути боты не разворачивают.
- og:url — канонический адрес страницы, без UTM-меток и сессионных параметров.
- og:type — тип контента: website для главной и разделов, article для статей.
Теги должны присутствовать в HTML-ответе сервера. Если ваш сайт — SPA и мета-теги дорисовывает JavaScript, боты платформ их не увидят: подробнее об этом в разделе о частых проблемах.
Требования к og:image
Обложка — самый заметный элемент карточки, и именно с og image связано больше всего ошибок. Универсальная рекомендация — 1200×630 пикселей (соотношение сторон 1,91:1): такой размер без обрезки работает в Telegram, VK, X и WhatsApp.
| Платформа | Рекомендуемый размер | Формат и ограничения |
|---|---|---|
| Telegram | 1200×630 (1,91:1) | JPG, PNG, WebP; до 5 МБ |
| VK | 1200×630, минимум 537×240 | JPG, PNG; маленькая картинка станет квадратной миниатюрой |
| X (Twitter) | 1200×630 + summary_large_image | JPG, PNG, WebP; до 5 МБ |
| Facebook, WhatsApp | 1200×630, минимум 600×315 | JPG, PNG; до 8 МБ |
Практические советы: держите вес файла в пределах 200–300 КБ; логотип и текст размещайте в центральной «безопасной зоне», потому что края платформы могут подрезать. Для X дополнительно укажите тип карточки, иначе ссылка отобразится маленькой миниатюрой:
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Заголовок для X"> <meta name="twitter:image" content="https://example.com/og/cover.png">
Частые проблемы с превью
Превью не обновляется. Самая массовая жалоба. Платформы кэшируют карточку при первом обращении: Telegram — надолго, VK и X — от нескольких часов до недели. Правка og-тегов сама по себе ничего не меняет — кэш нужно сбрасывать принудительно, об этом следующий раздел.
Картинка обрезается. Обложка нестандартной пропорции кадрируется по центру: у вертикальных картинок срезает верх и низ, у широких панорам — бока. Лечится приведением к 1200×630 и переносом смысловых элементов в центр кадра.
Превью пустое. Если теги добавляет JavaScript после загрузки страницы, боты их не видят: они читают исходный HTML и не исполняют скрипты. Для SPA нужен SSR, пререндер или отдача og-тегов на уровне сервера или edge.
Бот заблокирован. Анти-бот-защита, файрвол или правила robots.txt могут отдавать ботам платформ 403 — тогда карточки не будет вовсе. Проверьте, что TelegramBot, vkShare и Twitterbot не попадают под блокировки.
Как обновить кэш превью
Telegram. Официальный способ — служебный бот @WebpageBot: отправьте ему ссылку, и он заново соберёт карточку и сбросит кэш для всех чатов. Если в Телеграм превью ссылки не обновилось с первого раза, отправьте URL ещё раз через минуту.
VK. Прикрепите ссылку к новой записи — VK перечитает страницу при создании сниппета. Если упорно показывается старая карточка, добавьте к URL нейтральный GET-параметр вида ?v=2: платформа посчитает адрес новым и принудительно сходит за свежими тегами.
X (Twitter). Отдельной кнопки сброса в Card Validator больше нет: кэш обновляется сам примерно раз в неделю. Ускорить можно тем же приёмом с GET-параметром.
Кэш превью — не баг, а защита платформ от лишней нагрузки. Планируете правку og-тегов — сразу закладывайте в план шаг «сбросить кэш», иначе неделю будете показывать подписчикам старую карточку.
Как проверить Open Graph
Дёргать ботов каждой платформы вручную долго. Быстрее использовать наш валидатор Open Graph — инструмент /og-preview: вставьте URL, сервис покажет, как карточка выглядит в Telegram, VK и X, и подсветит отсутствующие или битые теги. Такая open graph проверка занимает секунды и не требует публикации ссылки в реальных чатах.
Заодно есть смысл проверить и структурированные данные страницы: микроразметку Schema.org валидирует соседний инструмент /schema-checker, а как читать его отчёт — разобрали в статье о проверке микроразметки.
FAQ
Почему превью ссылки в ТГ не обновляется после правки тегов?
Telegram кэширует карточку при первом обращении и хранит её долго. Отправьте ссылку боту @WebpageBot — он пересоберёт превью и обновит его во всех чатах. Изменения видны через пару минут.
Можно ли показать разные карточки в Telegram и VK?
Частично. Свои теги есть только у X (twitter:*), остальные платформы читают общие og-теги. Развести карточки можно, отдавая разные теги по User-Agent бота, но это усложняет поддержку.
Что будет, если og-тегов нет совсем?
Платформа соберёт карточку сама: возьмёт title, description и первую попавшуюся картинку — или не покажет ничего. Результат непредсказуем, поэтому пять базовых тегов стоит отдавать на каждой публичной странице.
Влияет ли Open Graph на позиции в поиске?
Напрямую нет: поисковики не используют og-теги как фактор ранжирования. Косвенно — да: превью увеличивает переходы из соцсетей и мессенджеров. Если проблема глубже и сайт вообще не находится в выдаче — начните с разбора почему сайт не в поиске.
Чеклист
- Пять базовых тегов — og:title, og:description, og:image, og:url, og:type — на каждой публичной странице.
- og:image 1200×630, абсолютный https-URL, вес до 300 КБ.
- Для X добавлен twitter:card со значением summary_large_image.
- Теги присутствуют в HTML-ответе сервера, а не дорисовываются JavaScript.
- Боты платформ не заблокированы файрволом и robots.txt.
- После каждой правки сброшен кэш: @WebpageBot для Telegram, GET-параметр для VK и X.
- Карточка проверена в /og-preview для всех ключевых страниц.