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

Разметка Open Graph отвечает за то, как выглядит превью ссылки: когда адрес сайта отправляют в Telegram, ВКонтакте, WhatsApp или MAX, мессенджер показывает карточку с картинкой, заголовком и коротким описанием. Если её нет, превью получается пустым или случайным — и по такой ссылке кликают заметно реже. Для бизнеса, который получает клиентов из мессенджеров и соцсетей — например, ведёт Telegram-канал и ставит в постах ссылки на сайт, — это прямые потери. В статье — какие og-теги нужны разным типам страниц, как превью выглядит в популярных мессенджерах, как генерировать картинки автоматически и как находить ошибки.

Что такое Open Graph простыми словами

Open Graph — это набор мета-тегов в коде страницы, которые подсказывают соцсетям и мессенджерам, что показать в превью ссылки. Протокол разработали в Facebook, но сегодня его читают Telegram, ВКонтакте, WhatsApp, Viber, Slack и большинство других приложений. Теги размещаются в <head> и не видны посетителю на самой странице.

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

Какие og-теги нужны сайту

Тег	Что задаёт	Рекомендация
og:title	Заголовок карточки	До 60–70 символов, можно короче title страницы
og:description	Описание под заголовком	До 150–200 символов, выгода и призыв
og:image	Картинка превью	1200×630 px, JPG или PNG, чем легче — тем лучше
og:image:width / og:image:height	Размеры картинки	Помогают показать карточку сразу, без догрузки
og:image:alt	Описание картинки	Для доступности, коротко
og:url	Канонический адрес	Совпадает с canonical страницы
og:type	Тип объекта	website для страниц, article для статей
og:site_name	Название сайта	Бренд компании
og:locale	Язык	ru_RU

Почему og:url должен совпадать с canonical и что будет, если нет, — в статье что такое canonical.

Шаблон Open Graph для страницы

Минимальный рабочий набор выглядит так:

Адрес картинки указывайте полностью, с протоколом и доменом: относительный путь многие мессенджеры не понимают.

Open Graph для статей и для товаров: в чём разница

Статьи блога

Для статей используйте og:type="article" и дополнительные теги пространства article:

article:published_time и article:modified_time — дата публикации и обновления в формате ISO 8601;
article:author — автор или ссылка на его страницу;
article:section — рубрика;
article:tag — теги статьи, можно несколько.

Заголовок карточки для статьи обычно совпадает с H1, а описание — это лид или короткая выжимка пользы. Картинка — обложка статьи или сгенерированная карточка с заголовком (о генерации ниже).

Карточки товаров

Для товара главное — показать сам товар и цену. Хорошо работает og:image с фотографией на светлом фоне без лишних надписей, og:title с названием и ключевой характеристикой, og:description с ценой и условием доставки. Протокол предусматривает тип product и теги product:price:amount и product:price:currency, но мессенджеры их, как правило, не выводят — цену надёжнее написать прямо в og:description. Для поиска цену и наличие передают через микроразметку Schema.org, а не через Open Graph.

Что	Статья	Товар
og:type	article	product или website
og:title	Заголовок статьи	Название + ключевая характеристика
og:description	Суть и польза статьи	Цена, наличие, доставка
og:image	Обложка или карточка с заголовком	Фото товара на чистом фоне
Дополнительно	article:published_time, article:section	Цена в тексте описания

Какой размер картинки og:image выбрать

Универсальный вариант — 1200×630 пикселей с соотношением сторон примерно 1,91:1. Такая картинка корректно показывается и в Telegram, и во ВКонтакте, и в WhatsApp. Важный текст и логотип держите в центре: края в некоторых приложениях обрезаются, а в части интерфейсов картинка показывается квадратной миниатюрой. Текст на картинке делайте крупным — превью часто смотрят на смартфоне, и мелкие надписи не читаются.

По весу: чем легче файл, тем надёжнее он подтянется. В нашей практике картинки до нескольких сотен килобайт в JPG или WebP-версии без проблем отображаются везде, а тяжёлые PNG на несколько мегабайт иногда не загружаются вовсе, особенно в WhatsApp.

Как выглядит превью в Telegram, ВКонтакте, WhatsApp и MAX

Telegram показывает название сайта, заголовок, описание и большую картинку под текстом, если она достаточно крупная; маленькую — миниатюрой сбоку. Превью кэшируется надолго.
ВКонтакте при публикации поста подтягивает карточку со ссылкой: картинку, заголовок и домен. Автор поста может заменить картинку вручную, но по умолчанию берутся og-теги.
WhatsApp строит превью на устройстве отправителя, поэтому особенно чувствителен к весу картинки и скорости ответа сервера.
MAX и другие мессенджеры ориентируются на те же стандартные og-теги — отдельная разметка под них не нужна. Если превью корректно в Telegram и ВКонтакте, в большинстве случаев оно будет корректным и там.

Для каналов это особенно важно: в Telegram ссылка с аккуратной карточкой выглядит как часть контента, а не как реклама. Если вы строите воронку «канал → сайт», продумайте og-теги для каждой страницы, на которую ссылаетесь в постах, — подробнее о стратегии в статье как раскрутить Telegram-канал.

Что писать в og:title и og:description: примеры

Title страницы пишется для поисковой выдачи, а og-теги — для ленты мессенджера, где человек не искал вас специально. Поэтому og-тексты могут и должны отличаться: меньше ключевых слов, больше конкретики и повода кликнуть.

