Микроформаты, Schema.org и W3C

Неделю назад, мой друг и коллега Джелу спросил меня, как я отношусь к разметке Schema.org и правильно ли в целях продвижения использовать разметку для картинок которую предлагает яндекс в разделе справки — «Schema.org для Яндекс. Картинок».

Я до этого не обращала внимания что там нового у яндекса, а оказалось новый формат разметки они уже с ноября прошлого (2011) года поддерживают. А ввели его Google, Microsoft и Yahoo аж в июне. Что ж, обычные микроформаты сказала я, глянув один раз на пример. Глянув на пример второй раз я заметила что микроформаты как раз необычные. И более того, используют кажущуюся невалидной с точки зрения html разметку. Об этом я и хочу сегодня рассказать, надеюсь статья будет интересной.

Микроформаты от Microformats.org

Я думаю что вам всем знакомы такие микроформаты типа hcard, hProduct и т.п. большая часть которых написана Тантеком Селиком (Tantek Çelik)  (известным веб-идеологом, редактором спецификации CSS и других). Они позволяют добавить семантическую аннотацию к тем элементам разметки которые вы используете посредством имён классов. Например так:

<div class="vcard">
 <div>
   <span class="category">Кафе</span>
   <span class="fn org">Ромашка</span>
 </div>
 <div class="adr">
   <span class="locality">г. Солнечный</span>,
   <span class="street-address">просп. Романтиков, д. 21</span>
 </div>
 <div>Телефон: <span class="tel">+7 (890) 123-45-67</span></div>
 <div>Мы работаем <span class="workhours">ежедневно с 11:00 до 24:00</span>
   <span class="url">
     <span class="value-title" title="http://www.romashka-cafe.some"> </span>
   </span>
 </div>
</div>

Данная разметка как видно полностью валидна с точки зрения html, и так же доступна для стилизации через css. Подробнее о микроформатах можно почитать в хелпе яндекса.

Микроформаты от Schema.org

Данный вид микроформатов заметно отличается, как видно из примера:

<span itemscope itemtype="schema.org/ImageObject">
  <h2 itemprop="name">Винни-Пух</h2>
  <img src="vinni.jpg" itemprop="contentURL" />
  <span itemprop="description">Винни-Пух залезает на дерево.</span>
</span>

Он не использует классы, для элементов разметки, а вместо них использует новые, пока ещё не валидные атрибуты. Говоря слово "пока", я должна перейти к ответу на самый главный вопрос в статье.

Валидна ли вёрстка от Schema.org?

И отвечая на этот непростой вопрос, я хочу сказать, "Да, вёрстка валидна". Теперь постараюсь ответить почему.

Дело в том что эта схема, вовсе не выдумка поисковых систем. Данный метод для семантической аннотации структурированных данных в HTML, впервые предложил никто иной как Хикси (Ян Хиксон, действующий редактор стандарта разметки html5). И предложил он это ещё три года назад в рассылке группы whatwg. Очень рекомендую к прочтению:

[whatwg] Annotating structured data that HTML has no semantics for
Ian Hickson, Май 2009

В данный момент, он же, под пишет полноценную спецификацию W3C касательно микроформатов - www.w3.org/TR/microdata/

Данная спецификация представляет собой модуль, расширяющий спецификацию HTML, (примерно как сейчас выходят новые модули к CSS), одним из нововведений которого, являются 5 новых глобальных атрибутов:

• itemid
• itemprop
• itemref
• itemscope
• itemtype

Напомню, что это атрибуты которые могут применяться к любому тегу. В текущей спецификации html всего 14 глобальных атрибутов.

Что касается поддержки в браузерах, то в ней пока нет смысла, в них ничего не развалится. Для xml разметки логический атрибут itemscope, должен записываться как обычно, в виде itemscope="itemscope".

Интереснее с поисковыми системами. Пока что именно для них микроформаты и предназначены. Здесь хочется поздравить соотечественников, в рабочую группу Schema.org, с ноября месяца, наряду с Гугл, Микрософт (bing) и Яху, входит и Яндекс. Соответственно данные микроформаты в полной мере распознаются данными поисковиками и учитываются в поиске.

Данные глобальные атрибуты уже добавлены в ряд неофициальных валидаторов разметки, но пока не попали в официальный validator.w3.org. Однако повторюсь, уже сейчас я признаю эту разметку полностью валидной.

Узнать какие схемы использует в поиске яндекс можно в соответствующем разделе хелпа. Замечу, что хотя это не сказано открыто, вместо <div> или <span> вы можете использовать любые (блочные и строчные) элементы. Проверить вашу разметку микроформатов можно тут: http://webmaster.yandex.ru/microtest.xml.

Что же ещё готовит спецификация?

Для браузеров, спецификация готовит ряд функций для работы с DOM: http://www.w3.org/TR/microdata/#microdata-dom-api примерно реализующие предпосылки 2009 года (см. ссылку ранее). Возможности стилизации используя CSS пока не предполагается, автор делает упор на разграничения классов используемых для CSS и семантики.

Спецификации от Schema.org и Microformats.org - не взаимоисключающие, вы можете использовать их на одной странице, например микроформаты hcard и ImageObject.

Дополнительные ссылки:

• Semantic Web Interest Group - Web Schemas Task Force
• Microformats vs. Schemas ~ A Blog Not Limited
• 3.2.3 Global attributes — HTML5
• Re: [whatwg] Annotating structured data that HTML has no semantics for. by Eduard Pascual
• Много нового про семантическую разметку от Яндекса / Микроформаты (microformats) / Хабрахабр (заметьте, ни слова о валидности!)
• - rNews 1.0: Schema.org-compatible Implementation Guide HTML 5 Microdata