Микроразметка Open Graph для красивого расшаривания статей с сайта
10 Июня 2015

Микроразметка Open Graph для красивого расшаривания статей с сайта

Почти на любом сайте стоят кнопки с лайками и расшариваниями от соц. сетей. Оригинальные, которые предлагают разработчики соц. сети, либо наборы кнопок от сторонних производителей. Это не так важно. Важно другое, если у вас не настроены специальные мета свойства, то при расшаривании случается, что скрипты кнопок могут забирать не те картинки со страницы, не красивый фрагмент текста и т. д. К примеру, вместо изображения к статье, в соц. сеть может тянуться логотип сайта.

Это легко исправить использованием специального словаря микроразметки  Open Graph (OG). Это самый распространенный и популярный словарь. Разметку Open Graph распознают все популярные соц. сети: Facebook Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие. 

C Open Graph можно будет красиво оформить контент с текстом, видео, добавить краткое описание, фотографию, ссылку на сайт и т.д.

Базовый синтаксис

Для начала использования достаточно 4 параметров

  • og:title - название статьи.
  • og:type - тип объекта, например видеоконтент "video.movie" или текстовый "article", есть другие параметры.
  • og:image - изображение, которое будет прикреплено.
  • og:url - канонический URL объекта, постоянная ссылка на страницу со статьёй., например "http://exemple.ru/title/tt0117500/".

Для полной красоты этого будет мало, я бы добавил ещё описание и название сайта. Более полный пример:

<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="Заголовок статьи" />
<meta property="og:type" content="article" />
<meta property="og:description" content="Описание статьи в одно небольшое предложение" />
<meta property="og:url" content="http://example.ru/article/12" />
<meta property="og:image" content="http://example.ru/article/images/rock.jpg" />
<meta property="og:site_name" content="Example.ru">
</head>
</html>

Словарь содержит гораздо больше свойств, ознакомиться со всеми можно на официальном сайте Open Graph (OG).

Комментарии

Использую в своей работе