Open Graph (OG) — это протокол разметки от Facebook, который превращает обычную HTML-страницу в объект соцграфа через meta-теги. Простыми словами, OG-теги говорят Facebook, ВКонтакте, Telegram и LinkedIn, какую картинку, заголовок и описание показать при шеринге ссылки. Протокол анонсирован в 2010 году на конференции f8 и быстро стал де-факто стандартом для превью.
Без корректной разметки соцсети сами вытаскивают первую попавшуюся картинку и кусок текста — что значит непредсказуемое превью и просадка CTR на 20–40%. Сегодня OG читают Telegram, Slack, Discord, WhatsApp, Viber, Pinterest и даже превью в iMessage.
§ 01Зачем нужен
Open Graph управляет тем, как ссылка выглядит в ленте и чате. Для чего нужно: контролировать заголовок (og:title), описание (og:description), изображение (og:image) и тип объекта (og:type). Facebook Sharing Debugger с 2013 года показывает, что при наличии og:image размером 1200×630 px CTR превью растёт в 2–3 раза против сниппета без картинки. Без OG-разметки Telegram берёт первый <img> со страницы — часто это логотип 50×50 px.
§ 02Как настраивается
OG-теги размещаются в <head> страницы. Минимальный набор по спецификации ogp.me: og:title, og:type, og:image, og:url. Для статей добавляют og:description, og:site_name, og:locale (ru_RU). Картинка — JPG или PNG, минимум 600×315 px, рекомендуемо 1200×630 px, до 8 МБ. Что это значит на практике: в WordPress теги ставит Yoast или Rank Math, в Next.js — компонент Metadata API (с версии 13.2, февраль 2023).
CTR превью +38% — Интернет-магазин одежды на Shopify прописал og:title, og:description и og:image 1200×630 для 240 карточек товара. CTR ссылок из Telegram и Facebook вырос на 38% за 8 недель. Замер через UTM-метки в GA4 Acquisition.
шеры +62% за 4 мес — B2B SaaS-платформа для HR добавила динамическую генерацию og:image через Vercel OG для блога из 180 статей. Шеры в LinkedIn выросли на 62%, переходы — на 27% за 4 месяца. Подсчёт через Buffer Analytics и Ahrefs Site Explorer.
§ 03Где смотреть результат
Проверка превью идёт через официальные дебаггеры: Facebook Sharing Debugger, LinkedIn Post Inspector, Twitter Card Validator (для twitter:card), Telegram через @WebpageBot. Open Graph отдаёт кэш — после правки тегов нужно нажать Scrape Again, иначе соцсеть будет показывать старое превью до 30 дней. Screaming Frog с версии 11 (2019) парсит OG-теги пакетно — удобно для аудита 10 000+ URL.
§ 04Подводные камни
Open Graph часто ломается на динамических страницах: SPA на React без SSR отдаёт пустой <head>, и парсер Facebook (FacebookExternalHit/1.1) не выполняет JS. Решение — SSR или пререндер. Вторая проблема: og:image по относительному URL — обязателен абсолютный путь с https. Третья — кэш на 7–30 дней: если опубликовали статью с дефолтной картинкой, потом исправили — старое превью держится в Facebook до ручного re-scrape.