Немного о Microdata

Доброго времени суток! В этой статье я бы хотел рассказать о микроданных и о словаре schema.org. Об этой замечательной технологии уже рассказывали ^[1] на хабре два ^[2] раза, но в них не было освещено несколько важных моментов.

Microdata

В HTML5 кроме всего прочего имеется стандарт призванный привнести немного семантики в Интернет. Конечно уже существуют такие стандарты как RDF и microformats но microdata был разработан с учётом их ошибок и даёт немало плюшек web-мастерам. Так, RDF подразумевает дублирование существующих данных, что, с учётом объёмов данных, может быть накладно. Микроформаты, в свою очередь позволяют разметить уже существующие документы, но отбирают такие полезные атрибуты как class.

Синтаксис

Для того чтобы сделать html элемент узлом микроданных, достаточно добавить ему атрибут itemscope. Неплохо было бы дать ему имя — для этого используется атрибут itemtype="name_of_class", а для точной характеристики используются вложенные элементы с атрибутом itemprop="name_of_property". Но в некоторых случаях пары ключ -> значение не хватает, и тогда в силу вступают вложенные узлы. Для их обозначения после атрибута itemprop нужно добавить атрибуты itemscope и itemtype.

Вот пример разметки (эта статья):

<article itemscope itemtype="http://schema.org/Article">
	<h1 itemprop="name">Немного о Microdata</h1>
	<meta itemprop="inLanguage" content="ru" /> 
	<section itemprop="articleBody">
		Скажи рекурсии «нет»!
	</section>
	<section itemprop="author itemscope itmetype="http://schema.org/Person">
		<span itemprop="additionalName">VlAleVas</span>
	</section>
</article>

У некоторых свойств есть несколько возможных свойств, и использование, к примеру, русского языка может обернуться проблемой. Но, такие свойства можно обозначить тегом link:

<div itemscope itemtype="http://schema.org/Offer">
	<span itemprop="name">яМобилко</span>
	<span itemprop="price">$100500</span>
	<link itemprop="availability" href="http://schema.org/InStock"/>Есть на складе!
</div>

В некоторых случаях контент виден пользователям, но не доступен поисковикам, к примеру — картинка. Тогда в ход идёт тег meta:

<div itemscope itemtype="http://schema.org/Offer">
	<span itemprop="name">яМобилко 4GSTW</span>
	<span itemprop="price">$100500</span>
	<link itemprop="availability" href="http://schema.org/InStock"/>Есть на складе!
	<div itemprop="reviews" itemscope itemtype="http://schema.org/AggregateRating">
		<img src="five-stars.jpg" />
		<meta itemprop="ratingValue" content="5" />
		<meta itemprop="bestRating" content="5" />
		Проголосовало <span itemprop="ratingCount">9000</span> <s>хомячков</s> покупателей.
	</div>

</div>

Словари

В примерах вы заметили, что я использую в качестве имён классов URI. Это поволяет их стандартизировать, ведь неплохо если о ваших классах знает кто-то ещё. На данный момент мне известно три словаря — microformats.org ^[3], data-vocabulary.org ^[4] и shema.org ^[5]. Предпочтительнее последний, так как его поддерживают крупнейшие поисковики (Google, Yahoo! Yandex и Bing) и он собирает в себе многие другие стандарты, например c тот же data-vocabulary.org. Каждый класс может иметь наследника и все свойства родителя передаются наследнику. Список всех классов можно найти тут ^[6].

Microdata DOM API

Это API упрощает работу с узлами микроданных, на данный момент имеет метод document.getItems(). При вызове без параметра вернёт все элементы которые являются невложенными узлами микроданных. domElement.properties вернёт объект типа HTMLPropertiesCollection а domElement.itemValue позволит получить или изменить значение элемента имеющего атрибут itemprop. Но, к сожалению, Microdata DOM API поддерживается только в Opera.

Нужно ли это?

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

Спасибо, и надеюсь что эта статья была вам полезна!

Использованные материалы:

• schema.org ^[5]
• Wikipedia ^[7]
• Microdata DOM API ^[8]

Автор: VlAleVas