Open Graph: что это и как настроить

Open Graph — протокол разметки страниц для красивого превью при репосте в соцсетях. Узнайте какие og-теги нужны и как их настроить правильно.

Что такое Open Graph

Open Graph (OG) — протокол разметки веб-страниц, разработанный Facebook в 2010 году. Он позволяет задать заголовок, описание, изображение и другие параметры, которые будут показаны при репосте ссылки в социальных сетях.

Без Open Graph социальные сети пытаются автоматически определить контент страницы, что часто даёт плохой результат: неправильный заголовок, маленькое изображение или вообще нет превью.

Зачем нужен Open Graph

Open Graph влияет на:

CTR из соцсетей — красивое превью увеличивает кликабельность ссылок
Бренд — контролируете как выглядит ваш контент при распространении
Конверсию — правильный визуал и текст повышают вовлечённость
Мессенджеры — Telegram, WhatsApp, VK тоже используют OG-теги

Обязательные OG-теги

<meta property="og:title" content="Заголовок страницы | Бренд" />
<meta property="og:description" content="Описание страницы до 200 символов." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

Дополнительные OG-теги

<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="Описание изображения" />

Twitter Card теги

Для Twitter (X) используются отдельные теги:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Заголовок для Twitter" />
<meta name="twitter:description" content="Описание для Twitter" />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />

Требования к OG-изображению

Оптимальные параметры для изображения:

Размер: 1200×630 пикселей
Соотношение сторон: 1.91:1
Формат: JPEG или PNG
Максимальный вес: 8 МБ (рекомендуется до 1 МБ)
Текст на изображении: не более 20% площади для Facebook

Проверка Open Graph на reChecker

Используйте Open Graph Preview для проверки и предпросмотра OG-тегов вашей страницы. Инструмент покажет:

Как выглядит превью в Facebook, VK, Twitter
Наличие обязательных тегов
Размеры и доступность изображения
Длину заголовка и описания

FAQ

OG-заголовок должен совпадать с title страницы? Не обязательно. OG-заголовок для соцсетей может быть более «вирусным» и эмоциональным, тогда как SEO-title оптимизирован под ключевые слова для поиска.

Сколько времени кешируются OG-данные? Facebook кеширует данные на 24 часа. Для принудительного обновления используйте Sharing Debugger в Facebook Developer Tools или добавьте ?v=2 к URL изображения.

OG работает для всех соцсетей? Большинство платформ поддерживают OG: Facebook, VK, LinkedIn, Telegram, WhatsApp. Twitter/X предпочитает собственные Twitter Card теги, но также читает OG как запасной вариант.