Open Graph — протокол, который Facebook предложил в 2010 году, а сегодня его понимают практически все: Telegram, VK, Одноклассники, WhatsApp, X, LinkedIn, Slack, Discord и другие. Это несколько мета-тегов в <head> страницы, которые говорят платформам, какой заголовок, описание и картинку показывать в превью ссылки. Без них мессенджер возьмёт что попало: первую картинку на странице (часто — логотип или иконку) и случайный текст.
Обязательные теги
<meta property="og:title" content="Угловой диван «Норд» — 39 990 ₽">
<meta property="og:description" content="Раскладной, с ящиком для белья. Доставка по Москве за 1 день.">
<meta property="og:image" content="https://example.ru/og/divan-nord.jpg">
<meta property="og:url" content="https://example.ru/catalog/divan-nord/">
<meta property="og:type" content="product">| Тег | Что указывать |
|---|---|
og:title |
Заголовок карточки, до 60–70 символов |
og:description |
1–2 предложения, до 150–200 символов |
og:image |
Абсолютный URL картинки с https:// |
og:url |
Канонический адрес страницы |
og:type |
website для главной, article для статей, product для товаров |
Полезные дополнительные теги:
<meta property="og:site_name" content="Мебель-Дом">
<meta property="og:locale" content="ru_RU">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Серый угловой диван в гостиной">Указание og:image:width и og:image:height помогает платформам показать картинку сразу при первой отправке ссылки, не дожидаясь её загрузки.
Теги для X (Twitter)
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Угловой диван «Норд» — 39 990 ₽">
<meta name="twitter:description" content="Раскладной, с ящиком для белья.">
<meta name="twitter:image" content="https://example.ru/og/divan-nord.jpg">Обязателен только twitter:card. Если остальных тегов нет, X возьмёт данные из Open Graph. Значение summary даёт маленькую квадратную картинку сбоку, summary_large_image — крупную карточку.
Картинка: размеры и требования
Рекомендуемый размер — 1200×630 пикселей (соотношение около 1,91:1). Он хорошо выглядит в большинстве мест.
- Формат: JPEG или PNG. WebP поддерживается не везде — для превью надёжнее JPEG.
- Вес: старайтесь уложиться в 300–500 КБ; некоторые мессенджеры не показывают слишком тяжёлые изображения.
- Безопасная зона: главный текст и объект — в центре. VK, WhatsApp и некоторые клиенты могут обрезать картинку до квадрата или другого соотношения.
- Текст на картинке — крупный, читаемый на маленьком экране телефона.
- Доступность: картинка должна открываться без авторизации, без блокировки ботов и по HTTPS.
Для статей и товаров лучше генерировать уникальную картинку для каждой страницы, а не одну общую на весь сайт.
Как платформы обрабатывают превью
| Платформа | Особенности | Как обновить кэш |
|---|---|---|
| Telegram | Хорошо понимает OG, показывает крупную картинку | Отправить ссылку боту @WebpageBot |
| VK | Читает OG; превью можно отредактировать при публикации | Инструмент очистки кэша ссылок (метод pages.clearCache в разделе для разработчиков) |
| Требует небольшой вес картинки и быстрый ответ сервера | Отдельного инструмента нет; помогает новый URL (например, с параметром ?v=2) |
|
| Эталонная реализация OG | Sharing Debugger → «Повторить сбор» | |
| Читает OG, сильно кэширует | Post Inspector | |
| X | Нужен twitter:card |
Кэш обновляется со временем; помогает новый URL |
Кэш превью — главная причина жалоб «поменял картинку, а показывается старая». Мессенджеры запоминают превью ссылки и повторно страницу не запрашивают. Сначала исправьте теги, затем сбросьте кэш на каждой нужной платформе.
Как проверить разметку
- Откройте предпросмотр Open Graph и введите адрес страницы — инструмент покажет, какие теги найдены и как карточка будет выглядеть.
- Если тегов нет или они неполные, соберите их в генераторе мета-тегов — он формирует сразу title, description, Open Graph и Twitter-теги.
- Отправьте ссылку себе в «Избранное» Telegram и в личные сообщения VK — это самая честная проверка.
Частые проблемы
- Нет картинки в превью. Относительный путь (
/og.jpg) вместо абсолютного URL, картинка закрыта в robots.txt, сервер отвечает ошибкой или блокирует ботов (WAF, защита от DDoS). - Показывается логотип вместо фото товара. На странице нет
og:image, и платформа выбрала первое попавшееся изображение. - Старое превью. Кэш платформы — сбросьте его инструментами из таблицы.
- Неправильный заголовок. CMS выводит одинаковые og-теги на всех страницах — проверьте шаблон.
- Кракозябры вместо кириллицы. Страница отдаётся не в UTF-8 или нет
<meta charset="utf-8">. - Обрезанная картинка. Важный текст расположен у краёв.
Open Graph на популярных CMS
- WordPress: теги Open Graph выводят SEO-плагины (Yoast SEO, Rank Math, All in One SEO). В настройках записи можно задать отдельную картинку и заголовок для соцсетей.
- 1С-Битрикс: теги добавляются в шаблон сайта через
$APPLICATION->SetPagePropertyили с помощью модулей из Маркетплейса. - Tilda: в настройках страницы есть раздел «Соцсети» для заголовка, описания и картинки.
- Самописные сайты и фреймворки: выводите теги в шаблоне
<head>, подставляя данные страницы — название товара, цену, первое фото.
Важно, чтобы теги присутствовали в исходном HTML, который отдаёт сервер. Боты мессенджеров не выполняют JavaScript, поэтому если теги добавляются скриптом на стороне клиента (например, в одностраничном приложении без серверного рендеринга), превью не появится.
Пример: карточка статьи
Для статьи в блоге хорошо работает картинка с крупным заголовком статьи и логотипом, тип article и дополнительные теги:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-10-07T09:00:00+03:00">
<meta property="article:section" content="Ремонт">Open Graph и SEO
Open Graph не влияет на ранжирование в Google и Яндексе, а сниппеты в поиске формируются из <title> и meta description. Однако заголовки удобно согласовать: og:title может быть короче и эмоциональнее, чем title для поиска. Подробнее о поисковых сниппетах — в гайде Как написать title и description.
Чек-лист
- На каждой странице есть
og:title,og:description,og:image,og:url,og:type. -
og:image— абсолютный HTTPS-адрес, 1200×630, до 500 КБ. - Указаны
og:image:widthиog:image:height. - Добавлен
twitter:cardсо значениемsummary_large_image. - Важное содержимое картинки в центре.
- Превью проверено в Telegram и VK.
- После изменений сброшен кэш на платформах.