Страница	Слабо	Лучше
Услуга	«Ремонт квартир — компания Ремонт-НН»	«Ремонт квартир под ключ: смета за 1 день и фиксированная цена»
Статья	«Блог — Статья №45»	«Как выбрать ламинат для кухни: 7 параметров, которые важны на практике»
Товар	«Диван Модель 12»	«Угловой диван Модель 12, 240 см, серый — 54 900 ₽, доставка по городу»

В описании не повторяйте заголовок другими словами — добавьте то, чего в нём нет: срок, цену, гарантию, формат. Если страниц много, генерируйте og-тексты по шаблону из полей CMS, но главные коммерческие страницы стоит заполнить вручную: над текстами для них работаем так же внимательно, как над SEO-текстом самой страницы.

Как генерировать og:image автоматически

Рисовать картинку вручную для каждой статьи или товара неудобно, поэтому на сайтах с большим количеством страниц превью генерируют автоматически:

Next.js. Файл opengraph-image.tsx в папке маршрута и функция ImageResponse из next/og позволяют рисовать картинку из JSX: заголовок статьи, логотип, фирменный фон. Картинка создаётся на сервере и кэшируется, а мета-теги подставляются автоматически.
Другие фреймворки и CMS. Отдельный эндпоинт на сервере рисует картинку по шаблону (через библиотеки для работы с изображениями или headless-браузер) и сохраняет её в файл. В og:image указывается адрес этого файла.
Интернет-магазины. Чаще всего достаточно брать основное фото товара, подготовленное в нужном соотношении сторон, — генерировать отдельную карточку не нужно.
Конструкторы. В Тильде картинку для соцсетей загружают в настройках каждой страницы; для блога это ручная работа, поэтому заранее подготовьте шаблон в графическом редакторе.

Хороший шаблон — фирменный фон, крупный заголовок в две-три строки, логотип в углу и, для услуг, короткое УТП. Такой шаблон мы закладываем при разработке дизайна сайта, чтобы все превью выглядели единообразно.

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

Мессенджеры кэшируют превью. Если вы поменяли og:image, а в Telegram по-прежнему старая картинка, отправьте ссылку боту @WebpageBot — он сбросит кэш. Во ВКонтакте кэш сбрасывается методом API pages.clearCache, либо нужно дождаться, пока превью обновится само. Простой приём для любых мессенджеров — изменить имя файла картинки (например, добавить версию в адрес): новый адрес гарантированно будет скачан заново.

Второй частый вариант — картинка недоступна роботу: закрыта в robots.txt, требует авторизации, отдаётся с ошибкой или весит слишком много. Бывает и так, что защита от ботов на хостинге или CDN блокирует роботов мессенджеров вместе со спамерами.

Как проверить и отладить Open Graph

Откройте исходный код страницы (Ctrl+U) и найдите og: — теги должны быть в исходном HTML, а не появляться после загрузки скриптов.
Откройте адрес из og:image в браузере в режиме инкогнито: картинка должна загружаться без авторизации и редиректов.
Отправьте ссылку себе в «Избранное» в Telegram и в личные сообщения во ВКонтакте — это самый честный тест.
Если превью нет, проверьте, что сервер не блокирует роботов мессенджеров: Telegram заходит с User-Agent, содержащим TelegramBot, ВКонтакте — vkShare. Можно запросить страницу утилитой curl с таким User-Agent и посмотреть ответ.
Для массовой проверки используйте онлайн-сервисы предпросмотра Open Graph или краулер, который выгружает og-теги со всех страниц сайта.

Twitter/X Cards: нужны ли отдельно

У X (бывший Twitter) есть собственная разметка Twitter Cards. Минимум — один тег <meta name="twitter:card" content="summary_large_image">: он включает большую картинку. Остальные значения (заголовок, описание, картинку) X берёт из og-тегов, если своих twitter-тегов нет. Для российской аудитории это второстепенно, но одна строка в шаблоне ничего не стоит, а некоторые другие приложения тоже читают twitter-теги.

Частые ошибки в разметке Open Graph

Одна og:image на весь сайт — превью всех страниц одинаковые и неинформативные.
Относительный адрес картинки вместо полного.
og:title и og:description скопированы со старой версии сайта и не совпадают с содержанием.
Картинка слишком маленькая — мессенджер показывает крошечную иконку вместо большой карточки.
Теги добавлены через JavaScript после загрузки — многие боты мессенджеров их не видят.
og:url указывает на тестовый домен или на главную со всех страниц.
Важный текст на картинке у краёв — в квадратной миниатюре его обрезает.

Open Graph и SEO

Напрямую на позиции в Яндексе и Google Open Graph не влияет. Но он влияет на то, сколько людей перейдут по ссылке из соцсетей и мессенджеров, а значит — на трафик, узнаваемость и поведенческие сигналы. Вместе с микроразметкой Schema.org и правильными title и description это часть базовой оптимизации любой коммерческой страницы.

Проверить, заполнены ли og-теги на вашей странице, можно за минуту в бесплатном SEO-анализе страницы. Если чего-то не хватает, настроим Open Graph и автоматическую генерацию картинок под ваш бренд в рамках почасовых услуг веб-разработчика — обычно это 1–2 дня.