Сначала пару слов, чтобы все понимали, что есть что. Под микроразметкой в целом (или семантической разметкой) мы подразумеваем разметку страницы с дополнительными тегами и атрибутами в тегах, которые указывают поисковым роботам на то, о чем написано на странице.
Словарь — это своеобразный «язык», набор классов и их свойств, с помощью которых указывается суть содержимого на странице. О них мы писали в предыдущей статье. Синтаксис — это способ использования словаря. Он определяет, с помощью каких тегов и как будут указываться сущности и их свойства, например, на веб-страницах.
Стандартов синтаксиса, как и словарей, несколько. В этой статье мы и разберем на практических примерах наиболее распространенные:
- 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:
{ "@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" }
В этом примере "@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.
Следующая статья будет посвящена различным продуктам, основанным на микроразметке. Если у вас есть желание узнать о чем-то еще из мира семантической разметки, пишите!
ссылка на оригинал статьи http://habrahabr.ru/company/yandex/blog/221881/
Добавить комментарий