OG-теги и Open Graph протокол¶

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

¶История возникновения

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

В 2012 году поддержку Open Graph добавили Twitter (социальная сеть заблокирована на территории РФ) и LinkedIn, а позднее — Pinterest, Google+, VK и другие сервисы. Несмотря на появление альтернативных форматов, таких как Twitter Cards, протокол OG остаётся де-факто стандартом для социального шеринга. В 2013 году спецификация была передана в ведение Open Web Foundation для дальнейшего развития как открытого стандарта.

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

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

og:title — заголовок материала (не более 60–90 символов для корректного отображения);
og:type — тип объекта (article, website, video, music, book и другие);
og:image — URL-адрес изображения, которое будет использоваться в превью (рекомендуемое разрешение — 1200×630 пикселей);
og:url — канонический URL-адрес страницы, на которую ведёт ссылка.

Помимо обязательных, существуют дополнительные теги, повышающие качество отображения:

og:description — краткое описание содержимого (до 200 символов);
og:locale — язык и региональные настройки страницы (например, ru_RU);
og:site_name — название сайта в целом;
og:video — URL-адрес видеоролика;
og:audio — URL-адрес аудиофайла;
og:determiner — артикль перед названием объекта (a, an, the).

Для изображений дополнительно могут указываться параметры og:image:width, og:image:height и og:image:alt, позволяющие задать точные размеры и альтернативный текст.

¶Техническая реализация

Внедрение OG-разметки осуществляется путём добавления метатегов в HTML-код страницы. Пример стандартной разметки:

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

Протокол использует атрибут property для указания имени тега. При этом важно отметить, что некоторые платформы, включая Twitter, используют собственные теги (twitter:card, twitter:title), однако при отсутствии таковых обращаются к данным Open Graph.

Для динамических сайтов на системах управления контентом (CMS), таких как WordPress, Joomla или Bitrix, существуют плагины, автоматически генерирующие OG-теги. На сайтах с динамической генерацией страниц разметку часто формируют программно на основе данных о контенте.

Когда пользователь вставляет ссылку в поле сообщения, социальная сеть отправляет запрос к URL-адресу через специальный краулер (робота). Робот скачивает HTML-код страницы и анализирует метатеги Open Graph. Полученные данные кэшируются на серверах платформы, после чего формируется превью. Срок жизни кэша различается: Facebook (организация Meta признана экстремистской и запрещена в РФ) обновляет данные примерно каждые 24 часа, VK — с периодичностью в несколько часов.

Если OG-теги отсутствуют, платформа пытается извлечь информацию из других элементов страницы: тега <title>, мета-описания description и первого подходящего изображения. Однако такой подход часто приводит к некорректным результатам, например, к выбору логотипа сайта вместо содержательной иллюстрации.

¶Значение для поисковой оптимизации и маркетинга

Наличие корректной OG-разметки косвенно влияет на поведенческие факторы: привлекательное превью повышает вероятность перехода по ссылке. Хотя протокол не является прямым фактором ранжирования в поисковых системах, качественные сниппеты в социальных сетях увеличивают трафик, что положительно сказывается на позициях сайта.

Для интернет-маркетинга OG-теги важны по нескольким причинам:

контроль визуального представления бренда при репостах;
увеличение кликабельности (CTR) публикаций;
корректное отображение товаров в социальных сетях с функцией покупки;
стандартизация информации о медиаконтенте.

¶Проверка корректности разметки

Для диагностики работы OG-тегов используются специальные инструменты валидации. Facebook (организация Meta признана экстремистской и запрещена в РФ) предоставляет Sharing Debugger, Twitter — Card Validator, LinkedIn — Post Inspector. В России аналогичные функции выполняют сервисы VK для разработчиков. Эти инструменты позволяют увидеть, как платформа интерпретирует разметку, а также принудительно сбросить кэш после обновления данных.

¶Особенности и ограничения

Протокол Open Graph имеет ряд ограничений. Социальные платформы по-разному обрабатывают одни и те же теги: например, максимальная длина заголовка в VK составляет 80 символов, а в Telegram — 120. Изображения большого размера могут не пройти модерацию или быть автоматически сжаты. Некоторые платформы, включая Telegram и WhatsApp (продукт Meta, признанной экстремистской и запрещённой в РФ), используют собственные алгоритмы генерации превью, частично игнорируя стандарт.

Также существуют ограничения безопасности: краулеры социальных сетей не выполняют JavaScript, поэтому OG-теги, добавленные динамически скриптами, не распознаются. Разметка должна присутствовать в исходном HTML-коде страницы.

¶Будущее протокола

С развитием социальных платформ и появлением новых форматов контента протокол продолжает эволюционировать. В 2021 году компания Meta (организация признана экстремистской и запрещена в РФ) представила расширение Open Graph для поддержки дополненной реальности. Однако основная спецификация остаётся стабильной с 2010 года, что свидетельствует о её универсальности и широкой распространённости.

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →