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

Содержание

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

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

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

Стандартов синтаксиса, как и словарей, несколько. В этой статье мы и разберем на практических примерах наиболее распространенные:

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. В мире семантики появился синтаксис, который в отличие от всех остальных, разработан для внедрения в тег <script> и использования в сервисных 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-блоке <div>...</div> содержатся данные об объекте. Часто уточняют, нужно ли указывать значение артибута 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 году.

Особенность микроформатов — это применение тегов (обычно <span> или <div>) 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-код в тегах <div> описывает человека;
для описания используются такие свойства, как фотография, имя, должность, адрес страницы, день рождения и заметка; в каждом элементе, содержащем эти данные, добавлен атрибут class и указано конкретное свойство, предусмотренное микроформатом;
свойство «адрес» содержит вложенные свойства: «тип», «город», «страна», «почтовый индекс».

На странице может быть несколько одинаковых микроформатных классов (например, несколько организаций). Из-за использования атрибута class микроформаты сложно использовать совместно с CSS.

Еще в микроформатах есть очень своеобразные особенности описания некоторых вещей. Мы их ~~политкорректно~~ называем «сложные для понимания случаи».
Например, шаблон «value class» (value class pattern), способ, который используется в следующих случаях:

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

Например, в случае указания номера телефона

<span class="tel">
<span class="type">Home</span>:
<span class="value">+44</span> (0) <span class="value">1223 123 123</span>
</span>

В этом случае значение «tel» — это номер «+441223123123». Но этот номер разделен на две части, так как для местного набора в Великобритании нужен номер без кода (к нему добавляется «0» и получается местный номер «01223123123»), а для звонка из любой другой точки мира код нужен и получается номер «+441223123123».

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

Полезные ссылки:
Сайт microformats.org;
Статья о микроформатах Интернет-маркетолога и оптимизатора, активиста сообщества Semantic Web и Semantic Search Marketing Aaron Bradley.

3. RDFa

RDFa (Resourse Description Framework in attributes, фреймворк для описания ресурсов в атрибутах) основан на технологии RDF.

RDFa так же, как и микроданные, основывается на атрибутах (как существующих, так и новых) в тегах HTML для указания названий объектов и их свойств. RDFa часто продвигается различными сообществами из-за того, что у него больше возможностей для описания сложных данных, чем у микроданных. (Для такой формулы , например)

В RDFa также можно использовать всевозможные словари. Словарь Open Graph обычно используется в RDFa, в большинстве случаев с ним используются только три элемента синтаксиса (prefix, property и content). Есть также примеры использования Schema.org в RDFa, но это скорее исключение.

Пример разметки:

<html prefix="og: http://ogp.me/ns#">
 <head>
   <title>Юрий Гагарин</title>
   <meta property="og:title" content="Юрий Гагарин" />
   <meta property="og:type" content="profile" />
   <meta property="og:image" content="http://example.com/gagarin.jpg" />
   ...
 </head>

Первое утверждение, prefix="og: http://ogp.me/ns#", определяет базовый словарь Open Graph Protocol. Этот словарь используется для атрибутов property, чтобы указать на свойства самого документа или содержащихся в этих атрибутах данных. Один документ может содержать несколько таких словарей. Атрибут content в этом примере применяется для определения значения свойства.

Рассмотрим использование синтаксиса RDFa еще на одном примере:

<div vocab="http://schema.org/" typeof="Person">
 <span property="name">Юрий Гагарин</span>,
  <a href="http://ru.wikipedia.org/wiki/Гагарин,_Юрий_Алексеевич" rel="url">Страница на Википедии</a>.
  <span property="title">Космонавт</span>
</div>

Здесь с помощью vocab объявляется словарь, содержащий список сущностей и их свойств. Такое указание словаря можно использовать каждый раз, если есть необходимость описать разные сущности разными словарями. В первой строке typeof=«Person» указывает, что размеченное содержание представляет сущность «человек». Каждое свойство объекта, в данном случае, человека, помечается с помощью property.
Для указания URL можно использовать атрибут rel вместо property. Пример:

<a href="http://ru.wikipedia.org/wiki/Гагарин,_Юрий_Алексеевич" rel="url">Страница на Википедии</a>.

Rel показывает связи между сущностями, в данном случае между сущностью «человек» и сущностью «веб-страница».

Различная роль атрибутов, обогащающих документы семантическими данными:

синтаксические атрибуты: @prefix, @vocab. Определяют словарь и правила, по которым определяется используемое пространство имен;
субъектный атрибут @about позволяет в некоторых случаях упростить указание ресурса;
предикативные — реляционные атрибуты: @property, @rel, @rev. Эти атрибуты определяют свойства сущностей (property и rel задают свойства, а rev позволяет инвертировать отношение);
атрибуты для указание ресурсов (идентификаторов сущностей): @resource, @href, @src;
литеральные атрибуты (тип, машиночитаемое значение, язык): @datatype, @content, @xml:lang или @lang;
макро атрибуты: @typeof, @inlist. Атрибут typeof задает тип сущности, inlist позволяет создавать списки сущностей.

В общем и целом в синтаксисе RDFa можно описать много различных объектов и их отношения между собой. Все особенности описаны в документации, есть также подробный перевод спецификации от 2011 года на русский язык здесь.

RDFa Lite

