Разметка Schema.org

Schema.org — это стандарт семантической разметки данных в сети, который поддерживается основными поисковыми системами, включая Яндекс. Стандарт представляет собой набор классов, описывающих различные сущности и их свойства. Подробнее о стандарте можно узнать на официальном или русскоязычном сайте.

Примечание. Помните, данные микроразметки становятся общедоступными, и любой сервис может извлечь и использовать их.

Принципы разметки Schema.org

Для разметки страницы с помощью Schema.org добавьте атрибут itemscope к любому тегу, в котором содержится описываемая сущность. Чтобы указать, что это за сущность, сразу после itemscope добавьте атрибут itemtype и в качестве его значения пропишите нужный класс в виде itemtype="http://schema.org/<Имя класса>". Сущности также можно вкладывать друг в друга. Например, так можно указать, что содержимое тега div описывает новостную статью (класс NewsArticle), а тега p — персону (класс Person):
<div itemscope itemtype="http://schema.org/NewsArticle">
   <h1>В Москве побит температурный рекорд 1922 года</h1>
   <p itemscope itemtype="http://schema.org/Person">
      Автор: <span>Иван Иванов</span> — <span>специальный корреспондент</span></p>  
   <p>В среду, 6 ноября, в Москве был побит температурный рекорд, 
      зафиксированный в 1922 году. Температура воздуха составила плюс 12,1 градуса 
      по Цельсию, как сообщает центр «Фобос».</p>
</div>

Чтобы указать свойства сущности, используйте атрибут itemprop. Список доступных свойств можно найти в описании соответствующего класса на сайте стандарта. В примере ниже с помощью свойств NewsArticle размечены элементы, описывающие заголовок статьи, ее автора и текст, а с помощью Person — имя и должность автора:

<div itemscope itemtype="http://schema.org/NewsArticle">
   <h1 itemprop="headline">В Москве побит температурный рекорд 1922 года</h1>
   <p itemprop="author" itemscope itemtype="http://schema.org/Person"> 
      Автор: <span itemprop="name">Иван Иванов</span> — 
      <span itemprop="jobTitle">специальный корреспондент</span> </p>
   <p itemprop="articleBody">В среду, 6 ноября, в Москве был побит температурный рекорд, 
      зафиксированный в 1922 году. Температура воздуха составила плюс 12,1 градуса 
      по Цельсию, как сообщает центр «Фобос».</p>
</div>

Машиночитаемая информация

При разметке статьи можно использовать не только сущности Schema.org, но и машиночитаемую информацию. Ее не видят читатели, но могут обработать браузеры, поисковые системы или роботы.

Тег meta

Иногда важная информация не может быть размечена из-за способа ее отображения на странице. Например, когда информация представлена на рисунке, во Flash-объекте или явно не указана на странице. В таких случаях можно использовать тег meta с атрибутом content. В примере ниже с помощью meta и свойства класса Article указана тематика статьи:

<meta itemprop="about" content="Погода">

Этим приемом не следует злоупотреблять. Используйте тег meta с атрибутом content только для той информации, которую невозможно разметить иным способом.

Дата и время

Для записи времени можно использовать атрибуте datetime тега time. Даты записываются в формате ISO 8601. В примере ниже на странице будет отображена дата 10:30, 6 ноября 2018, а роботу — передана 2018-12-11T07:30:00Z.

<time datetime="2018-11-06T07:30:00Z"> 10:30, 6 ноября 2018</time>

Как разметить статью

При разметке статьи вы можете использовать как сущности Schema.org (Article или NewsArticle и любые вложенные сущности), так и машиночитаемые данные, описанные выше.

Рекомендуется разметить статью в соответствии с приведенными ниже правилами, чтобы она корректно обрабатывалась, а вы могли получать более полную статистику. Если вы уже используете Schema.org, проверьте, соответствует ли разметка на вашем сайте этим требованиям. Примеры кода не являются единственно правильным вариантом разметки.

Совет. Мы рекомендуем размечать статью так, чтобы туда не попадало лишнее: рекламные баннеры, блоки комментариев и т. п.

В статье должны быть размечены:

Идентификатор статьи

Идентификатор указывается с помощью свойства identifier.

Значение может быть взято из:

  • содержимого тега
    <span itemprop="identifier">12345</span>
  • тега meta
    <meta itemprop="identifier" content="12345">
Также идентификатор можно указать с помощью свойства mainEntityOfPage. Оно будет использоваться, если не найдено свойство identifier. В нем ищется значение атрибута itemid, которое будет использоваться в качестве идентификатора.
<meta itemscope itemprop="mainEntityOfPage" 
  itemType="https://schema.org/WebPage" itemid="/life/weather/12345.html"/>

Если задано несколько идентификаторов, будет использоваться первое найденное значение. Если не найдено ни одно из свойств выше, в качестве идентификатора может быть использовано значение атрибута href канонической ссылки или значение хэш-функции от URL статьи.

Заголовок
Заголовок может быть указан в свойствах headline или alternativeHeadline и отображается в соответствующем отчете Метрики. Если заданы оба свойства, их значения будут записаны через пробел. Например, если заголовки размечены так:
<h1 itemprop="headline">В Москве 
  побит температурный рекорд 1922 года</h1>
