• 327
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: Справочник

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

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



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

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

  • og:title - Название вашего объекта, как он должен отображаться в графе, например фильм, "The Rock".
  • og:type - Типы объектов , например, "video.movie". В зависимости от типа, можно задать другие свойства которые могут быть необходимы.
  • og:image - URL-адрес изображения, который должен определить Ваш объект в графе для изображения.
  • og:url - Канонический URL-адрес объекта, который будет использоваться в качестве его
    постоянного ID в графе, например, "http://www.imdb.com/title/tt0117500/".

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

Код:
<html prefix="og: http://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="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

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

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

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

Например (line-break исключительно в демонстрационных целях):

Код:
<meta property="og:audio" content="http://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="http://example.com/bond/trailer.swf" />

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



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

Некоторые свойства могут иметь дополнительные метаданные, прикрепленные к ним.
Они определены таким же образом как метаданные свойство и
содержание, но свойства будут иметь дополнительные:.

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

  • og:image:url - Идентичный og:image.
  • og:image:secure_url - Альтернативный url-адрес для использования в случае, если web-страница требует HTTPS.
  • og:image:type - Типы MIME для изображения.
  • og:image:width - Число пикселей в ширину.
  • og:image:height - Число пикселей в высоту.

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

Код:
<meta property="og:image" content="http://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" />

Свойство тега og:video имеет идентичные теги с og:image. Вот пример:

Код:
<meta property="og:video" content="http://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="http://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="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

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

Пример:

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

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300x300px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000px в высоту.



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

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

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

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

Код:
<head prefix="my_namespace: http://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.albumarray - Название альбома.
  • music:album:disc - integer >=1 -Номер альбома на диске.
  • music:album:track - integer >=1 -Номер трека в альбоме.
  • music:musician - profilearray -Исполнитель песни.

music.album

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

music.playlist

  • music:song - Идентично одному из music.album
  • music:song:disc
  • music:song:track
  • music:creator - profile - Создатель плейлиста.

music.radio_station

  • music:creator - profile - Создатель Радио-станции.

Видео

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

video.movie

  • video:actor - profilearray - Актеры в этом фильме.
  • video:actor:role - string - Роли актеров
  • video:director - profilearray - Режиссеры фильма.
  • video:writer - profilearray - Авторы фильма.
  • video:duration - integer >=1 - Длина фильма в секундах.
  • video:release_date - datetime - Дата выхода фильма в прокат.
  • video:tag - stringarray - Теги, связанные с этим фильмом.

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: http://ogp.me/ns/article#

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

book - Книга, пространство имён определяется URI: http://ogp.me/ns/book#

  • book:author - profilearray - Кто написал эту книгу.
  • book:isbn - string - Международный стандартный книжный номер ISBN
  • book:release_date - datetime - Дата выпуска книги.
  • book:tag - stringarray - Теги, связанные с этой книгой.

profile - Профайл, пространство имён определяется URI: http://ogp.me/ns/profile#

  • profile:first_name - string - Имя пользователя профайла.
  • profile:last_name - string - Фамилия пользователя профайла.
  • profile:username - string - Ник.
  • profile:gender - enum - Пол (мужской, женский).

website - Web-сайт, пространство имён определяется URI: http://ogp.me/ns/website#

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



Типы

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

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

1.234

-1.234

1.2e3

-1.2e3

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

1234

-123
StringПоследовательность Unistrong символовВсе литералы состоят из символов Unistrong без каких-либо символов Escape-Последовательности
URLПоследовательность Unistrong символов, которые идентифицируют Интернет-ресурс. Все допустимые URL-адреса, которые используют протокол http:// или https://

Можешь почитать и вот эту статейку "Вертикальное ,выпадающее меню на jquery"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какие темы вам интереснее?
Результаты

----