О микроданных

Микроданные HTML5 – способ разметки специальных типов данных, например отзывов, сведений о человеке или мероприятиях. Каждый тип данных описывает определенный тип элемента, например человека, мероприятие или отзыв. Например, свойствами мероприятия являются место проведения, время начала, название и категория.

Микроданные добавляют простые атрибуты в теги HTML (чаще всего <span> или <div> ), с помощью которых элементам присваиваются краткие описательные названия и свойства. Ниже приведен пример HTML-кода, показывающего основную контактную информацию Николая Иванова.

<div> 
  Я Николай Иванов, но друзья зовут меня просто Иваныч. Моя страница в Интернете:
<a href="http://www.example.com">www.example.com</a>
Я живу в г. Выборг, в Ленинградской области, и работаю инженером в компании "Нева Техника"
</div>

Вот тот же HTML-код, размеченный с помощью микроданных.

<div itemscope itemtype="http://data-vocabulary.org/Person"> 
  Я <span itemprop="name">Николай Иванов</span> 
  но друзья зовут меня просто <span itemprop="nickname">Иваныч</span>. 
  Моя страница в Интернете:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  Я живу в г. Выборг, в Ленинградской области, и работаю <span itemprop="title">инженером</span>
  в компании "<span itemprop="affiliation">Нева Техника</span>".
</div>

Как работает этот код:

  • В первой строке параметр itemscope указывает, что текст в тегах <div> описывает элемент, а itemtype="http://data-vocabulary.org/Person указывает, что это элемент "человек".
  • Каждое свойство элемента "человек" отмечается атрибутом itemprop. Например, itemprop="name" описывает имя человека.

Вложенные сущности

Приведенный выше пример показывает контактную информацию Николая Иванова, но не содержит его адрес. В примере ниже показан тот же HTML-код, но со свойством address.

<div itemscope itemtype="http://data-vocabulary.org/Person">
   Я <span itemprop="name">Николай Иванов</span>, 
   но друзья зовут меня просто <span itemprop="nickname">Иваныч</span>.
   Моя страница в Интернете: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Я живу в 
   <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="locality">г. Выборг</span>, в
      <span itemprop="region">Ленинградской области</span>, 
   </span>
   и работаю <span itemprop="title">инженером</span>
   в компании <span itemprop="affiliation">Нева Техника</span>.
</div>

Вот как работает этот пример.

  • Свойство address само по себе является элементом, содержащим собственный набор свойств. На это указывает атрибут itemscope рядом с элементом, содержащим свойство address, а также атрибут itemtype, задающий тип элемента: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.

Другие примеры доступны в разделе Вложенные сущности.

Элементы со ссылками

Можно единожды задать элемент, а затем просто ссылаться на него. В примере ниже сначала задается адрес, а затем – два человека (Николай и Елена Ивановы), которые живут по адресу.

<div id="ivanych-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
   <span itemprop="locality">г. Выборг</span>, 
   <span itemprop="region">Ленинградская область</span> 
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="ivanych-address">
   Я <span itemprop="name">Николай Иванов</span>, 
   но друзья зовут меня просто <span itemprop="nickname">Иваныч</span>.
   Моя страница в Интернете: 
   <a href="http://www.example.com" itemprop="url">www.example.com</a>.
   Я работаю <span itemprop="title">инженером</span>
   в компании "<span itemprop="affiliation">Нева Техника</span>".
</div>

<div itemscope itemtype="http://data-vocabulary.org/Person" itemref="ivanych-address">
   Я <span itemprop="name">Елена Иванова</span>.
</div>

Вот как работает этот пример.

  • HTML-код, определяющий элемент address, содержит атрибут id: <div id="ivanych-address" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
  • Элементы person связывают Николая и Елену Ивановых с адресом с помощью атрибута itemref и идентификатора адреса: <div itemscope itemtype="http://data-vocabulary.org/Person" itemref="ivanych-address">.

Информация о дате и времени

Однозначно указать дату и время можно с помощью элемента time с атрибутом datetime. В этом случае свойство startDate указывает дату начала мероприятия. Значение атрибута datetime указывается в формате формате даты ISO. Этот формат позволяет поисковой системе определить точную дату, время и часовой пояс (необязательно) в формате ISO (например, "2009-10-15T19:00-08:00"), в то время как на странице дата отображается в привычном для чтения формате: "15 октября 2009 г., 19:00".

<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">15 октября 2009 г., 19:00</time>

Невидимое содержание

Обычно Google не отображает содержание, невидимое для пользователя. Другими словами, содержание может быть представлено для пользователя одним способом, а для поисковых систем и веб-приложений – с помощью скрытого текста. Размечать следует тот текст, который виден пользователю при посещении веб-страницы.

Из этого правила есть несколько исключений. В ряде случаев может оказаться полезным предоставить поисковым системам более подробную информацию, даже если ее не нужно отображать посетителям. Например, если ресторан имеет оценку 8,5, то пользователь (но не поисковая система) может предположить, что она поставлена по шкале от 1 до 10. В данном случае шкалу можно указать с помощью элемента meta следующим образом:

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
   Рейтинг: <span itemprop="value">8.5</span>
   <meta itemprop="best" content="10" />
</div>

Вот как работает этот пример.

  • В теге meta указывается дополнительная информация, которая не отображается на странице. В нашем примере это наивысший рейтинг, равный 10. Значение свойства определяется атрибутом content.

Подобным же образом указание продолжительности мероприятия в формате ISO поможет правильно отобразить информацию в результатах поиска. Пример:

Продолжительность: 
<span>1 час 30 минут<meta itemprop="duration" content="PT1H30M" />
</span>

Вот как работает этот пример.

  • Метатег meta позволяет указать значение этого свойства (в данном случае – продолжительности). Атрибут content ("PT1H30M") позволяет указать продолжительность в формате ISO 8601, в то время как на странице она отображается в привычном для чтения формате: "1 час 30 минут".
  • Google по родительскому элементу элемента meta определяет информацию, представляемую в альтернативном виде в теге meta. В этом случае важно убедиться, что непосредственный родительский узел тега meta обрамляет текст "1 час 30 минут".

Специальные термины и примеры представлены в следующих статьях:

Разметку можно протестировать с помощью инструмента проверки структурированных данных.