Open Graph

Происхождение и история термина

Протокол Open Graph представила компания Facebook^* 21 апреля 2010 года на конференции разработчиков F8 ^{[6; 7]}. В анонсе для разработчиков, опубликованном в тот же день, объяснялось, что протокол позволяет страницам сайтов стать «объектами», которые пользователи могут добавлять в свои профили ^[6]. The Next Web в репортаже с конференции описывал замысел шире: внешние «графы» — например, музыкальные предпочтения пользователя в сервисе Pandora — предполагалось объединить с социальным графом Facebook^* в единый «open graph» ^[7].

Отсюда и название: «граф» здесь — социальный граф, сеть связей между людьми и объектами. Спецификация на ogp.me до сих пор формулирует цель протокола так: «The Open Graph protocol enables any web page to become a rich object in a social graph» («протокол Open Graph позволяет любой веб-странице стать полноценным объектом в социальном графе») ^[1].

Технически протокол основан на RDFa ^[1]. RDFa — рекомендация W3C, которая задаёт атрибуты для выражения структурированных данных в любом языке разметки; среди этих атрибутов есть property и prefix ^[22]. Отсюда атрибут property в тегах Open Graph и объявление пространства имён через атрибут prefix ^{[1; 22]}. При этом web.dev отмечает, что атрибут property в официальных спецификациях HTML не определён ^[15]: Open Graph — отраслевое соглашение со своей спецификацией на ogp.me, а не элемент стандарта HTML.

Со временем акцент сместился. В 2010 году протокол входил в обновлённую платформу Facebook*, главным плагином которой компания называла кнопку Like, подключаемую к сайту одной строкой HTML ^[6]. Сегодня разметку Open Graph читают не только соцсети: её используют поисковые системы ^{[8; 10; 11; 12]} и мессенджеры. Так, Apple указывает, что изображение и осмысленная подпись появляются в превью ссылок приложения «Сообщения», если добавить на страницу метаданные Open Graph ^[17].

* Meta Platforms Inc.^* включена в «Перечень организаций, признанных в соответствии с законодательством Российской Федерации экстремистскими», который публикует Минюст России: запись № 96, дата размещения сведений — 10.10.2022 ^[21]. Основание — решение Тверского районного суда г. Москвы от 21.03.2022 и апелляционное определение судебной коллегии по гражданским делам Московского городского суда от 20.06.2022 ^[21]; апелляционная инстанция оставила решение без изменения, и оно вступило в законную силу ^[19]. Согласно перечню, речь идёт о деятельности компании по реализации продуктов — социальных сетей Facebook^* и Instagram^*; на мессенджер WhatsApp эти судебные акты не распространяются ^[21]. Документация Meta^* используется в статье как техническая спецификация, поскольку протокол создан этой компанией.

Не путать

• Open Graph protocol — разметка страниц (теги og:). Graph API — по документации Meta^*, основной способ передавать данные в платформу Facebook* и получать их оттуда; это HTTP-интерфейс для приложений ^[20]. Graph API — другой продукт, к разметке страниц он не относится.
• Open Graph и Schema.org — разные словари (см. раздел «Смежные разметки»).

Суть и механизм

Как формируется превью

1. Пользователь вставляет ссылку в пост или сообщение.
2. Сервер платформы (краулер) сам запрашивает страницу. У Facebook* краулер представляется строкой facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php) ^[2].
3. Краулер читает мета-теги в <head>, загружает изображение по адресу из og:image и собирает карточку: картинка, заголовок, описание, домен.
4. Результат кэшируется. Facebook* кэширует изображения по их URL и не обновляет их, пока URL не изменится ^[2].

Если тегов Open Graph на странице нет, платформа подставляет данные сама. Краулер Facebook* по внутренним эвристикам пытается угадать заголовок, описание и изображение ^[2]. «Сообщения» Apple по умолчанию показывают ссылку серым «пузырём» с заголовком страницы, доменом и маленьким значком, а изображение и осмысленная подпись появляются, если на странице есть метаданные Open Graph ^[17].

Выполняет ли краулер JavaScript, зависит от платформы, и не все это описывают. Apple, например, прямо указывает, что превью в «Сообщениях» не следуют meta-редиректам и не запускают JavaScript, поэтому метаданные должны быть в HTML самой страницы; серверные редиректы при этом выполняются ^[17]. Отсюда вывод: надёжнее отдавать теги Open Graph в исходном HTML, а не вставлять скриптом после загрузки.

Синтаксис и правила спецификации

• Каждое свойство — отдельный тег <meta property="og:имя" content="значение"> ^[1].
• Пространство имён можно объявить атрибутом <html prefix="og: https://ogp.me/ns#"> ^[1].
• Массивы. Если у свойства несколько значений, тег повторяют; при конфликте приоритет у первого тега сверху вниз ^[1]. Яндекс формулирует то же правило: при нескольких изображениях учитываются данные первого элемента meta ^[8].
• Структурированные свойства (например, og:image:width) относятся к последнему перед ними корневому тегу (og:image); появление нового корневого тега начинает новый объект ^[1].
• Страница без разметки считается объектом типа website ^[1].
• Meta^* требует, чтобы все URL в тегах были абсолютными: они обозначают каноническое расположение страницы или изображения ^[4].

Пример минимальной разметки статьи

Пример; адреса условные.

<html lang="ru" prefix="og: https://ogp.me/ns#">
<head>
  <title>Как читать отчёт о трафике — Пример Медиа</title>
  <link rel="canonical" href="https://example.ru/articles/traffic-report">

  <meta property="og:title" content="Как читать отчёт о трафике">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.ru/articles/traffic-report">
  <meta property="og:image" content="https://example.ru/img/og/traffic-report-1200x630.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Схема отчёта с тремя графиками посещаемости">
  <meta property="og:description" content="Разбираем, какие показатели отчёта важны редакции и как их сравнивать.">
  <meta property="og:site_name" content="Пример Медиа">
  <meta property="og:locale" content="ru_RU">
  <meta property="article:published_time" content="2026-10-13T09:00:00+03:00">
  <meta property="article:section" content="Аналитика">
</head>

Обратите внимание: в <title> есть название сайта, а в og:title — нет. Так рекомендуют и Meta^* (заголовок без брендинга) ^[2], и Apple: название сайта нужно передавать через og:site_name, иначе информация в карточке дублируется ^[17]. Размер 1200×630 выбран по рекомендации Facebook* ^[3]; для других платформ см. раздел «Как применяется на практике».

Виды и классификации

Ниже — классификация свойств и типов по спецификации ogp.me ^[1].

Свойства

Спецификация отдельно указывает: если на странице есть og:image, для неё следует задать и og:image:alt ^[1]. Это то же, что alt-текст для обычного изображения, — описание для тех, кто картинку не видит.

Списки обязательных тегов у платформ различаются. Meta^* в руководстве для вебмастеров называет базовыми og:url, og:title, og:description, og:image и fb:app_id, а og:type и og:locale — дополнительными ^[2]. Спецификация и Яндекс считают обязательными og:title, og:type, og:image, og:url ^{[1; 8]}.

Типы объектов (og:type)

Для типа article спецификация определяет свойства article:published_time, article:modified_time, article:expiration_time, article:author, article:section, article:tag ^[1]. Кроме глобальных типов, допускаются собственные: их объявляют через пространство имён в атрибуте prefix и записывают как моё_пространство:мой_тип ^[1].

Смежные разметки

X Cards (бывшие Twitter Cards). Отдельная разметка платформы X: теги вида <meta name="twitter:…"> с атрибутом name, а не property ^[15]. В обзоре web.dev 2014 года карточки Twitter описаны как «extension to the Open Graph Protocol» — расширение протокола Open Graph ^[16]. Правило, по которому X подставляет значения og: при отсутствии twitter:-тегов, в этом исследовании по действующей официальной документации X подтвердить не удалось. Свойство twitter:card используют и другие клиенты: так, Apple требует его для превью ссылок на посты в социальных сетях ^[17].

