CodeSweet | Open Graph разметка

Title: Open Graph разметка для сайта Subtitle: Что такое Open Graph разметка, и с чем ее едят Category: Оптимизация сайта Open Graph разметка

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

Что такое Open Graph

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

Меня подобный ход вещей не устроил, и я решил что контакту нужно «подсказать» какую брать картинку со странички и какой текст. Вот для этого и нужна разметка 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> странички, вот так:


<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, и так далее.