Pull to refresh
465.38
Rating
Яндекс
Как мы делаем Яндекс

Сложный и противоречивый мир синтаксиса микроразметки. Почему стандартов так много? Опыт Яндекса

Яндекс corporate blogSemanticsIT Standards
Сегодня в продолжение наших рассказов о семантической разметке я хочу рассказать о её синтаксисе. То, почему он такой, а не иной, часто определяется историческими причинами, а иногда — ещё и комично. Поэтому мы попробовали здесь всё систематизировать и объяснить.

Сначала пару слов, чтобы все понимали, что есть что. Под микроразметкой в целом (или семантической разметкой) мы подразумеваем разметку страницы с дополнительными тегами и атрибутами в тегах, которые указывают поисковым роботам на то, о чем написано на странице.

Словарь — это своеобразный «язык», набор классов и их свойств, с помощью которых указывается суть содержимого на странице. О них мы писали в предыдущей статье. Синтаксис — это способ использования словаря. Он определяет, с помощью каких тегов и как будут указываться сущности и их свойства, например, на веб-страницах.

Стандартов синтаксиса, как и словарей, несколько. В этой статье мы и разберем на практических примерах наиболее распространенные:
  • Microdata — Микроданные (словарь Schema.org чаще всего встречается именно в этом синтаксисе);
  • Microformats.org — Микроформаты (напоминаем, что это объединенный стандарт синтаксиса и словаря);
  • RDFa и RDFa Lite (в упрощенном виде RDFa рекомендуется создателями словаря Open Graph. Также встречается с другими словарями, например, со словарем Dublin Core или Data Vocabulary);
  • JSON-LD — расширение JSON.

Чтобы понять, почему для решения одной задачи было разработано много разных стандартов, обратимся к истории развития синтаксиса:

Once upon a time В 2004 году разработчики из W3C создали стандарт, который, по их мнению, подходил для «представления всего в мире». Так появился синтаксис RDFa (Resourse Description Framework in attributes), который позволяет однозначно транслировать HTML-разметку с семантическими данными в RDF.


Примерно через год несколько энтузиастов решили придумать свой «простой» стандарт, в котором использовались бы уже существующие элементы HTML. И придумали всем известные Микроформаты.


(Далее по тексту вместо этой картинки будет стоять звездочка — она слишком часто отражает суть происходящего)

Чуть позже Ян «Хикси» Хиксон, сотрудник Google и на тот момент участник W3C, решил написать альтернативную версию HTML5 и создать свой синтаксис. Появились Микроданные — простой, но не совместимый с RDF стандарт. W3C сообщество отреагировало неоднозначно на эту инициативу, и в итоге Хикси ушел из W3C и к тому же основал свое альтернативное сообщество WHATWG. *

Microdata стал первым синтаксисом, в котором рекомендовали использовать словарь Schema.org. Когда в W3C возник вопрос о том, почему Микроданные, а не RDFa, один из основателей Schema.org Ramanathan V. Guha или просто Guha (тоже сотрудник Google и даже Google Fellow) ответил письмом примерно следующего содержания: «Ваш RDFa настолько сложен, что в 90% случаях его использования допускаются ошибки». В ответ на письмо разработчики RDFa довольно быстро выпустили RDFa lite — синтаксис не сложнее Микроданных, но совместимый с RDF и расширяемый до RDFa.*

А позже Manu Sporny, один из создателей RDFa, столкнулся с необходимостью в передаче структурированной информации из JSON в RDF, когда работал над своим проектом, где было много данных в JSON. Он и его коллеги осознали, что нужно придумать что-то вроде RDFa для JSON.*

И в результате долгой и упорной работы был выпущен синтаксис JSON-LD (JavaScript Object Notation for Linked Data), который не только решил первоначальную задачу, но и реализовал идею по распространению Linked Data. В мире семантики появился синтаксис, который в отличие от всех остальных, разработан для внедрения в тег
 и использования в сервисных API. 
Занавес

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

1. Microdata (Микроданные)


Ключевые элементы микроданных — это атрибуты itemscope, itemtype и itemprop, указывающие на сущности и их свойства.
Пример, размеченный в синтаксисе микроданных с использованием словаря Schema.org:

<div itemscope itemtype="http://schema.org/Person"> <span itemprop="name">Юрий Гагарин</span> <img src="gagarin.jpg" itemprop="image"/> <span itemprop="jobTitle">Летчик-космонавт</span> <span itemprop="colleague">Валентина Терешкова</span> <link itemprop="nationality" href="http://ru.wikipedia.org/wiki/Россия">Россия <time itemprop="birthDate" datetime="1934-03-09">9 марта 1934</time> <span itemprop="memberOf">Военно-воздушные силы СССР</span> <span itemprop="knows">Сергей Королев</span> <time itemprop="deathDate" datetime="1968-03-27">27 марта 1968</time> <span itemprop="award">Герой Советского союза</span> <a href="http://ru.wikipedia.org/wiki/Гагарин,_Юрий_Алексеевич" itemprop="sameAs">Страница на Википедии</a> <a href="http://example.com/Гагарин" itemprop="url">Сайт Юрия Гагарина</a> </div>

  • itemscope указывает парсеру на то, что в HTML-блоке ... содержатся данные об объекте. Часто уточняют, нужно ли указывать значение артибута itemscope — в соответствии со спецификацией HTML5 значение для логических атрибутов задавать не обязательно, достаточно просто указать название атрибута;
  • itemtype с помощью ссылки schema.org/Person указывает на конкретный тип объекта;
  • itemprop указывает на свойства этого объекта.

