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

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

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

<div> 
  Меня зовут Боб Смит, но друзья зовут меня Смитти.  Вот моя домашняя страница:
  <a href="http://www.example.com">www.example.com</a>
  Я живу в Альбукерке, штат Нью-Мексико, и работаю инженером в ACME Corp.
</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">ACME Corp</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">ACME Corp</span>.
</div>

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

  • Свойство address само по себе является элементом, содержащим собственный набор свойств. Чтобы обозначить это, добавим в элемент атрибут itemscope, который объявляет свойство address, и с помощью атрибута itemtype укажем тип описываемого элемента следующим образом: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/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 минут".

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

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