Open graph protocol что это

Обновлено: 25.06.2024

Стандарт Open Graph разработан социальной сетью Facebook. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.

Разметку Open Graph используют Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие сервисы. В Яндексе Open Graph используется для передачи данных в поиск Яндекса по видео.

Поиск по видео распознает не только основные, но и многие другие метатеги, например, разные типы видео (сериалы, клипы, фильмы и т. д.), ограничения по возрасту или стране просмотра. В зависимости от выбранного типа можно также указывать дополнительные свойства объекта: название фильма, номер эпизода сериала, дату выпуска телешоу и другие. Так как для поиска Яндекса по видео нужны метатеги, которых нет в документации от Facebook, в сервисе используется свое расширение.

Кроме построения превью, стандарт Open Graph могут использовать разработчики приложений для публикации действий пользователей в Facebook. В таких публикациях можно указывать действующее лицо (пользователя), объект, действие с этим объектом и название приложения, с помощью которого это действие было произведено.

Как проверить корректность разметки Open Graph

Чтобы убедиться, что разметка реализована корректно, можно воспользоваться одним из инструментов:

Отладчик репостов от Facebook. Указываете URL страницы, которой планируете поделиться, и получаете полное описание свойств с предпросмотром.

. Это стандартный валидатор в Яндекс.Вебмастере. Добавляете URL или фрагмент кода, и получаете результат проверки.

. Вводите URL — получаете список свойств с описаниями.

Также есть отдельный инструмент для проверки микроразметки для Твиттера.

Массивы

Если метатег может содержать несколько значений, добавьте дополнительные meta-элементы на страницу. При возникновении конфликтов будут учитываться данные, указанные в первом элементе meta (сверху вниз).

Укажите структурированные метатеги после основного метатега.

где разметка означает, что на странице размещены 3 изображения: первое имеет размер 300x300, для второго изображения размер не указан, третье — 1000 пикселей в высоту.

Какие материалы можно разметить

Метрика поддерживает разметку только статей (Article). Другие материалы, размеченные по стандарту, не попадут в отчеты Метрики.

Пример использования

Чтобы добавить информацию для формирования сниппетов, в HTML-коде страниц внутри элемента head укажите заголовок страницы и название сайта в свойствах og:title и og:site_name .

Чтобы ваш вопрос быстрее попал к нужному специалисту, уточните тему:

Другой вопрос о партнерской программе или разметке

Разметка формируется в течение двух недель. Если Яндекс не поддерживает какой-то из видов разметки на странице или в разметке ошибки, то просто пропускает ее.

Робот Яндекса сможет проиндексировать информацию с сайта и без разметки, на показ страниц в поиске это не повлияет. Чтобы задать желаемое описание страницы в результатах поиска, используйте метатег description.

Подробное описание возможных ошибок см. в разделе Валидатор микроразметки.

Данная форма обратной связи предназначена для вопросов о партнерских программах Яндекса и разметке. Если вы сомневаетесь, стоит ли использовать ту или иную партнерскую программу, которую предоставляют другие сервисы (не Яндекс), то мы никак не можем прокомментировать ее возможное влияние на состояние вашего сайта в поиске. ","lang":>,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Open Graph - Вебмастер. Справка","productName":"Вебмастер","extra_js":[[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>,,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>],[,"mods":,"__func137":true,"tag":"script","bem":false,"attrs":,"__func67":true>]],"extra_css":[[],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>,,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>],[,"mods":,"__func69":true,"__func68":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"lang":"ru">>>'>

Структурированные метатеги

Некоторые метатеги могут иметь дополнительные (необязательные) метаданные. Такие метатеги содержат дополнительный знак : (двоеточие).

Например, og:image может содержать следующие метаданные:

og:image:url — URL изображения, описывающего объект (соответствует og:image ). og:image:type — MIME-тип изображения (формат изображения стандарта MIME).

og:video может содержать такие же метаданные, как и og:image . Например:

og:audio содержит только некоторые метаданные из вышеперечисленных:

Open Graph

Дополнительные метатеги

og:audio — URL звукового файла, который относится к описываемому объекту. og:determiner — слово (артикль), которое должно быть перед названием объекта в предложении. Может быть указано как: a , an , the , \"\" , auto . Если в значении будет указано auto , сервис, распознающий разметку, будет выбирать между значениями a и an . Если значение не указано, перед названием объекта артикль будет отсутствовать. og:locale — язык описания объекта в формате язык_страна . По умолчанию используется значение en_US . og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта. og:site_name — название сайта, на котором размещена информация об объекте. og:video — URL видео файла, который относится к описываемому объекту.

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

В стандарте Open Graph одна страница описывает только один объект — человека, компанию или продукт. Для этого объекта и указываются все данные. Чтобы передать информацию сервисам, необходимо в HTML-код (в элемент head ) добавить следующие обязательные метатеги:

Что такое разметка Open Graph и как ее внедрить без программиста

«Делай сайты с Open Graph, а без Open Graph — не делай», — возможно, так бы сказал Тони Роббинс о разметке сайта для соцсетей. И мы бы с ним согласились. А все потому, что с Open Graph сайт намного лучше выглядит при расшаривании в соцсетях.

Разбираемся, что это за разметка и как ее самостоятельно настроить.

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

og:type — тип объекта, например, video.movie (фильм). Если у вас несколько объектов на странице, выберите один из них (главный). В зависимости от типа можно указать дополнительные свойства. og:url — канонический URL объекта, который будет использован в качестве постоянного идентификатора.

Синтаксис разметки Open Graph

Полная документация по разметке Open Graph доступна в нескольких источниках:

— англоязычная документация; — документация на русском языке.

Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.

Также есть руководства по применению Open Graph для отдельных соцсетей:

По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.

Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.

Обязательные свойства

Пройдемся по обязательным свойствам атрибута property, которые должны присутствовать в разметке:

og:title — заголовок статьи или страницы. Текст заголовка указывается в атрибуте content

og:type — тип объекта. Например, article, book, video.movie и проч. Полный перечень — здесь. В зависимости от указанного типа могут потребоваться другие свойства, помимо четырех обязательных. Например, если на странице размещена статья, укажите в коде разметки такую строку:

og:url — канонический URL, по которому доступен указанный объект. Например, если пользователь расшарит не каноническую страницу (например, страницу пагинации), в соцсети все равно появится ссылка на основную страницу, прописанную в og:url.

og:image — здесь указываем, какую картинку нужно подтянуть к публикации при репосте. В атрибуте content указывается URL изображения. Обратите внимание! При использовании разметки изображение может даже не находиться в статье или на странице. Его можно разместить в любой директории сайта, а в теге og:image указать ссылку на него. При репосте соцсети проигнорируют картинки на странице, а подтянут указанное изображение из нужной директории.

Как быть с размерами картинок

У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.

Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:

В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.

На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:

А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:

Модуль PromoPult для таргетированной рекламы: все соцсети в одном кабинете, минимальные бюджеты, автоматизированное создание креативов, автоматическое управление ставками, 0% комиссии, удобный и гибкий подбор таргетингов.

Опциональные свойства

Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:

og:description — текст краткого описания страницы или статьи (анонса). Во ВКонтакте и Фейсбуке сейчас отображается ограниченное количество символов описания. Но если вы публикуете ссылки на сайт в Телеграме, обязательно заполняйте этот тег.

Вот так description отображается в публикациях в Фейсбуке:

А так — в Телеграме:

og:site_name — здесь можно указать название сайта и пару слов, описывающих его содержимое или назначение. Данные из этого параметра используются не везде. Например, при репосте в Фейсбук отображается просто URL сайта:

А в Телеграме корректно подтягивается содержимое тега og:site_name:

Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.

Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:

Don't forget about Open Graph

Open Graph protocol is a web standard originally developed by Facebook that turns any webpage into a graph object with title, description, image and so on. Even though there is no direct correlation between OG meta tags and improved SEO rankings, it still drives more traffic to your webpage by making it more “attractive” in social networks (Facebook, Twitter, Linkedin, etc).

An example of a link shared in Twitter that has «og:image» and «og:title».

Adding OG (and not only) meta tags into your React app

Without further due let’s jump into newly created React app with create-react-app and OG meta tags to /public/index.html . It should look like something like this:

Dynamic tags

Now, what if I need to generate tags dynamically for every page? That’s easy!

We’ll use React Helmet. So let’s create a separate component for document head management, which will dynamically set title, description, image for the page.

Wherever we want to set our meta tags, we’ll just mount SEO component to necessary arguments just like

Объекты

Чтобы передать данные об объекте, необходимо указать его тип с помощью метатега og:type :

В этом примере указан один из глобальных (общепризнанных) типов. Остальные типы указываются согласно синтаксису CURIE:

Глобальные типы объектов группируются в вертикали. Каждая вертикаль имеет свое пространство имен. Значение метатега og:type для пространства имен всегда состоит из названия типа объекта и уточнения ( < тип объекта:уточнение > ). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).

Значения метатега og:type :

music:duration (integer >=1) — длительность песни в секундах. music:song:disc (integer >=1) — номер диска (соответствует значению music:album:disc ). music:song:track (integer >=1) — номер трека (соответствует значению music:album:track ). music:song — соответствует значению music.song , которое указано в music.album .

Значения свойства og:type :

video:actor:role (string) — роли, которые исполняют актеры. video:duration (integer >=1) — длительность фильма в секундах. video:release_date (datetime) — дата выхода фильма в прокат. video:tag (string, массив) — теги (слова, фразы), связанные с фильмом.

ТВ-шоу. Разметка соответствует значению video.movie .

Видео, которое не относится к перечисленным категориям. Разметка соответствует значению video.movie .

Далее описаны объекты, которые не включены в вертикали, но поддерживаются.

Значения метатега og:type :

article:published_time (datetime) — дата публикации статьи. article:modified_time ( datetime) — дата последнего изменения статьи. article:expiration_time (datetime) — дата, после которой статья считается устаревшей. article:section (string)— тема (раздел), к которой относится статья (например, Технологии). article:tag (string, массив) — теги (слова, фразы), связанные с этой статьей. book:tag (string, массив) — теги (слова, фразы), связанные с этой книгой.

Не имеет значений, кроме основных. Любая неразмеченная страница определяется как объект website .

Типы объектов

Может принимать значения true или false , 1 или 0

Временная величина. Может содержать дату (год, месяц, день) и время (часы, минуты) согласно стандарту ISO 8601

Состоит из ограниченного множества постоянных строковых значений

64-битное число с плавающей точкой

1.234, -1.234, 1.2e3, -1.2e3, 7E-10

32-битное целое число. Может содержать все символы, которые соответствуют следующим форматам: 1234, -123

Последовательность символов стандарта Unicode

Может принимать значения true или false , 1 или 0

Временная величина. Может содержать дату (год, месяц, день) и время (часы, минуты) согласно стандарту ISO 8601

Состоит из ограниченного множества постоянных строковых значений

64-битное число с плавающей точкой

1.234, -1.234, 1.2e3, -1.2e3, 7E-10

32-битное целое число. Может содержать все символы, которые соответствуют следующим форматам: 1234, -123

Последовательность символов стандарта Unicode

Принципы разметки

Данные о объекте в Open Graph описываются наборами пар свойство-значение в метатегах. Свойство необходимо указать в  property , а его значение — в  content . Например, так можно указать, что тип описываемого объекта — статья:

Стандарт требует, чтобы данные Open Graph располагались в теге head . Но для сбора статистики по контенту мы рекомендуем размещать метатеги в узле, в который вложен материал, особенно когда на странице несколько материалов. Это необходимо для корректного расчета метрик доскроллов и дочтения.

Контролируйте внешний вид репостов с помощью Open Graph

Репосты в соцсетях (ваши или пользовательские) могут дать дополнительный трафик на сайт. Но помните: в соцсетях важна визуальная привлекательность публикации — только так можно зацепить внимание пользователя при прокрутке ленты.

Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте Open Graph и будьте уверены, что ссылки на ваш сайт будут выглядеть привлекательно и кликабельно в любой соцсети.

Как разметить материал

Разметьте следующие элементы материала (обязательные элементы отмечены звездочкой):

Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика

Один из способов получить новых посетителей на сайт — разместить кнопки шеринга. Посетители вашего сайта смогут делать репосты в соцсети, а по ним будут приходить новые посетители.

Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:

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

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

Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:

А так выглядит репост этого же материала во ВКонтакте:

Попробуйте репостнуть в Фейсбук или другую соцсеть ссылку на статью без разметки Open Graph, и наглядно увидите, почему все же стоит ее использовать. Ниже — несколько примеров.

Репост в Фейсбук статьи без внедренной разметки:

А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:

Что можно сделать с помощью Open Graph

С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:

указать, какой заголовок и анонс должны быть у публикации при репосте страницы;
указать адрес и параметры изображения, которое должно подтянуться в качестве иллюстрации.

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:

Где используется Open Graph

Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Как внедрять Open Graph

Вручную

Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:

Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.

С помощью плагинов

Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).

По ссылкам ниже можно найти плагины для вашей CMS:

А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.

Пример внедрения Open Graph на WordPress

Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.

Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.

После активации перейдите в модуль «Социальные мета» в меню плагина:

главной страницы;
изображений;
типов данных;
укажите отдельные настройки для Twitter.

Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».

Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.

Вот вид размеченной ссылки в ленте Facebook:

Примерно по такому же принципу работают другие плагины.

Open Graph

Open Graph — это словарь семантической разметки данных. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам. Подробнее можно узнать на официальном сайте.

Примечание. Размеченные данные становятся общедоступными, и любой сервис может извлечь и использовать их. Внимание. Если вы встраиваете микроразметку с помощью плагина, вероятно, потребуется его доработка. Для этого обратитесь к разработчику плагина или другому специалисту, который обладает навыками разработки.

Публикуете много видео? Используйте Open Graph

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

Больше информации об этом — в справке Яндекса.

В разметке Open Graph есть специальные метатеги, с помощью которых можно передать Яндексу подробную информацию о видеоролике:

og:title — название видео, здесь можно указать до 1000 символов;
og:url — URL страницы с видео;
og:video — путь к видеоплееру или файлу;
og:image — ссылка на картинку, которая должна использоваться как заставка видео;
og:description — описание ролика (от 150 до 1000 символов);
ya:ovs:upload_date — дата и время загрузки;
ya:ovs:adult — в этом мета-теге нужно указать, является ли ваш ролик контентом «для взрослых». Если да, укажите значение «true», если нет — «false»;
video:duration — длительность видео (указывается в секундах с округлением до целого числа);
og:type — категория видео;
og:video:type — доступные кодеки для данного формата видео.

Читайте также: