Open Graph
Open Graph — это словарь семантической разметки данных. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам. Подробнее можно узнать на официальном сайте.
Принципы разметки
Данные об объекте в Open Graph описываются наборами пар свойство-значение в метатегах. Свойство необходимо указать в property , а его значение — в content.
Стандарт требует, чтобы данные Open Graph располагались в теге head. Но для сбора статистики по контенту мы рекомендуем размещать метатеги в узле, в который вложен материал, особенно когда на странице несколько материалов. Это необходимо для корректного расчета метрик доскроллов и дочтения.
Как разметить материал
Разметьте следующие элементы материала (обязательные элементы отмечены звездочкой):
- Тип описываемого объекта*
-
Метрика поддерживает разметку только статей (article). Другие материалы, размеченные по стандарту, не попадут в отчеты Метрики. Тип объекта указывается в свойстве og:type.
<meta property="og:type" content="article">
- Заголовок*
- Заголовок отображается в отчетах Метрики. Он указывается в свойстве og:title.
<meta property="og:title" content="В Москве побит температурный рекорд 1922 года">
- Текст*
-
В качестве текста берется содержимое узла, в который вложен описываемый материал. Если разметка находится в теге head, текстом будет все содержимое тега body. Символы тегов не учитываются. В тексте определяется количество символов — это нужно для расчета объема материала и метрик доскроллов и дочтения.
Примечание. Полную статистику можно получить по материалу, в тексте которого больше 500 символов. - Автор
-
Автор указывается с помощью свойства article:author. Если авторов несколько, перечислите их в разных метатегах.
<meta property="article:author" content="Иван Иванов"> <meta property="article:author" content="Петр Петров">
Благодаря этим данным можно посмотреть статистику по отдельным авторам.
- Тематика
-
В качестве тематик можно указать, например, ключевые слова или хэштеги. Укажите тематики в свойстве article:tag. Если тематик несколько, перечислите их в разных метатегах.
<meta property="article:tag" content="Жара"> <meta property="article:tag" content="Москва">
- Даты публикации и изменения
-
Даты публикации и изменения указываются в свойствах article:published_time и article:modified_time. Даты записываются в формате ISO 8601.
<meta property="article:modified_time" content="2018-12-11T08:56:49Z"> <meta property="article:published_time" content="2018-11-06T09:26:10+04:00">
- Рубрика
-
Рубрика — это раздел сайта, посвященный определенной теме. Чтобы указать рубрику материала, используйте свойство article:section.
<meta property="article:section" content="Погода">
- URL материала
-
URL материала должен содержаться в свойстве og:url.
<meta property="og:url" content="https://www.example-news.com/life/weather/moscow"/>
Иначе значение будет взято из канонической ссылки:
<link rel="canonical" href="https://www.example-news.com/life/weather/moscow">
Если разметка верна и правильно подключен счетчик, через некоторое время по материалу начнет собираться статистика в Метрике.
Пример разметки
<html prefix="og:http://ogp.me/ns# article:http://ogp.me/ns/article#">
<head>
<title>В Москве побит температурный рекорд 1922 года</title>
<meta property="og:type" content="article"/>
<meta property="og:title" content="В Москве побит температурный рекорд 1922 года"/>
<meta property="og:url" content="https://www.example-news.com/life/weather/moscow#cao"/>
<meta property="article:section" content="Погода">
<meta property="article:modified_time" content="2018-12-11T08:56:49Z">
<meta property="article:published_time" content="2018-11-06T09:26:10+04:00">
<meta property="article:author" content="Иван Иванов">
<meta property="article:author" content="Петр Петров">
<meta property="article:tag" content="Жара">
<meta property="article:tag" content="Москва">
...
</head>
<body>
<div>
В среду, 6 ноября, в Москве был побит температурный рекорд,
зафиксированный в 1922 году. Температура воздуха составила плюс 12,1 градуса
по Цельсию, как сообщает центр «Фобос».
</div>
...
</body>
</html>