Schema.org / JSON-LD. Словарь структурированных данных, который поисковые системы используют для расширенных результатов. Google указывает, что большая часть структурированных данных в Поиске опирается на словарь schema.org, поддерживает форматы JSON-LD, Microdata и RDFa и в целом рекомендует JSON-LD ^[14].

Разметки не заменяют друг друга и могут стоять на одной странице одновременно; Google, например, для изображения в Discover принимает как разметку schema.org, так и og:image ^[12].

Как применяется на практике

Что читают платформы

Дата проверки: 14.10.2026. Цифры размеров для ВКонтакте, Telegram и MAX из блогов и форумов в таблицу не включены: это не официальные требования платформ.

Типичная схема для медиа

Пример. Новостной сайт задаёт для каждого материала og:type = article, отдельную обложку под соцсети (например, 1200×630 — это закрывает рекомендацию Facebook* ^[3] и минимальную ширину Apple ^[17]), короткий og:title без названия издания, название в og:site_name, лид или подводку в og:description, а также время публикации и рубрику в article:published_time и article:section ^[1]. Для Google Discover крупное изображение должно соответствовать отдельным требованиям (от 1200 px в ширину и 16:9) ^[12], поэтому изображения 1.91:1 и 16:9 иногда готовят раздельно: соцсетям отдают одно через Open Graph, а Discover может взять изображение из разметки Schema.org — Google допускает оба источника ^[12].

Где формируется разметка

Пример. Open Graph может выводить CMS — тема оформления или модуль SEO-настроек, которые подставляют заголовок, описание и обложку материала в шаблон. Вручную теги добавляют в <head> шаблона страницы. В обоих случаях итог надо проверять по исходному HTML, который получает краулер (см. ниже).

Как измерить или проверить

Инструменты

• Sharing Debugger (Meta^*). Показывает, какие мета-теги прочитал краулер Facebook^*, выводит ошибки и предупреждения и запускает повторное считывание страницы ^[2]. Для работы нужен вход в аккаунт Facebook^* [5].
• Валидатор микроразметки Яндекса. Поддерживает микроформаты, Schema.org, Open Graph, микроданные HTML и RDFa; проверяет страницу по URL или вставленному HTML-коду ^[9].
• Исходный код страницы. Просмотр HTML (а не DOM после выполнения скриптов) показывает то, что увидит краулер, не запускающий JavaScript, — например, превью «Сообщений» Apple ^[17].

Чек-лист

1. На странице есть og:title, og:type, og:image, og:url ^[1].
2. Все URL в тегах абсолютные, с протоколом ^[4].
3. Изображение отдаётся по прямой ссылке без входа в аккаунт (вывод; Apple отдельно оговаривает, что и страницы, требующие авторизации, должны отдавать осмысленные метаданные ^[17]); размер файла — в пределах лимитов платформ (Facebook* — до 8 МБ ^[3], Apple — до 10 МБ на все связанные ресурсы ^[17]); сама HTML-страница для превью Apple — не больше 1 МБ ^[17].
4. Размеры изображения не меньше минимальных (Facebook* — 200×200 ^[3], Apple — ширина от 900 px ^[17]); пропорция подобрана под основные площадки.
5. Заданы og:image:width и og:image:height — Facebook* тогда может показать картинку уже при первой публикации ^[3].
6. Задан og:image:alt ^[1].
7. og:image указан один раз или первым идёт нужное изображение — при конфликте выигрывает первый тег ^{[1; 8]}.
8. og:url совпадает с каноническим адресом и не содержит сессионных и трекинговых параметров ^[2].
9. og:title без названия сайта; название — в og:site_name ^{[2; 17]}.
10. Теги присутствуют в исходном HTML и одинаковы для мобильной и десктопной версий ^[17].
11. После изменений страница перечитана в Sharing Debugger ^[2], а новая картинка опубликована по новому URL ^[2].

Как оценить эффект