<h2 itemprop="alternativeHeadline">
  Температура в ноябре превысила 12 °С</h2>

в отчете статья будет называться «В Москве побит температурный рекорд 1922 года Температура в ноябре превысила 12 °С».

Текст статьи

Текст статьи должен содержаться в теге со свойством articleBody.

В тексте ищется количество символов — это нужно для определения объема статьи и расчета метрик дочитывания. В качестве текста учитывается только содержимое вложенных тегов, символы самих тегов не учитываются. Помните: если внутри текста есть вложенные элементы, например слайдер или виджет, объем статьи может посчитаться неправильно.

<p itemprop="articleBody">
  В среду, 6 ноября, в Москве был побит температурный рекорд, зафиксированный 
  в 1922 году. Температура воздуха составила плюс 12,1 градуса по Цельсию, 
  как сообщает центр «Фобос».
</p>

Если не найдено свойство articleBody, в качестве текста берется все содержимое тега, помеченного как Article или NewsArticle, включая символы тегов.

Автор

Автор указывается с помощью свойства author. Если авторов несколько, укажите их в разных тегах. Значение может быть взято из:

  • свойства name класса Person

    <div itemprop="author" itemscope itemtype="http://schema.org/Person">
      <span itemprop="name">Иван Иванов</span>
    </div> 
  • атрибута content тега meta
    <meta itemprop="author" 
       itemtype="https://schema.org/Person" content="Иван Иванов">
  • содержимого тега

    <div itemprop="author">Иван Иванов</div>
  • атрибута ссылки href

    <link itemprop='author' href="/example/authors/ivan_ivanov.html"/>

Благодаря этим данным можно посмотреть статистику по отдельным авторам в Метрике.

Тематика

В качестве тематик можно разметить, например, ключевые слова или хэштеги. Для этого нужно определить свойство about для каждой тематики. Это можно сделать с помощью тега meta или свойства name любого класса:

<meta itemprop="about" content="Жара"/>
<div itemprop="about" 
  itemscope itemtype="https://schema.org/Thing">
  <span itemprop="name">Москва</span>
</div>
Даты публикации и изменения

Даты публикации datePublished и изменения dateModified записываются в формате ISO 8601. Дату можно передать в атрибуте content тега meta

<meta content="2018-12-11T08:56:49Z" itemprop="datePublished"/>

или в атрибуте datetime тега time

<time datetime="2018-12-11T07:30:00Z" 
  itemprop="dateModified">
  10:30, 11 декабря 2018
</time>
Рубрика

Рубрика — это раздел сайта, посвященный определенной теме. Для разметки рубрики используйте класс BreadcrumbList. С его помощью описывается цепочка связанных страниц («хлебные крошки»), которая обычно заканчивается текущей статьей. Внутри BreadcrumbList должно быть определено несколько сущностей типа ListItem, размеченных свойством itemListElement, которые описывают текущую и более широкие рубрики.

Вложенность рубрик задается с помощью свойства position класса ListItem. Например, в рубрике «Жизнь» могут содержаться вложенные рубрики «Погода» и «Происшествия». При position = '1' статья находится на верхнем уровне («Жизнь»), при position = '2' — на втором («Погода»).

Рубрикой статьи будет считаться значение свойства name сущности ListItem с наибольшим значением position .

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="//example-news.ru/life">
    <span itemprop="name">Жизнь</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="//example-news.ru/life/weather">
    <span itemprop="name">Погода</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>
Каноническая ссылка

Если текущая страница дублирует страницу на сайте, в статье может использоваться указание на основную статью — каноническая ссылка. Она размечается специальным атрибутом rel="canonical". В качестве канонической ссылки будет использоваться значение атрибута href ссылки. Например, если статья является дублем страницы http://www.example-news.com/blog, в ней нужно указать <link rel="canonical" href="http://www.example-news.com/blog"/>.

Найденное значение может использоваться при генерации идентификатора статьи.

Убедитесь, что размеченные данные правильно и без ошибок распознаются валидатором Вебмастера. Если разметка верна и правильно подключен счетчик, через некоторое время по статье начнет собираться статистика в Метрике.

Пример разметки статьи

<!DOCTYPE html>
<html>
<head></head>
<body>
  <article>
    <h1>В Москве побит температурный рекорд 1922 года</h1>
    <div> Температура в ноябре превысила 12 °С</div> 
    <span><a href="/example-news/authors/ivan_ivanov.html">Иван Иванов</a></span>
    <time datetime="2018-11-06T09:25:10+04:00">06.11.2018, 09:25</time>
    <meta content="2018-11-06T09:25:10+04:00"/>
    <div>
      В среду, 6 ноября, в Москве был побит температурный рекорд, 
      зафиксированный в 1922 году. Температура воздуха составила плюс 12,1 градуса 
      по Цельсию, как сообщает центр «Фобос».
    </div>
  </article>
</body>
</html>

Особенности загрузки содержимого страницы

Если в статье много изображений или выполняются сложные скрипты, часто используется «ленивая загрузка» — данные на странице загружаются асинхронно. Рекомендуется передавать все размеченные данные при открытии статьи. Это позволит корректно получать и обрабатывать все значения.