Протокол Open Graph или разметка OG

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

Протокол Open Graph или разметка OG

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

Основные метаданные

Чтобы превратить ваши веб-страницы в графические объекты, вам необходимо добавить на свою страницу базовые метаданные. Мы основали первоначальную версию протокола на RDFa, что означает, что вы будете размещать дополнительные <meta>теги в <head>своей веб-странице. Четыре обязательных свойства для каждой страницы:

  • og:title - Название вашего объекта, как оно должно отображаться на графике, например, «Скала».
  • og:type- Тип вашего объекта, например, «видео. Фильм». В зависимости от указанного вами типа могут потребоваться и другие свойства.
  • og:image - URL-адрес изображения, который должен представлять ваш объект на графике.
  • og:url - Канонический URL-адрес вашего объекта, который будет использоваться в качестве его постоянного идентификатора на графике, например, «https://www.imdb.com/title/tt0117500/».

В качестве примера приведем разметку протокола Open Graph для The Rock на IMDB :

<html prefix="og: https://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

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

Следующие свойства являются необязательными для любого объекта и обычно рекомендуются:

  • og:audio - URL-адрес аудиофайла, сопровождающего этот объект.
  • og:description - Описание вашего объекта от одного до двух предложений.
  • og:determiner- Слово, которое появляется перед названием этого объекта в предложении. Перечисление (а, Ан, «», авто). Если autoвыбрано, потребитель ваших данных должен выбрать между «a» или «an». По умолчанию "" (пусто).
  • og:locale- Регион, в котором размечены эти теги. Формат language_TERRITORY. По умолчанию en_US.
  • og:locale:alternate- Множество других языков, в которых доступна эта страница.
  • og:site_name- Если ваш объект является частью более крупного веб-сайта, имя, которое должно отображаться для всего сайта. например, «IMDb».
  • og:video - URL-адрес видеофайла, дополняющего этот объект.

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

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" 
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

Схему RDF (в Turtle ) можно найти по адресу ogp.me/ns .


Структурированные свойства

К некоторым свойствам могут быть прикреплены дополнительные метаданные. Они указываются так же, как и другие метаданные с помощью propertyи content, но propertyбудут иметь дополнительные :.

og:imageСвойство имеет некоторые дополнительные структурированные свойства:

  • og:image:url- Идентично og:image.
  • og:image:secure_url - Альтернативный URL-адрес, если для веб-страницы требуется HTTPS.
  • og:image:type- Тип MIME для этого изображения.
  • og:image:width - Количество пикселей в ширину.
  • og:image:height - Количество пикселей в высоту.
  • og:image:alt- Описание изображения (не подпись). Если на странице указано изображение og:, его следует указать og:image:alt.

Пример полного изображения:

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

og:videoТег имеет одинаковые тег как og:image. Вот пример:

<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

og:audioТег имеет только первые 3 свойства , которые доступны (так как размер не имеет смысла для звука):

<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

Массивы

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

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />

Поместите структурированные свойства после объявления их корневого тега. Каждый раз, когда анализируется другой корневой элемент, это структурированное свойство считается выполненным и запускается другое.

Например:

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

означает, что на этой странице 3 изображения: первое изображение 300x300, среднее имеет неопределенные размеры, а последнее - 1000высотой в пикселях.


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

Чтобы ваш объект был представлен на графике, вам необходимо указать его тип. Это делается с помощью og:typeсвойства:

<meta property="og:type" content="website" />

Когда сообщество соглашается со схемой для типа, он добавляется в список глобальных типов. Все остальные объекты в системе типов являются CURIE формы

<head prefix="my_namespace: https://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />

Глобальные типы сгруппированы по вертикали. Каждая вертикаль имеет собственное пространство имен. К og:typeзначениям для пространства имен всегда добавляется префикс пространства имен, а затем точка. Это сделано для того, чтобы избежать путаницы с определяемыми пользователем типами с пространством имен, в которых всегда есть двоеточия.

Музыка

og:type значения:

music.song

  • music:duration- integer > = 1 - Продолжительность песни в секундах.
  • music:album- массив music.album - Альбом, из которого эта песня.
  • music:album:disc- integer > = 1 - На каком диске альбома находится эта песня.
  • music:album:track- integer > = 1 - Какой трек эта песня.
  • music:musician- массив профилей - музыкант, создавший эту песню.

music.album

  • music:song- music.song - Песня в этом альбоме.
  • music:song:disc- integer > = 1 - То же, music:album:discно в обратном порядке.
  • music:song:track- integer > = 1 - То же, music:album:trackно в обратном порядке.
  • music:musician- профиль - Музыкант, написавший эту песню.
  • music:release_date- datetime - дата выпуска альбома.

music.playlist

  • music:song- Идентично тем, что есть на music.album
  • music:song:disc
  • music:song:track
  • music:creator- профиль - Создатель этого плейлиста.

music.radio_station

  • music:creator- профиль - Создатель этой станции.

видео

og:type значения:

video.movie

video.episode

  • video:actor- Идентично video.movie
  • video:actor:role
  • video:director
  • video:writer
  • video:duration
  • video:release_date
  • video:tag
  • video:series- video.tv_show - К какому сериалу относится эта серия.

video.tv_show

Многосерийное телешоу. Метаданные идентичны video.movie .

video.other

Видео, не относящееся ни к какой другой категории. Метаданные идентичны video.movie .

Без вертикали

Это глобально определенные объекты, которые просто не вписываются в вертикаль, но, тем не менее, широко используются и согласовываются.

og:type значения:

article - URI пространства имен: https://ogp.me/ns/article#

  • article:published_time- datetime - когда статья была впервые опубликована.
  • article:modified_time- datetime - Когда в последний раз статья была изменена.
  • article:expiration_time- datetime - когда статья устарела после.
  • article:author- массив профилей - Авторы статьи.
  • article:section- строка - Имя раздела высокого уровня. Например, технология
  • article:tag- строковый массив - слова тегов, связанные с этой статьей.

book - URI пространства имен: https://ogp.me/ns/book#

profile - URI пространства имен: https://ogp.me/ns/profile#

  • profile:first_name- строка - Имя, обычно данное человеку родителем или выбранным им самим.
  • profile:last_name- строка - имя, унаследованное от семьи или брака и под которым широко известен человек.
  • profile:username- строка - короткая уникальная строка для их идентификации.
  • profile:gender- enum (мужской, женский) - Их пол.

website - URI пространства имен: https://ogp.me/ns/website#

Никаких дополнительных свойств, кроме основных. Любая неразмеченная веб-страница должна рассматриваться как og:typeвеб-сайт.


Типы

Следующие типы используются при определении атрибутов в протоколе Open Graph.

ТипОписаниеЛитералы
ЛогическийЛогическое значение представляет истинное или ложное значениеистина, ложь, 1, 0
DateTimeDateTime представляет собой временное значение, состоящее из даты (год, месяц, день) и необязательного компонента времени (часы, минуты).ISO 8601
EnumТип, состоящий из ограниченного набора постоянных строковых значений (членов перечисления).Строковое значение, которое является членом перечисления
Плавать64-битное число с плавающей запятой со знакомВсе литералы, соответствующие следующим форматам:

1.234
-1.234
1.2e3
-1.2e3
7E-10
Целое число32-разрядное целое число со знаком. Во многих языках целые числа более 32 бит становятся числами с плавающей запятой, поэтому мы ограничиваем протокол Open Graph для облегчения многоязычного использования.Все литералы , которые соответствуют следующим форматам:

1234
-123
НитьПоследовательность символов ЮникодаВсе литералы, состоящие из символов Юникода без escape-символов
URLПоследовательность символов Юникода, идентифицирующая Интернет-ресурс.Все действительные URL-адреса, использующие протоколы https: // или https: //.

Обсуждение и поддержка

Вы можете обсудить протокол Open Graph Protocol в группе Facebook или в списке рассылки разработчиков . В настоящее время его используют Facebook ( см. Их документацию ), Google ( см. Их документацию ) и mixi . Его публикуют IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes, TIME, Yelp и многие другие.


Реализации

Сообщество открытого исходного кода разработало ряд парсеров и инструментов публикации. Сообщите группе в Facebook, если вы тоже создали что-то потрясающее!

  • Facebook Object Debugger - официальный парсер и отладчик Facebook
  • Инструмент тестирования Google Rich Snippets - поддержка протокола Open Graph в определенных вертикалях и поисковых системах.
  • PHP Validator and Markup Generator - валидатор ввода и генератор разметки OGP 2011 в объектах PHP5
  • PHP Consumer - небольшая библиотека для доступа к данным протокола Open Graph в PHP.
  • OpenGraphNode в PHP - простой парсер для PHP
  • PyOpenGraph - библиотека, написанная на Python для анализа информации протокола Open Graph с веб-сайтов.
  • OpenGraph Ruby - Ruby Gem, который анализирует веб-страницы и извлекает разметку протокола Open Graph
  • OpenGraph для Java - небольшой класс Java, используемый для представления протокола Open Graph
  • RDF :: RDFa :: Parser - Парсер Perl RDFa, который понимает протокол Open Graph
  • Плагин WordPress - официальный плагин WordPress для Facebook, который добавляет метаданные Open Graph на сайты, работающие на WordPress.
  • Альтернативный плагин WordPress OGP - простой легкий плагин WordPress, который добавляет метаданные Open Graph на сайты, работающие на WordPress.

Протокол Open Graph был первоначально создан в Facebook и вдохновлен Dublin Core , канонической связью , микроформатами и RDFa . Спецификация, описанная на этой странице, доступна в соответствии с соглашением Open Web Foundation, версия 0.9 . Этот веб-сайт имеет открытый исходный код .

Hostpro

Share Tweet Send
0 Коментарии
Загрузка...
You've successfully subscribed to Pinta IT 🍺
Great! Next, complete checkout for full access to Pinta IT 🍺
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.