0,0
рейтинг
2 апреля 2012 в 08:34

Разработка → Немного о Microdata из песочницы

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



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, data-vocabulary.org и shema.org. Предпочтительнее последний, так как его поддерживают крупнейшие поисковики (Google, Yahoo! Yandex и Bing) и он собирает в себе многие другие стандарты, например c тот же data-vocabulary.org. Каждый класс может иметь наследника и все свойства родителя передаются наследнику. Список всех классов можно найти тут.

Microdata DOM API



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

Нужно ли это?



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

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

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

Александр Васильев @VlAleVas
карма
9,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (15)

  • +2
    Микроформаты, в свою очередь позволяют разметить уже существующие документы, но отбирают такие полезные атрибуты как class.
    Куда они отбирают? Они только резервируют некоторые имена классов.
  • 0
    Но, к сожалению, Microdata DOM API поддерживается только в Opera.

    github.com/termi/Microdata-JS (Implementation of the HTML5 Microdata specification with IE6+ support)
    Имплементация Microdata DOM API в Opera уже устарела — теперь itemtype возвращает DOMSettableTokenList. В своей библиотеки я это исправляю.
    На данный момент есть зависимость от github.com/termi/ES5-DOM-SHIM, но её можно убрать подключив любую другую реализацию DOMSettableTokenList.
    • 0
      Спасибо, добавил в топик!
  • +3
    После прочтения всё стало ещё непонятнее, чем до.
  • 0
    А кроме гемора при разработке, что это дает? Какие преимущества явные и очевидные, которые можно использовать не в «светлом будущем» (хотя и это тоже), но и прямо сейчас?
    • –1
      Повышение позиции в результатах поиска по-моему тоже неплохо. Я думаю, на высших позициях будет, к примеру, размеченный рецепт.
      • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Если говорить про DOM API, то уже сейчас это даёт возможность создавать модели данных, описывать их в словаре, и использовать в JS, не заморачиваясь на вёрстку. Верстальщик, при этом, может творить всё, что ему хочется (в рамках разумного, конечно же).
      Например, можно реализовать фреймворк типа DOJO, но при этом без генерации html-кода из самого фреймворка. За счет этого можно добиться невероятной гибкости. И, таки да, на классах и селекторах сейчас это сделать можно, но очень сложно.
      • 0
        Ну тут я бы наверно разделил на 2 состовляющие:
        1) синтаксис
        2) семантика.

        По первому, безусловно с вами соглашусь.
        А второй пункт на текущий момент времени, лично мне, на текущий момент времени не совсем понятен.
        Тут можно согласиться, если действительно взять во внимание тот факт, что поисковики лучше ранжируют / забирают себе данные (аналог автоматической грабилки Я.Маркет). Но я вот не уверен, что это вопрос настоящего.
        • 0
          составляющие*
          • +1
            По поводу ранжирования поисковиками хорошо ответили в комментарии habrahabr.ru/post/133961/#comment_4448384.
            А семантика всего документа только выигрывает от использования Microformat's и Microdata
            • 0
              Спасибо за ссылку.

              А сейчас есть средства автоматизированного добавления метаданных? Или все пока что вручную, не владеете информацией?

              • 0
                Для многих популярных CMS есть средства добавления микроформатов. Добавляют ли они Microdata не знаю, но наверняка.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.