Разметка «мероприятия»

Автор: Евгений Рыжков и Татьяна Головко Дата публикации: 19.04.2011

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

Возьмем в качестве образца график моих выступлений:

<article>
	<h1>Google Developer Day 2009</h1>
	<img width="300" height="200" src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg" alt="[Mark Pilgrim at podium]">
	<p>Google Developer Days are a chance to learn about Google developer products from the engineers who built them. This one-day conference includes seminars and "office hours" on web technologies like Google Maps, OpenSocial, Android, AJAX APIs, Chrome, and Google Web Toolkit.</p>
	<p>
		<time datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
		–
		<time datetime="2009-11-06T20:30+01:00">20:30</time>
	</p>
	<p>
		Congress Center<br>
		5th května 65<br>
		140 21 Praha 4<br>
		Czech Republic
	</p>
	<p><a href="http://code.google.com/intl/cs/events/developerday/2009/home.html">GDD/Prague home page</a></p>
</article>

Заметка: разметка до внедрения микроданных — http://diveintohtml5.org/examples/event.html. Разметка после — http://diveintohtml5.org/examples/event-plus-microdata.html.

Вся информация о мероприятии содержится в <article>, так что этому элементу добавляем атрибуты itemtype и itemscope:

<article itemscope itemtype="http://data-vocabulary.org/Event">

http://data-vocabulary.org/Event — это ссылка на словарь Event, который содержит описание свойств. И что же это за свойства? Они перечислены в таблице ниже:

Свойство Описание
summary Название мероприятия
url Ссылка на страницу с детальным описанием мероприятия
location Место или места, где будет происходить мероприятие. Может быть представлено как организация или адрес.
description Описание мероприятия.
startDate Дата начала мероприятия в формате ISO (http://www.iso.org/iso/date_and_time_format)
endDate Дата окончания мероприятия в формате ISO
duration Продолжительность мероприятия в формате ISO (http://en.wikipedia.org/wiki/ISO_8601#Durations)
eventType Категория мероприятия. Например, концерт или доклад. Это строка произвольной формы.
geo Георафически координаты места прохождения мероприятия. Всегда два подсвойства: latitude и longitude.
photo Ссылка на изображение, имеющее отношение к мероприятию.

Название мероприятия — это тег <h1>. Следовательно, значение свойств микроданных содержится в тексте элемента. Поэтому просто добавляем атрибут itemprop чтобы обозначить, что данный элемент содержит название мероприятия:

<h1 itemprop="summary">Google Developer Day 2009</h1>

Читается как: «Это мероприятие называется 'Google Developer Day 2009'«.

Это мероприятие снабжено фотографией, которую в разметке помечаем свойством photo. Фото как обычно — это элемент <img>. Значение свойства микроданных содержится в атрибуте src. Нам достаточно добавить атрибут тегу <img>:

<img itemprop="photo" width="300" height="200" src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg" alt="[Mark Pilgrim at podium]">

Читается как: «фотография события находится по адресу http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg».

Следующий шаг — описание события, которое содержится в теге элемент <p> в свободной текстовой форме:

<p itemprop="description">Google Developer Days are a chance to learn about Google developer products from the engineers who built them. This one-day conference includes seminars and "office hours" on web technologies like Google Maps, OpenSocial, Android, AJAX APIs, Chrome, and Google Web Toolkit.</p>

Следующая часть для нас будет новой. В HTML5 для разметки дат используется HTML элемент <time>. Как же добавить свойства микроданных этому тегу? Элемент <time> обрабатывается особым образом. Значение свойства микроданных содержаться в атрибуте datetime. Этот атрибут содержит данные в формате ISO — то что нам и нужно. Поэтому достаточно добавить только свойства startDate и endDate элементам <time>. Чтобы с добавлением семантики не было проблем, следует придерживаться простых правил:

  1. используй корректную HTML разметку (для дат, должен использоваться тег <time>);
  2. добавляй только один атрибут itemprop:
<p>
	<time itemprop="startDate" datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
	–
	<time itemprop="endDate" datetime="2009-11-06T20:30+01:00">20:30</time>
</p>

Читается это так: «Мероприятие начинается 6-го ноября 2009 в 8.30 утра и будет продолжаться до 6-го ноября 2009 20.30 (согласно пражскому времени — GMT+1)».

Следующий шаг — это свойство location. Согласно словарю Event это может быть организация или адрес. В нашем примере мероприятие производится в специальном месте для конференций в Congress Center в Праге. Разметка для организаций позволит включить и название места, и его адрес.

Во-первых, нам следует объявить, что <p> содержит адрес мероприятия (свойство location), а так же, что этот элемент использует собственный словарь микроданных (http://data-vocabulary.org/Organization):

<p itemprop="location" itemscope itemtype="http://data-vocabulary.org/Organization">

Далее размечаем название организации, для этого оборачиваем в <span> название, чтобы иметь возможность добавить атрибут itemprop:

<span itemprop="name">Congress Center</span>

"name" — это свойство словаря Organization, а не Event. Тегу <p> мы добавили атрибут scope, чтобы объявить, что на все дочерние элементы распространяется словарь Organization. В нашем случае Organization — это вложенный словарь.

А сейчас нам потребуется сделать еще более глубокий уровень вложения словарей — использовать Address внутри Organization, который находится внутри Event:

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

Чтобы разметить адрес должным образом, нам нужно выделить каждую нужную часть отдельным элементом <span> чтобы иметь возможность добавить свойства микроданных:

<span itemprop="street-address">5th května 65</span><br>
<span itemprop="postal-code">140 21</span>
<span itemprop="locality">Praha 4</span><br>
<span itemprop="country-name">Czech Republic</span>

Это все данные по адресу. Поэтому мы закрываем область действия словаря Address:

</span>

И также это были все данные касательно организации, поэтому закрываем область действия словаря Organization:

</p>

Теперь мы вернулись к области действия словаря Event. Следующее свойство — geo, которое определит физическое место проведение мероприятия. Для этого будем использовать словарь Geo. Нам понадобится элемент <span> чтобы задать атрибуты temtype и itemscope. В рамках этого элемента нам понадобится два метатега для указания широты и долготы:

<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
	<meta itemprop="latitude" content="50.047893" />
	<meta itemprop="longitude" content="14.4491" />
</span>

Т.к. мы закрыли <span> содержащий свойства Geo, мы вернулись к свойствам Event. Осталось последнее свойство — url, которое нам уже знакомо: тут все аналогично тому, как мы делали для человека и организации. Если используется корректная HTML разметка, добавить свойства микроданных не составляет труда — просто добавляем ссылке атрибут itemprop:

	<p>
		<a itemprop="url" href="http://code.google.com/intl/cs/events/developerday/2009/home.html">GDD/Prague home page</a>
	</p>
</article>

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

Куда дальше