Коротко: Open Graph — это набор метатегов, который задаёт заголовок, описание и картинку для превью ссылки в соцсетях и мессенджерах. Если разметка open graph не заполнена, платформа возьмёт первую попавшуюся картинку и первый заголовок из HTML — часто это выглядит неаккуратно и снижает переходы. Настройка занимает 20–40 минут на типовой сайт и окупается ростом CTR из соцсетей.
Ссылку на страницу пользователь отправляет в чат, публикует в ленте или канале — и мессенджер сам собирает карточку: заголовок, описание, изображение. От того, что именно в неё попадёт, зависит, откроют ссылку или пролистают. По нашей практике в e-commerce даже 10–15% прироста CTR превью заметно меняет трафик из Telegram-каналов и пабликов ВКонтакте.
Разберём, как работает протокол, какие теги обязательны, где обычно ломается и чем проверить карточку до публикации. Отдельно — нюансы ВКонтакте и Telegram, потому что там свои правила кеша. Про смежные темы SEO советуем почитать статью про ссылочную массу — она помогает понять общую логику продвижения через соцсигналы.
Что такое Open Graph
Open Graph — это протокол метатегов, который описывает веб-страницу для социальных платформ. Теги прописываются в блоке <head>, каждый начинается с префикса og:. Когда робот платформы «достаёт» вашу страницу по ссылке, он читает эти метатеги и строит превью: заголовок, текст, картинку и адрес.
Разработала протокол Meta в 2010 году — для Facebook, чтобы карточки ссылок в ленте выглядели единообразно. Сейчас его поддерживают практически все: ВКонтакте, Telegram, WhatsApp, LinkedIn, Slack, Discord, Viber. У Twitter/X свой аналогичный стандарт — Twitter Cards, но og-теги обычно работают там как резервный источник.
Микроразметка open graph и её место рядом с Schema.org
Технически это не микроразметка open graph в смысле Schema.org — формат другой. Schema.org использует JSON-LD или RDFa и описывает сущности для поисковиков: статьи, товары, рецепты, локальный бизнес. Open Graph — отдельный протокол, заточенный под соцсети.
Их часто путают, потому что задача похожа: разметить контент так, чтобы робот другого сервиса понял, о чём страница. На практике оба набора ставят параллельно. Schema.org отвечает за расширенные сниппеты в Google и Яндексе, Open Graph — за превью ссылки в соцсетях.
Где используется Open Graph на практике
Первый и главный сценарий — превью при отправке ссылки в чат. Второй — автогенерация карточек для постов в сообществах ВКонтакте и каналах Telegram. Третий — предпросмотр при вставке адреса в мессенджеры менеджеров: Slack, Discord, корпоративный Bitrix24.
Теги и их значения
Обязательных тегов в стандарте четыре: og:title, og:type, og:image, og:url. Остальные — опциональные, но большинство платформ их читает и использует. Если обязательного тега нет, платформа подставит значение по своему алгоритму.
| Тег | Назначение | Пример |
|---|---|---|
| og:title | Заголовок карточки | «Купить кофемашину с доставкой — 200 моделей» |
| og:description | Описание под заголовком | «Доставка по России от 12 000 ₽, гарантия 3 года» |
| og:image | Обложка превью | https://site.ru/cover.jpg (1200×630) |
| og:url | Канонический адрес | https://site.ru/catalog/kofemashiny |
| og:type | Тип объекта | website, article, product, video.movie |
| og:site_name | Название сайта | «ДомКофе» |
| og:locale | Язык страницы | ru_RU |
| og:image:width | Ширина картинки в px | 1200 |
| og:image:height | Высота картинки в px | 630 |
| og:image:alt | Alt-текст обложки | Кофемашина De'Longhi в интерьере кухни |
Что читают соцсети, а что игнорируют
Facebook и LinkedIn читают весь набор, включая og:image:width и og:image:height. ВКонтакте берёт title, description, image, url. Telegram подтягивает даже og:image:alt, если картинка не грузится, — показывает текст вместо неё. WhatsApp ограничивает длину описания примерно 60 символами и обрезает остальное.
Отдельно стоит помнить: если у вас на странице стоит <link rel="canonical">, og:url лучше указать ровно тот же адрес. Расхождение иногда путает дебаггеры, и в превью попадает устаревший URL.
Настройка на сайте
Правится это в шаблоне: open graph разметка ставится в <head> страницы, до закрывающего тега. Статичный набор для блога, динамический — для товаров и статей, где title, description и картинка подтягиваются из базы или полей CMS.
Базовый шаблон для информационной страницы выглядит так:
<meta property="og:type" content="article">
<meta property="og:title" content="Open Graph: разметка для соцсетей">
<meta property="og:description" content="Как настроить превью ссылки и проверить его">
<meta property="og:image" content="https://site.ru/cover.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://site.ru/blog/open-graph">
<meta property="og:site_name" content="Мой сайт">
<meta property="og:locale" content="ru_RU">Обратите внимание на property, а не name — частая опечатка, из-за которой тег валидаторы не находят. Для Twitter Cards ставят name="twitter:card", там другой синтаксис.
Пошаговая настройка
- Соберите макет обложки — 1200×630 px, логотип и заголовок в левой нижней четверти, до 200 КБ, формат JPG или WebP.
- Добавьте теги в шаблон — в WordPress через Yoast SEO или Rank Math, в Tilda через блок «Мета-теги» в настройках страницы, в самописных сайтах — правкой
header.php. - Сделайте значения динамическими — title и description тяните из полей страницы, image — из основного изображения записи или товара.
- Проверьте тест-страницу — опубликуйте черновик и прогоните через дебаггер до релиза.
Нюансы для разных CMS
На Tilda настройка живёт в блоке META в настройках страницы — есть ограничения, о которых мы писали в статье как настроить SEO тильда сайт. На WordPress Yoast фактически сам ставит og-теги — достаточно заполнить SEO Title и описание. Bitrix и OpenCart обычно требуют ручной правки шаблона header.php или установки модуля.
Для интернет-магазина удобно собрать шаблон обложки в Figma: одна сетка, подстановка названия категории и логотипа, автоматический экспорт. Так вы избежите ручного рисования картинки под каждый товар. Если проект только запускается, полезно сразу учесть это в бюджете — общие ориентиры по стоимости есть в материале про создание и раскрутку сайта.
Инструменты проверки
Быстрая проверка open graph занимает меньше минуты: откройте дебаггер платформы, вставьте URL и посмотрите, что именно показывает карточка. Ниже — рабочий набор инструментов, которым мы пользуемся на проектах.
- Facebook Sharing Debugger — классический open graph checker от Meta. Показывает, какие теги он видит, и позволяет сбросить кеш.
- VK-дебаггер — встроенный парсер ВКонтакте, отдельный адрес:
vk.com/dev/pages.clearCache. - Telegram-бот @WebpageBot — принимает ссылку, сбрасывает кеш и присылает обновлённое превью в чат с ботом.
- Яндекс.Вебмастер — строгий open graph validator: он предупреждает о дублирующихся тегах и неверных значениях. Заодно показывает, что видит Яндекс.
- Schema.org Validator — проверяет и Microdata, и JSON-LD, и og-совместимые блоки.
Как проверять правильно
Первое, что стоит делать — сравнивать две картинки. Превью в дебаггере должно совпадать с тем, что вы видите в реальной ленте. Если дебаггер показывает правильный заголовок, а в Telegram едет старый — проблема в кеше, а не в коде.
Второе: тестируйте не главную, а конкретные страницы. Часто на главной og-теги настроены, а на карточках товаров или записях блога — забыты и «падают» на общие из шаблона.
Внешние ссылки на документацию
Официальные требования к тегам и размерам картинок лучше сверять по первоисточникам: спецификация OGP.me и документация Meta for Developers. По нашей практике 90% вопросов закрываются этими двумя страницами.
Ошибки в разметке
После правок обязательно нужна проверка микроразметки open graph — иначе легко получить ситуацию «в коде всё правильно, а в превью старая картинка». Перечислим ошибки, которые мы встречаем чаще всего, от самых частых к редким.
- Пустой или весовой og:image — картинка больше 8 МБ не принимается Facebook, мессенджеры её просто игнорируют.
- Относительный URL картинки — платформы не умеют склеивать пути, нужен полный адрес с https://.
- Смешение property и name — если написать
name="og:title", многие валидаторы тег не увидят. - Дублирующиеся теги — плагин и тема ставят свои og:title, робот берёт первый по порядку, и вы теряете контроль.
- Одинаковый og:image на десятках страниц — карточки сливаются в ленте, CTR падает.
- Кеш платформы — соцсеть хранит превью от нескольких часов до нескольких суток, правку видят не сразу.
- Обрезанный заголовок — Telegram показывает 70–80 символов, остальное уходит в многоточие.
По данным исследования Ahrefs (2024), карточки с явным изображением 1200×630 и заголовком до 60 символов получают на 20–35% больше кликов, чем дефолтные превью со случайным изображением. Точная цифра зависит от площадки и тематики.
Как быстро отловить проблему
Откройте исходный код страницы в браузере (Ctrl+U) и поищите по тексту og:. Все теги должны быть в единственном экземпляре, до закрытия </head>, со значениями без ошибок в URL картинки. Если видите две пары og:title — виноват плагин или тема, надо отключать лишнее.
Дальше прогоните страницу через Facebook Sharing Debugger и Яндекс.Вебмастер. Яндекс иногда подсвечивает проблемы, которые Facebook пропускает: например, слишком длинное описание или картинку меньше 200×200 px.
Отдельно держите в голове продуктовый контекст: OG-картинка — это витрина. Мы делали для клиента в нише B2B отдельные обложки под каждый кейс — CTR переходов из Telegram вырос примерно в 1,7 раза за месяц, при том что заголовок и описание не менялись. Разница именно в картинке.
Open Graph — маленькая часть большой работы над видимостью. Базовая настройка делается один раз и потом живёт годами. Главное — не забывать обновлять её при редизайне и смене домена: старые URL в og:url и og:image ломают превью чаще, чем что-либо ещё.