Откройте свои данные ботам с помощью микроданных

От автора: микроданные – еще одна технология, быстро набирающая популярность и поддержку. Однако в отличие от WAI-ARIA, чисто технически, микроданные являются частью HTML5. Несмотря на раннюю стадию разработки, о спецификации микроданных стоит упомянуть, так как эта технология позволяет заглянуть в возможное будущее семантики и читабельности документов.

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

С помощью микроданных авторы страниц могут добавлять определенные лейблы к HTML элементам, комментируя их для машин и ботов. Делается это с помощью инструментов настраиваемого словаря. Например, необходимо, чтобы скрипт или другой сторонний сервис имел доступ к вашим страницам и взаимодействовал с заданными элементами определенным образом. Микроданные позволяют расширить существующие семантические элементы (article и figure), что позволит этим сервисам получить специальный доступ к контенту комментариев.

Звучит сложно, давайте разберем реальный пример. Скажем, у вас есть сайт с рецензиями на фильмы. Каждая рецензия расположена в теге article, а также есть набор звезд или проценты, показывающие рейтинг рецензии. Но когда машина проходится по странице, например, поисковой робот Google, она не знает, где именно расположена сама рецензия. Робот видит лишь кучу текста.

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

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

Разве, в HTML5 не хватает семантики?

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

Микроданные же позволяют разработчикам задействовать кастомные словари (существующие или свои) под определенные ситуации, с помощью которых можно делать то, что невозможно с помощью семантических HTML5 элементов. Таким образом, существующие HTML элементы и новые теги в HTML5 сохраняются, как основа. Разработчики в дополнение могут создать определенные аннотации под свои нужды.

Синтаксис микроданных

Микроданные работают с существующим хорошо сформированным контентом, а также вставляются в документ с помощью пар имя-значение (или свойств). Микроданные запрещают создавать новые элементы, они дают возможность добавлять кастомные атрибуты, расширяющие семантику существующих элементов.

Простой пример:

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

Возможность определять рамки нашего словаря позволяет вставлять на одну страницу несколько словарей. Теперь хорошо бы объяснить, как скрипт получает информацию из этих атрибутов, а также что такое «пары имя-значение».

Понятие пар имя-значение

Имя – это свойство, которое задается через атрибут itemprop. В нашем примере первым именем свойства будет name. В рамках этого словаря есть еще два имени свойств: photo и url.

Значения для свойств определяются по-разному, все зависит от того, на каком свойстве объявлены микроданные. У большинства элементов значение берется из текстового контента. Например, свойство name из нашего примера берет свое значение из текста между открывающим и закрывающим тегом h1. С другими элементами принцип может отличаться.

Свойство photo получает значение из атрибута src изображения. То есть значение является URL’ом на фото автора. Свойство url хотя и задано на элементе с текстовым контентом (а именно фраза «Author’s website»), но берет значение из атрибута href.

Среди других элементов, которые не используют текстовый контент для определения значения микроданных можно выделить meta, iframe, object, audio, link и time. Полный список таких элементов ищите в разделе значений в спецификации микроданных.

Пространства имен в микроданных

До сих пор мы говорили о микроданных, которые нельзя повторно использовать, но это слегка непрактично. Реальная мощь микроданных раскрывается, когда, как мы уже говорили, сторонние скрипты и авторы могут получить доступ к нашим парам имя-значение и могут извлечь из них пользу.

Для этого каждый элемент должен определять тип с помощью атрибута itemtype. Не забывайте, что в контексте микроданных именно на элементе задается атрибут itemscope. Все элементы и пара имя-значение внутри элемента являются частью элемента. Поэтому значение атрибута itemtype определяет пространство имен словаря элемента. Давайте добавим itemtype в наш пример:

Мы используем URL «//schema.org/Person» в нашем элементе, который ведет на сайт Schema.org, совместный проект, поддерживаемый несколькими крупными поисковиками. На сайте можно найти множество словарей по микроданным, в том числе по организациям, людям, обзорам, событиям и т.д.

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

Автор: Alexis Goldstein, Estelle Weyl, Louis Lazaris

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: