Open Graph разметка для сайта

Что такое Open Graph разметка, и с чем ее едят

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

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

Что такое Open Graph

Open graph это протокол, который позволяет правильно представлять контент в соцсетях. Наверное, не очень понятно… Давайте на примере. Например, пользователь зашел на ваш сайт, ему понравилась статья и он жмет кнопку «поделиться вконтакте», или просто постит ссылку на вашу страничку на своей стене. Или отправляет другу. Контакт постит не просто ссылку — он подгружает изображение и какой-то анонс. Откуда он их берет? Скорее всего это будет рандомная картинка и текст из метатега <description>. Если вас устраивает такой расклад — то статья не для вас. А если нет то читаем дальше.

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

Как использовать Open Graph

В опен граф протоколе существуют базовые метаданные. Это:

  • og:title — Название вашего объекта, как он должен отображаться в графе, например фильм, «The Rock».
  • og:typeТипы объектов , например, «article». В зависимости от типа, можно задать другие свойства которые могут быть необходимы.
  • og:image — URL-адрес изображения, который должен определить Ваш объект в графе для изображения.
  • og:url — Канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID в графе, например, «https://codesweet.ru/seo-optimizaciya-sayta/open-graph-razmetka-dlya-sayta».

Эти свойства необходимо разместить в тегах <meta> в секции <head> странички, вот так:

<head>
<title>Опен граф</title>
<meta property="og:title" content="Опен граф" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://codesweet.ru/seo-optimizaciya-sayta/open-graph-razmetka-dlya-sayta/" />
<meta property="og:image" content="https://codesweet.ru/wp-content/uploads/2016/04/opengraphapps_nanigans.png" />
...
</head>

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

<meta property="og:type" content="video.movie" />

Свойств много — о других свойствах можно прочитать на официальном ресурсе ruogp.me и выбрать подходящие.

Заключение

В статье я рассматривал в качестве примера социалку Вконтакте — но кроме нее, естественно, Open Graph поддерживается и другими ресурсами. Facebook (кстати Опен граф — это именно их разработка), Google Plus, Twitter, Skype, и так далее.

Оставить комментарий