Основы применения микроданных (microdata)

Официальная спецификация микроданных на сайте консорциума W3C.

Назначение микроданных – сделать текст не просто набором слов, но придать ему большее семантическое значение. Это значит, что поисковый робот, изучая содержимое вашего сайта, сможет составлять и анализировать связи между объектами, на которые вы хотите ему указать. Звучит слишком сложно? Давайте рассмотрим пример, и всё сразу станет понятно. 

1Пример использованиямикроданных

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

Вот, например, выдача поисковика для какого-то детского мероприятия. Верхний сайт не использует возможности семантической разметки, а нижний – использует.

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

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

2Использованиемикроданных

Как же работают микроданные? Очень просто. Достаточно добавить к обычной HTML-разметке несколько машиночитаемых атрибутов. Пользователю они не видны, зато поисковому роботу – да. Например, так выглядела бы наша разметка без микроданных:

<p>Детское представление «Щелкунчик» состоится 22 декабря в СК Олимпийский в Москве.</p>

А вот так – с микроданными:

<p itemscope itemtype="мероприятие">Детское <spаn itemprop="название_мероприятия">представление «Щелкунчик»</spаn> состоится <spаn itemprop="дата">22 декабря</spаn> в <spаn itemprop="место_проведения">СК Олимпийский</spаn> в Москве.</p>

Здесь, как видно, к основным html-тегам добавилось несколько новых атрибутов:

• itemscope – задаёт область действия блока микроданных; в данном случае область ограничена блочным элементом абзаца <p>;
• itemtype – задаёт тип данных, которые присутствуют в этой области;
• itemprop – задаёт свойства данных; свойств может быть несколько, что мы тут и видим.

В нашем случае поисковый робот, используя вышеуказанную семантическую разметку, выделит следующую информацию: 

Эти данные поисковый робот сможет обработать и преподнести пользователю в удобном виде. В зависимости от типа данных, микроданные могут позволить внести событие в календарь, добавить контакты человека в адресную книгу, заказать товар или купить билет на самолёт/поезд/автобус/в театр и т.д. 

Но откуда поисковый робот вообще узнает, что означает слово «мероприятие»? Для этого нужно соблюдать некую договорённость, чтобы все сайты использовали один и тот же т.н. «словарь», в котором даётся описание слова, его свойства и взаимоотношения с другими объектами. В настоящее время таким словарём является сайт schema.org и ещё несколько сайтов, в которых хранятся общепринятые словари микроданных. 

Эти словари разработаны группой компаний WHATWG, которая активно занимается разработкой и внедрением новых возможностей в глобальной сети, в том числе и microdata.

Чтобы использовать эти словари, нужно сначала выбрать подходящий тип данных. Типы данных указываются в виде URI. Например, для мероприятия подходящим типом из словаря будет тип "Event" с URI "http://schema.org/Event". 

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

Если переписать наш пример с использованием общепринятого словаря, получим такую разметку:

<p itemscope itemtype="http://schema.org/Event">Детское <span itemprop="name">представление «Щелкунчик»</span> состоится <span itemprop="startDate">22 декабря</span> в <span itemprop="location">СК Олимпийский</spаn> в Москве.</p>

Один атрибут itemprop может иметь одновременно несколько значений, тогда они разделяются пробелами. Например:

<span itemprop="location performer">СК Олимпийский</spаn>

Здесь СК «Олимпийский» – и место проведения, и организация-исполнитель (согласен, немного некорректный пример, но суть демонстрирует).

Микроданные могут быть размещены в нескольких раздельных блоках, разнесённых по тексту страницы. Тогда можно использовать свойства itemid и itemref, чтобы один блок ссылался на другой, и тогда они воспринимаются поисковым роботом как один itemscope. Например:

<p itemscope itemtype="http://schema.org/Event" itemref="artist">Детское <span itemprop="name">представление «Щелкунчик»</span> состоится <span itemprop="startDate">22 декабря</span> в <span itemprop="location">СК Олимпийский</spаn> в Москве.</p>
<!-- Здесь ещё какая-то информация о представлении … -->
<p id="artist">Будет выступать Евгений Плющенко!</p>

До сих пор мы приводили примеры, когда микроданные берутся из самого текста. А как быть, например, с изображениями или гиперссылками? Конечно, для них также предусмотрена возможность семантической разметки:

<p itemscope itemtype="http://schema.org/Event">Детское <span itemprop="name">представление «Щелкунчик»</span> состоится <span itemprop="startDate">22 декабря</span> в <span itemprop="location"><a itemprop="url" href="http://www.olimpik.ru/">СК Олимпийский</a></spаn> в Москве.</p>

Использование микроданных с изображением:

<figure><img itemprop="http://schema.org/logo" src="http://www.olimpik.ru/images/olimpik.jpg" /><figcaption>Логотип СК «Олимпийский»</figcaption></figure>

В таких случаях – когда значение не является только лишь текстом или совсем не является текстом – значение микроданных берётся из значения атрибута. В данном случае – атрибута href. Аналогичным образом микроданные принимают значения атрибута для следующих тегов (и ещё нескольких, более редких):

• <a href="">
• <img src="">
• <embed src="">
• <iframe src="">
• <object data="">
• <audio src="">
• <video src="">
• <link href="">
• <source src="">
• <area href="">

В HTML5 появился новый тег для обозначения времени – time. Микроданные здесь также используют не значение из текста, а значение атрибута:

<p itemscope>…состоится <time itemprop="date" datetime="2017-12-22">22 декабря</time> в СК Олимпийский в Москве.</p>

Время указывается в атрибуте datetime в формате ISO-8601.

Микроданные могут быть вложенными друг в друга, когда один объект выступает в нескольких ролях:

<p itemscope>…состоится 22 декабря в <span itemprop="location" itemscope itemtype="http://schema.org/Organization"><span itemprop="http://schema.org/legalName">СК Олимпийский</spаn></spаn> в Москве.</p>

Мы рассмотрели лишь часть из обширных возможностей использования микроданных. Ввиду большого количества возможностей построения взаимосвязей между объектами, несложно допустить в разметке микроданных синтаксическую или логическую ошибку, отойти от рекомендаций словаря. Поэтому для валидации разметки существует ряд технических средств, упрощающих жизнь разработчика. В частности, автоматизированное средство валидации микроданных от Гугл. Оно наглядно представляет, как «видит» разметку поисковый робот, а также выдаёт рекомендации по исправлению ошибок, если таковые имеются.

Для валидации разметки существует автоматизированное средство валидации микроданных. Оно наглядно представляет, как «видит» разметку поисковый робот, а также выдаёт рекомендации по исправлению ошибок, если таковые имеются.