Микроданные

Спецификация микроданных (Microdata) — самая молодая из описываемых здесь. Она создавалась с учетом опыта использования своих предшественников, и именно она стала частью HTML5. Основное ее отличие состоит в том, что смысловая нагрузка к любому HTML-элементу придается добавлением к нему специального набора атрибутов. Прилагается также специальный DOM API для работы с микроданными из сценариев веб-страницы.

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

<div>

Здраствуйте! Я

Иван Паровозов </span>,

Более известный как <span itemprop="nickname">

Crazzy

</span>.

Подробнее обо мне:

<a itemprop=”url” href=”http://www. сrazzy1969.com” >www. сrazzy1969.com</a>.

Мой адрес:

Г. Эгвекинот, Чукотский АО

3-я улица Строителей, дом 25, квартира 12

Я программист

В Nord Software

Мои контакты:

+7 (952) 345 67 89 parovozoff@yandex. ru

Мои контакты в соцсетях:

<a href=”Http://www. facebook. com/profile. php? id=100003262466667”>faceboock</a>,

<a href=”http://edna-blog. example. com”>вконтакте</a>,

<a href=”Http://www. odnoklassniki. ru/#/profile/522180651074” > одноклассники</a>

</div>

Разберем, что значат все эти item*, на конкретном примере. Создадим разметку анонса исторического события — выступления в Санкт-Петербурге прославленного блюзмена Джо Банамассы (Http://en. wikipedia. org/wiki/Joe_Bonamassa), которое состоится 14 марта в ДК Горького. (Книга наверняка выйдет после концерта, так что кусайте локти.)

Сначала создадим обычную разметку:

<div>

<h1>JOE BONAMASSA. Новый король блюза. Впервые в Санкт-Петербурге!<Д1>

<p>

14 марта 2012 г

Сан: //www. gorkogo. spb. ru/т-Петербург (ДК им. Горького) пл. Стачек, д. 4.

Начало концерта: 19.00

<a href=”” >билеты в кассах ДК </a>

</p>

</div>

Что может получить из этого привычного текста, например, поисковый робот? Примерно то, что изображено на рис. 26, — прямо скажем, не очень много. Попытаемся исправить положение с помощью механизмов Microdata. Прежде всего добавим пару новых атрибутов обрамляющему тегу <div>:

Рис. 26. Словарь Events

Первый, itemscope, задает границы действия словаря (в данном случае — тег <div/>, то есть все содержимое страницы), второй указывает на затребованный словарь.

Вспомним, что микроданные представляют собой пары ключ/значение. Но берутся эти ключи не с потолка, а из особого словаря, который, впрочем, теоретически может завести любой программист, задающий пространство имен (строго говоря, его даже не обязательно публиковать, если, конечно, вы не хотите, чтобы с ним работали и другие разработчики). Здесь мы воспользуемся уже существующим словарем (и это в общем случае правильно!). Он совершенно равноправен с тем, что мы могли написать сами, но обладает несомненным достоинством — формат его данных понимает Google и другие поисковые системы. Наш словарь расположен по адресу Http://www. data-vocabulary. org/Event / и представляет собой следующую таблицу (рис. 27). Как видите, это настоящий словарь в прямом значении этого слова, и вот какие термины нам сразу понадобятся:

— summary (Required) — название мероприятия;

— Location — место проведения мероприятия;

— startDate (dtstart) (Required) — дата и время начала мероприятия;

— eventType (category) — тип мероприятия — концерт, лекция, демонстрация и т. д.;

— photo — фотография или картинка, связанная с мероприятием.

Рис. 27. Событие в поисковой выдаче, проиндексированное до разметки метаданными

Впрочем, про summary, startDate и Location можно было не говорить. Они помечены как обязательные (Required), и если мы хотим пользоваться этим словарем, то должны их задать. Это вполне логично, так что примемся за дело:

JOE BONAMASSA. Новый король блюза. Впервые в Санкт-Петербурге! </h1>

<p>

<span itemprop="eventType">концерт</span>

14 марта 2012 г Начало концерта: 19.00

</time>

Санкт-Петербург (ДК им. Горького) пл. Стачек, д. 4.

</span>

Билеты в кассах ДК </a>

</p>

</div>

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

В общем случае этим значением будет текстовое содержимое тега (то есть для <span itemprop=”foo”>content</span> будет верна пара — foo’=>’content-).

Исключения составляют:

— элементы <a>, <area>, <link> — значением будет содержание атрибута href;

— элементы <img><iframe> <audio> <video> <embed> <source> — содержание атрибута src;

— элемент <meta> — значение атрибута content;

— элемент <object> — значение атрибута data.

И наконец, все еще спорный на момент написания статьи элемент <time> (HTML5) — значение атрибута datetime.

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

{

”summary”=>”JOE BONAMASSA. Новый король

”photo”=>”joe. gif”,

”eventType”=>”концерт”,

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

Это уже хорошо, но есть что улучшить. Значением ключа location у нас является Петербургский ДК имени Горького, который, хоть и отлично знаком питерским меломанам, для поисковых роботов является просто строчкой текста. Исправим это положение вещей, вставив микроданные из другого словаря — Organization, причем сделаем это внутри родительского элемента, обозначенного зоной действия словаря Event:

Рис. 28. Событие в поисковой выдаче, проиндексированное после разметки метаданными

<span itemprop="location" itemscope itemtype="Http://data-vocabulary. org/ Organization’

Теперь на все дочерние элементы тега span будет распространяться действие словаря Organization, а после закрытия тега снова начнется область действия родительского словаря Event.

<span itemprop="name">ДК им. Горького</span>

<span Санкт-Петербург, пл. Стачек, д. 4.

</san>

</span> itemprop="address" >

Впрочем, для представления адреса также есть словарь, который нам никто не запрещает применить:

<span itemprop="address" itemscope itemtype="Http://data-vocabulary. org/A ddress"> <span itemprop="locality">Санкт-Петербург</span>,

<span itemprop="street-address">пл. Стачек, д. 4.</span><br>

</span>

Текст приходится разбивать дополнительными тегами, но это обычный прием при использовании микроданных — такова плата за их использование.

А теперь вернемся к словарю Organization. В него входит очень интересный ключ:

Geo — Specifies the geographical coordinates of the location. Includes two elements: latitude and longitude.

Да, это возможность обозначить геолокационные данные организации.

Мысль сама по себе хорошая и перспективная, но поместить эти данные в видимую разметку просто некуда. Решением тут будет поступить в духе HTML5, спецификация которого заставляет по-новому взглянуть на возможности тега <meta/>:

</span>

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

<a href = # onclick = openUrl();>http://example. com</a>

Поместив itemprop="url" (например) в тег <a>, мы тут вряд ли добьемся нужного результата.

Стандартным выходом из такого положения будет следующая разметка:

<span itemprop="url"><a href = # onclick = openUrl();>http://example. com</a></ span>

Тег span просто использует текстовое содержание дочернего элемента.

Еще один аспект заключается в обработке одинаковых элементов. Но тут все просто. Может ли, например, у одного человека (словарь Person) быть несколько фото (itemprop="photo")? А почему бы, собственно, и нет?

<h1>My gallery</h1>

Впрочем, здесь следует остановиться, идеи разметки, я думаю, совершенно понятны. Но это еще не все.

Микроданные

Вам также могут быть интересны следующие статьи:

Добавить комментарий Отменить ответ