Микроданные

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

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

<div>

<img src="pic. jpg" itemscope itemtype="Http://data-vocabulary. org/Person">

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

<span itemprop="name">

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

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

Crazzy

</span>.

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

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

Мой адрес:

<span itemprop=”address” itemscope itemtype=”Http://data-vocabulary. org/Address”>

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

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>

<img src=”joe. gif”” alt=”afisha”>

14 марта 2012 г

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

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

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

</p>

</div>

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

<div itemscope itemtype="Http://data-vocabulary. org/Event/" >

Рис. 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), и если мы хотим пользоваться этим словарем, то должны их задать. Это вполне логично, так что примемся за дело:

<div itemscope itemtype="Http://data-vocabulary. org/Event/" >

<h1 itemprop="summary">

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

<p>

<img itemprop ="photo" src="joe. gif" alt="afisha">

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

<time itemprop="startDate" datetime="2012-03-14T19:00-08: 00">

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

</time>

<span itemprop="location">

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

</span>

<a itemprop="tickets" href="Http://www. gorkogo. spb. ru/" >

Билеты в кассах ДК </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="location" itemscope itemtype="Http://data-vocabulary. org/ Organization">

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

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

</san>

</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 itemprop="geo" itemscope itemtype= "Http://datavocabulary. org/Geo"> <meta itemprop="latitude" content="37.4149" />

<meta itemprop="longitude" content="-122.078" />

</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>

<div itemprop="photo" ><img src="pic1.jpg"></div> <div itemprop="photo" ><img src="pic2.jpg"></div> <div itemprop="photo" ><img src="pic3.png"></div>

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *