Спецификация микроданных (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>
Впрочем, здесь следует остановиться, идеи разметки, я думаю, совершенно понятны. Но это еще не все.
Добавить комментарий