Что такое 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 как запасной вариант.