Прямой «метрики Open Graph» нет. Эффект оценивают по переходам из соцсетей и мессенджеров: число визитов и их доля в источниках трафика, сравнение до и после изменения карточек при сопоставимых публикациях. Для разделения каналов к ссылкам, которые публикует сама редакция, добавляют UTM-метки (вывод). Обобщённых данных о приросте кликабельности от Open Graph в официальных источниках не найдено, поэтому ориентироваться стоит на собственные измерения.

Ошибки, ограничения и спорные вопросы

Типичные ошибки

• Относительные URL в og:image и og:url. Meta^* требует абсолютные адреса, так как они обозначают каноническое расположение ресурса ^[4].
• Картинка недоступна краулеру (например, закрыта авторизацией — вывод), слишком велика или слишком мала. Изображения меньше 200×200 Facebook* не принимает ^[3]; Apple может проигнорировать картинку уже 150 px или показать её как иконку ^[17].
• Несколько og:image в случайном порядке, например от темы оформления и от модуля SEO. Выигрывает первый тег ^[1].
• og:url не совпадает с canonical. Для Facebook* og:url — каноническая страница, к которой привязываются лайки и репосты ^[2]. Все репосты и лайки привязаны к конкретному URL; если сменить структуру адресов, они начнут засчитываться новому URL, а сохранение накопленных показателей требует отдельных мер, которые Meta^* описывает в разделе «Preserve Engagement Metrics» ^[4].
• Логотип вместо иллюстрации. Для Discover Google советует избегать типовых изображений, например логотипа сайта ^[12].
• Разметка вставляется JavaScript-ом. Превью «Сообщений» Apple скрипты не запускают и такую разметку не увидят ^[17]; как поступают другие платформы, в изученной документации не описано.

Кэш превью

Платформы хранят карточки; подробнее всего этот механизм описан в документации Meta^*. У Facebook* изображения кэшируются по URL и не обновляются, пока URL не изменится, поэтому новую картинку публикуют по новому адресу ^[2]. Изменения og:title, og:image и других тегов относятся только к будущим публикациям ссылки ^[4]. Старые картинки удалять не следует: в уже опубликованных постах на их месте появится пустая белая область ^[4]. Заголовок поста фиксируется после более чем 50 взаимодействий (комментарии, лайки, репосты) и больше не меняется ^[4].

Влияет ли Open Graph на SEO

Вопрос спорный, и ответ зависит от того, что считать влиянием.

• Прямое ранжирование. В изученной документации Google и Яндекса ^{[8; 10; 11; 12; 13]} Open Graph не назван фактором ранжирования. В справке Google о поддерживаемых мета-тегах og: не упоминается; там сказано, что неподдерживаемые мета-теги Google игнорирует ^[13]. Это не доказательство «нулевого влияния», но и утверждение «OG улучшает позиции» источниками не подкреплено.
• Вид в поиске. Подтверждено, что Google учитывает og:title при выборе заголовка результата и og:site_name при определении названия сайта — среди многих других источников ^{[10; 11]}, а og:image — для изображения в Discover ^[12]. Яндекс использует og:title и og:site_name для сниппетов и Open Graph — для поиска по видео ^[8].
• Распространение. Основной эффект — внешний вид ссылок в соцсетях и мессенджерах, а значит, переходы оттуда. Это не поисковое ранжирование, а трафик из других каналов.

Корректная формулировка: Open Graph — инструмент управления видом ссылки и вспомогательный источник данных для поисковиков, а не способ поднять позиции.

Различия Google и Яндекса

Прочие ограничения

• Какие свойства читает конкретная платформа, определяет её собственная документация, а не только спецификация: например, списки базовых тегов у Meta^* и на ogp.me различаются ^{[1; 2]}. Поэтому одна и та же разметка может давать на разных площадках разные карточки.
• Изображение в og:image распространяется вместе с карточкой ссылки, поэтому к нему разумно относиться так же, как к любой иллюстрации на сайте, в том числе с точки зрения прав на использование (вывод, не юридическая консультация).

Частые вопросы

Связанные термины

• Сниппет
• Микроразметка
• Schema.org
• JSON-LD
• Тег title
• Мета-описание (description)
• Канонический адрес (canonical)
• Alt-текст изображений
• Поисковый робот
• Репост