Open Graph

Как работает

Разметка Open Graph — это набор мета-тегов с префиксом og:, которые ставятся в блок <head> страницы. Изначально протокол разработала Facebook в 2010 году, сейчас его поддерживают Telegram, ВКонтакте, WhatsApp, LinkedIn, Slack, Discord и десятки других сервисов, где ссылки превращаются в превью-карточки.

Минимальный набор для корректного шаринга:

<meta property="og:title" content="Электрические чайники Bosch — каталог">
<meta property="og:description" content="Модели с фильтром накипи, стеклянные и стальные, доставка за 1-3 дня.">
<meta property="og:image" content="https://example.com/img/kettle-og.jpg">
<meta property="og:url" content="https://example.com/kettle/bosch/">
<meta property="og:type" content="website">

og:image — самое заметное поле: именно эту картинку соцсеть покажет пользователю. Facebook и большинство площадок рекомендуют размер 1200×630 пикселей (соотношение 1.91:1), формат JPEG или PNG, вес до 5 МБ. Если картинки нет — соцсеть попытается взять первую попавшуюся со страницы, часто неудачно.

Twitter использует родственный формат — Twitter Cards с префиксом twitter:. В большинстве случаев он читает и Open Graph как fallback, но для управления карточкой отдельно можно прописать twitter:card, twitter:image, twitter:title — обычно они дублируют og-поля.

Почему важно для SEO

Прямого влияния на позицию в Google и Яндексе Open Graph не имеет — это не фактор ранжирования. Косвенное влияние есть, и через несколько каналов.

Главный — трафик из соцсетей и мессенджеров. Ссылка с внятной картинкой и заголовком в 2-3 раза чаще получает клики, чем «голый» URL без превью. Для контентных сайтов и медиа это заметный источник поведенческих сигналов, которые уже прилетают в ранжирование.

Дополнительный эффект — брендовый. Правильно оформленная карточка при шаринге выглядит как реклама: логотип, товар, короткий заголовок. Плохая или отсутствующая — как заготовка неготового сайта. Для e-commerce и SaaS это часть общего впечатления, которое Google в 2023 году отдельно упоминал в рамках Helpful Content Update.

Частые ошибки

• Одна og:image на весь сайт — все ссылки при шаринге выглядят одинаково.
• Картинка меньше 200×200 пикселей — Facebook и Telegram могут проигнорировать её и показать превью без изображения.
• og:url указывает на другой URL, чем страница — соцсеть склеит статистику на неправильный адрес.
• Динамические og:image через JavaScript — большинство парсеров не выполняют JS, теги не читаются.
• og:type пропущен или указан неверно (website для статьи вместо article) — часть площадок отказывается от расширенной карточки.
• Пробелы или переносы строк внутри content — парсеры некоторых мессенджеров ломаются.

Как проверить

В Chrome DevTools вкладка Elements → поиск по og: покажет все теги в блоке <head>. Официальные валидаторы: Facebook Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn Post Inspector, Twitter Card Validator. Telegram — просто отправьте ссылку в личный чат самому себе и посмотрите превью. В Яндекс.Вебмастере отдельного отчёта по Open Graph нет.

SEO Crawler проверяет наличие обязательных og-тегов на каждой странице, соответствие og:url реальному URL, доступность картинки по og:image (не 404 и не редирект). В отчёте это блок «Open Graph» — с указанием страниц без разметки и с битой картинкой.

Вывод

Open Graph — не про позиции в выдаче, а про то, как выглядит ссылка на сайт в чужих чатах и лентах. Настройте уникальную og:image под каждый раздел или тип страницы, проверьте всё через Facebook Sharing Debugger после первого релиза и после смены шаблонов. Для медиа и e-commerce это единственный способ выглядеть в шаринге не как заготовка.