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

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

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

<article>
	<h1>Google Developer Day </h1>
	<img width="300" height="200" src="" 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"> 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="">GDD/Prague home page</a></p>
</article>

Заметка: разметка до внедрения микроданных — Разметка после —.

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

<article itemscope itemtype="">

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

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

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

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

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

<img itemprop="photo" width="300" height="200" src="" alt="[Mark Pilgrim at podium]">

Читается как: «фотография события находится по адресу.

Следующий шаг — описание события, которое содержится в теге элемент <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"> November 6, 8:30</time>
	–
	<time itemprop="endDate" datetime="2009-11-06T20:30+01:00">20:30</time>
</p>

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

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

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

<p itemprop="location" itemscope itemtype="">

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

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

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

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

<span itemprop="address" itemscope itemtype="">

Чтобы разметить адрес должным образом, нам нужно выделить каждую нужную часть отдельным элементом <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="">
	<meta itemprop="latitude" content="50.047893" />
	<meta itemprop="longitude" content="14.4491" />
</span>

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

	<p>
		<a itemprop="url" href="">GDD/Prague home page</a>
	</p>
</article>

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

Куда дальше

• следующая — Возвращемся к расширенным фрагментам Google
• предыдущая — Разметка «организации»
• содержание