Open Graph — протокол метаданных для веб-страниц¶

Open Graph (Open Graph protocol, OG) — формат метаданных веб-страниц, описывающий содержимое ресурса в стандартизированном виде для социальных сетей, мессенджеров и поисковых систем. Протокол разработан компанией Facebook (продукт Meta, признанной экстремистской и запрещённой в РФ) в 2010 году и основан на стандарте RDFa. Основная задача OG — обеспечить единообразное представление ссылок на страницы при их публикации в социальных платформах: заголовок, описание, изображение и другие атрибуты извлекаются из тегов и отображаются в виде «карточки» (превью) вместо голой ссылки.

¶История и назначение

Протокол Open Graph был представлен Facebook 21 апреля 2010 года на конференции f8. До его появления каждая социальная сеть по-своему пыталась определить, как отображать ссылки: некоторые парсили заголовок страницы из тега <title>, другие использовали собственные API или алгоритмы угадывания. Facebook предложил единый набор HTML-тегов, который веб-мастер размещает в <head> документа, а платформа-потребитель считывает при индексации ссылки.

Стандарт оказался востребованным: помимо Facebook, формат поддержали ВКонтакте, Telegram, Twitter (с собственными расширениями Twitter Cards), LinkedIn, Discord, Slack, WhatsApp, Pinterest и ряд других сервисов. В России OG-теги используются при публикации ссылок в ВКонтакте, Telegram-каналах, Одноклассниках и других площадках.

¶Основные теги

Протокол определяет обязательные и необязательные свойства. Обязательными считаются четыре: og:title, og:type, og:image, og:url. Остальные рекомендованы, но не требуются для корректного отображения.

Тип og:type подразумевает иерархию: базовые типы website, article, book, profile, video., music., product и другие. Для статей дополнительно определяются свойства article:author, article:published_time, article:tag и т. д. Для продуктов — product:price:amount, product:price:currency и аналогичные.

¶Пример разметки

Типичный набор OG-тегов в HTML-документе выглядит следующим образом:

``html <meta (организация признана экстремистской, деятельность запрещена в РФ) property="og:title" content="Название страницы"> <meta property="og:type" content="article"> <meta property="og:image" content="https://example.com/image.jpg">; <meta property="og:url" content="https://example.com/article">; <meta property="og:description" content="Краткое описание страницы"> <meta property="og:site_name" content="Название сайта"> ``

Атрибут property используется вместо name — это отличает OG-теги от стандартных метатегов и связывает их с RDFa-разметкой.

¶Как это работает

При публикации ссылки в поддерживаемой платформе её парсер запрашивает HTML-код страницы, извлекает OG-теги и формирует превью: изображение, заголовок, описание, имя сайта. Если теги отсутствуют или заполнены некорректно, платформа использует запасные варианты — заголовок из <title>, первое изображение на странице, OpenSearch-данные, микроразметку Schema.org. Результат при этом непредсказуем: превью может отображаться без картинки, с обрезанным заголовком или без описания.

Для отладки разработчики используют валидаторы: Facebook Sharing Debugger, ВКонтакте API для получения превью, Telegram Instant View. Кэширование превью на стороне платформы означает, что после правки OG-тегов часто требуется принудительное обновление кэша.

¶Отношения с другими стандартами

Open Graph сосуществует с микроразметкой Schema.org (JSON-LD, Microdata), которая используется поисковыми системами для понимания структуры данных и построения сниппетов. OG отвечает за социальное превью, Schema.org — за поисковую выдачу. На практике сайты применяют оба стандарта одновременно, дублируя часть информации (заголовок, описание, изображение).

Twitter Cards — аналогичная система от Twitter (ныне X), изначально независимая, но позже научившаяся читать OG-теги как fallback. Для точного управления превью в Twitter используются теги twitter:card, twitter:title, twitter:image, которые при отсутствии данных подменяются OG-значениями.

¶Значение

Open Graph де-факто стал отраслевым стандартом представления ссылок в социальных сетях. Его внедрение не требует серверной логики — достаточно статических тегов в <head>. Для редакций, интернет-магазинов и блогов корректная OG-разметка напрямую влияет на кликабельность публикаций: превью с изображением и внятным заголовком привлекает существенно больше переходов, чем ссылка без оформления.

Источники:

• Open Graph protocol — официальный сайт протокола (ogp.me)
• Документация Facebook для разработчиков: Sharing on Facebook
• Документация ВКонтакте API: получение данных объекта
• MDN Web Docs: Open Graph protocol