В этом примере с помощью link itemprop объект описывается с помощью невидимых ссылок.

На странице можно размечать несколько сущностей с одинаковым типом (itemtype), и внутри одной сущности может быть несколько одинаковых полей (itemprop). Если вы делаете разметку для конкретного потребителя (например, для конкретной партнерской программы Яндекса), то могут встретиться дополнительные условия. Так в партнерской программе для творческих работ мы не строим спецсниппеты для страниц, на которых больше одного подходящего нам типа верхнего уровня.

Есть еще одна особенность микроданных, с которой мы столкнулись в работе — это часто и внезапно меняющаяся спецификация. По истории этой документации можно отследить, что раньше она обновлялась как минимум ежегодно, а то и по несколько раз в год.

Обычно все инициативные группы выступают за разметку видимого пользователям содержания. Но в некоторых случаях нужно описать данные так, чтобы на сайте отображался человекочитаемый текст, а парсер получал данные в машиночитаемом формате. В таком случае скрыть данные необходимо, и для этого можно использовать тег meta:

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Чехол для Iphone</span>
  <span itemprop="price">700 рублей</span>
   <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    <img src="four-stars.jpg" />
    <meta itemprop="ratingValue" content="4" />
    <meta itemprop="bestRating" content="5" />
   Основан на <span itemprop="ratingCount">25</span> голосах пользователей
  </div>
</div>

В синтаксисе микроданных возможно описывать вложенные сущности

<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">Юрий Гагарин</span>, 
  <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="addressLocality">Байконур</span>, 
    <span itemprop="addressCountry">Казахстан</span>, 
  </span>
</div>

В этом примере свойство "address" также являются сущностью и обладает своими свойствами "addressLocality" и "addressCountry".

Microdata все больше набирает популярность из-за доступности внедрения, предусмотренных возможностей и отчасти благодаря стандарту Schema.org. Также рекомендуется вместе со словарем Schema.org поисковыми системами, например, Яндексом и Google.

Полезные ссылки:
Описание микроданных в W3C;
Статья о Microdata в блоге об HTML5;
Документация в WHATWG.

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


Как мы писали, микроформаты — это инициатива энтузиастов из W3C, которые хотели сделать простой стандарт семантической разметки и для этого использовали базовые элементы HTML. Стандарт Microformats.org — один из старейших, был запущен в 2005 году.

Особенность микроформатов — это применение тегов (обычно или ) c атрибутами class, rel, rev или title для передачи семантической информации. Для обозначения сущностей и их свойств используются только уже существующие атрибуты и не вводятся новые.

Например, добавив class="adr"
мы указали, что в этой строчке описан адрес:

<div class="adr"> Москва, ул. Льва Толстого, 16 </div>

В этом примере HTML-элементу был добавлен атрибут class, значение которого представляет собой имя свойства, предусмотренного микроформатом.

Пример небольшого HTML-блока, размеченного микроформатом hCard (с помощью этого микроформаты описывается человек или организация, в нашем случае — человек).

<div class="vcard">
 <img class="photo" src="http://example.com/gagarin.jpg" />
 <strong class="fn">Юрий Гагарин</strong>
 <span class="title">Летчик-космонавт</span> 
 <span class="org">Военно-воздушные силы СССР</span>
 <a class="url" href=http://example.com/Гагарин>Страница Ю.Гагарина</a>
 <div class="bday"> 
   <span class="value-title" title="1934-03-09">9 марта 1934</span>
 </div>
 <span class="note">Первый человек в космосе</span>
 <span class="adr">
   <span class="type">work</span>
   <span class="locality">Байконур</span>
   <span class="country-name">Казахстан</span>
   <span class="postal-code">468320</span>
 </span>
</div>

  • в первой строке class="vcard" указывает, что HTML-код в тегах описывает человека;
    для описания используются такие свойства, как фотография, имя, должность, адрес страницы, день рождения и заметка; в каждом элементе, содержащем эти данные, добавлен атрибут class и указано конкретное свойство, предусмотренное микроформатом;
    свойство "адрес" содержит вложенные свойства: "тип", "город", "страна", "почтовый индекс".
Tags:микроразметкаsemantic webмикроформатыmicrodatajson-ldopen graphrdfa
Hubs: Яндекс corporate blog Semantics IT Standards
Total votes 93: ↑87 and ↓6 +81
Views50.4K

Comments 34

Only those users with full accounts are able to leave comments. Log in, please.

Popular right now

Top of the last 24 hours

Information

Founded
Location
Россия
Website
www.yandex.ru
Employees
over 10,000 employees
Registered

Habr blog