По словам создателей, RDFa Lite был разработан с минимальным набором функций, с помощью которых 80% вебмастеров смогут добавить простую разметку данных. Для большинства случаев сложные синтаксические конструкции RDFa действительно не нужны и чтобы не вникать в тонкости использования @rel и @rev, можно воспользоваться упрощенным RDFa lite.

RDFa Lite состоит из пяти простых атрибутов обычного RDFa: vocab, typeof, property, resource, и prefix. RDFa Lite полностью совместим с набором RDFa, для перехода к полной версии достаточно просто добавить другие атрибуты.

Пример разметки:

<p vocab="http://schema.org/" typeof="Person">
   Меня зовут
   <span property="name">Вася</span>
   и вы можете позвонить мне по номеру
   <span property="telephone">1-800-555-0199</span>
   или посетить 
   <a property="url" href="http://vasya-example.com/">мою страницу</a>.
</p>

В RDFa Lite также возможно использовать префиксы для использования нескольких словарей одновременно:

<p vocab="http://schema.org/" prefix="ov: http://open.vocab.org/terms/"  typeof="Person">
   Меня зовут
   <span property="name">Вася</span>
   и вы можете позвонить мне по номеру
   <span property="telephone">1-800-555-0199</span>.
   <img property="image" src="http://vasya-example.com/images/vasya.png" />
   <span property="ov:preferredAnimal">Лось</span> - мое любимое животное.
</p>

Такие популярные префиксы, как dc, foaf и schema определяются без указаний. Полный список префиксов по умолчанию есть здесь.

Полезные ссылки
Документация в W3C;
Поддержка RDFA и RDFA-lite в Schema.org;
Статья о RDFa lite от IBM.

4. JSON-LD

JSON-LD (JavaScript Object Notation for Linked Data) — это расширение JSON, разработанное инициативной группой под руководством участника W3C Manu Sporny.Первый черновик спецификации JSON-LD появился в 2010 году.

JSON — это средство для описания набора данных. C помощью JSON-LD можно описывать конкретную сущность реального мира и связывать эти данные с тем, что уже есть в JSON для реализации идеи Linked Data. JSON-LD, в отличие от всех остальных синтаксисов, внедряется не в код страницы, а в тег <script> или используется в сервисных API.

JSON-LD представляет из себя набор пар «ключ-значение», который также легко воспринимается человеком.
Один из основных принципов JSON-LD — это использование так называемого контекста (@context). В этот ключ зашивается машиночитаемая расшифровка словаря, позволяющая строить полные идентификаторы сущностей и определять, что именно подразумевается под теми или иными ключами и какого типа данные используются в значениях.

Обычный пример JSON-LD:

<script type="application/ld+json">{
  "@context": "http://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "Джон Леннон",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
} 
</script>

В этом примере "@context", "@id", "name", "born", "spouse" — ключи, а «Джон Леннон», «1940-10-09» и прочее — значения.

Все типы и свойства могут быть из одного словаря — для его указания используется ключ@vocab:

{
  "@context": {
    "@vocab": "http://schema.org/"
  },
  "@id": "http://example.org/places#Floors",
  "@type": "Ресторан",
  "name": "Этажи"
  ...
}

Помимо ключа @vocab в основную часть JSON-LD входят различные зарезервированные ключи @type, @id, @context и другие. Подробнее о них можно узнать из документации, также недавно была статья о них на Хабре.
Все ключи, ключевые слова и значения в JSON-LD чувствительны к регистру.

В JSON-LD возможно описывать вложенные сущности:

{
...
  "name": "Аркадий Волож",
  "knows":
  {
    "@type": "Person",
    "name": "Григорий Бакунов",
  }
...
}

В этом примере ключи "@type" и "name" являются вложенными свойствами "knows".

Также можно использовать массивы:

{
...
  "@id": "http://example.org/people#joebob",
  "nick": [ "bobuk", "anton", "deliya" ],
...
}

Этот синтаксис используется в проекте Яндекс.Острова, а также в Google Actions.
С 2013 года JSON-LD входит в список рекомендованных форматов от Schema.org

Полезные ссылки:
Объясняющее видео от Manu Sporny;
JSON-LD playground — инструмент для вебмастеров для проверки и визуализации разметки в синтаксисе JSON-LD;
Спецификация от W3C;
Сайт JSON-LD.

Немного о микроданных и RDFa

Как вы могли понять из вступления, создатели этих синтаксисов не сотрудничают друг с другом. Каждая команда считает, что их синтаксис лучше и удобнее другого, и старается его продвигать. И у всех есть свои преимущества — так, с помощью RDFA можно описывать разной степени сложности сущности, а микроданные распознает большинство поисковых систем. В любом случае только вам, вебмастерам, решать, с помощью какого синтаксиса стоит размечать свои сайты. А при желании можно совмещать (как здесь, например) разные синтаксисы и разные словари на одной странице.

P.S.

Наиболее часто встречающаяся ошибка у вебмастеров при использовании различных синтаксисов — это ошибка в DOM дереве. Может быть такое, что разметка продолжается после закрывающего тега и уже не может относиться к нужному объекту. Поэтому мы рекомендуем проверять разметку — наш валидатор предупреждает о таких случаях. C помощью него можно проверить популярные словари и синтаксисы: микроданные, schema.org, микроформаты, OpenGraph, RDFa, JSON-LD и другие.
Также есть валидатор от Google, валидатор от W3C и валидатор HTML5.

Следующая статья будет посвящена различным продуктам, основанным на микроразметке. Если у вас есть желание узнать о чем-то еще из мира семантической разметки, пишите!