интернетмагазинот 19 990 руб.
LandingPageот 14 990 руб.

Open Graph.

Open Graph

Open Graph.

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

Также разметка Open Graph активно используется приложениями для Facebook — она позволяет пользователям отражать действия из приложений на своих страничках.

Благодаря OG можно смотреть видео, читать краткое описание статьи и быстрее понимать суть информации, которой делятся друзья, просматривая бесконечные ленты новостей. Помимо Facebook разметку Open Graph распознают также Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие.

Сам словарь достаточно лёгок в применении — для начала использования нужно 4 свойства:

  • og:title — название объекта.
  • og:type — тип объекта, например, «video.movie»(кино). В зависимости от типа можно указать еще другие свойства.
  • og:image — URL изображения, описывающего его.
  • og:url — канонический URL объекта, который будет использован в качестве постоянного ID.

Например, разметка Open Graph для описания человека выглядит так:

<html prefix="og: http://ogp.me/ns# 
profile: http://ogp.me/ns/profile#">
<head>
<meta property="og:title" content="Юрий Гагарин" />
<meta property="og:type" content="profile" />
<meta property="og:url" content="http://example.com/Гагарин" />
<meta property="og:image" content="http://example.com/" />
<meta property="profile:first_name" content="Юрий" />
<meta property="profile:last_name" content="Гагарин" />
<meta property="profile:gender" content="male" />
...
</head>
...
</html>

Здесь робот распознает, что страница посвящена мужчине по имени Юрий Гагарин, на ней есть ссылка на его фото. Здесь такое свойство как url указывается как канонический URL страницы.

В теге og:type помимо типа «profile» могут быть указаны различные типы сущностей (у которых есть еще свои свойства):

  • Music (подтипы music.song, music.album, music.playlist, music.radio_station) — у песен можно указать длительность, альбом, исполнителя, у альбомов — песни, исполнителей, даты релиза.
  • Video (video.movie, video.episode, video.tv_show, video.other) — у фильмов могут быть указаны актеры и их роли, режиссеры, сценаристы, продолжительность.
  • No vertical (article. book, profile, website) — здесь указаны те типы, которые не подходят к вышеперечисленным категориям. У статьи можно указать теги, автора, даты публикации. У профайлов — пол, фамилию, имя.

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

Кроме того, словарь OG признают и поисковые системы, в некоторых случаях даже дополняют его.

 
Запись опубликована в 11:41 дп автором в рубрике Микроразметка с метками , .

mikrorazmetkaМикроразметка.

Мир семантической разметки устроен не вполне просто и на первый […]

Microformats.orgMicroformats.org

Microformats.org (Микроформаты) — это открытый стандарт, созданный в 2007 году […]

Schema.orgSchema.org

Schema.org — это словарь, который появился по инициативе поисковых систем […]

комментарииВаши замечания, предложения и вопросы оставляйте в комментариях или присылайте на почту web36@bk.ru, я буду рад узнать ваше мнение!


LPBuilder.pro | Бесплатный онлайн конструктор Landing PageНовый проект - Бесплатный онлайн конструктор с помощью которого можно создавать небольшие веб-сайты, лендинги, онлайн-резюме, портфолио, промо сайты... Испoльзуйте блoки в сoтнях кoмбинаций, прoстo дoбавляя oдин за другим, в интуитивнo пoнятнoм интерфейсе. Вы смoжете сoздать сайт свoими руками, воплощайте свои идеи!
Follow @elazukin