Компания
870,79
рейтинг
6 мая 2014 в 14:08

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

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

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

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

Стандартов синтаксиса, как и словарей, несколько. В этой статье мы и разберем на практических примерах наиболее распространенные:
  • 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 и указано конкретное свойство, предусмотренное микроформатом;
    свойство "адрес" содержит вложенные свойства: "тип", "город", "страна", "почтовый индекс".
Автор: @deliya
Яндекс
рейтинг 870,79

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

  • +2
    Что только не придумают, лишь бы не искусственный интеллект…
  • +7
    Простите. Но хоббит не должен был быть выше гнома. :)
    • +9
      По какому стандарту? :-)
      • +2
        По википедии так и выходит)
        Хоббиты… около 3-х футов (порядка 90 сантиметров)
        … гномы коренасты и широкоплечи (рост — 4,5—5 футов, то есть 1,4—1,5 м)
      • +1
        :) Ну тогда переформулирую:
        Хоббит не должен быть выше гнома независимо от применяемых стандартов назначения стилей форматирования!
    • +8
      Там и Бильбо вместо Фродо, и ЛеголаЗ :)
      • +12
        Что делает картинку только ближе к положению дел в стандартах семантической разметки
  • +14
    И такой бардак во всём фронтенде…
  • 0
    Подскажите, как решить проблему с itemscope в XHTML? Вариант itemscope=«itemscope», как я понял, для поискового робота не катит?
    • +2
      Парсер Яндекса вариант с itemscope=«itemscope» поймет и обработает
      • 0
        грешил на это, но просто не могу понять вот этой ошибки:

        image

        Хотелось бы более информативного сообщения. Специально прошелся по всем имеющимся itemprop в HTML-коде страницы, но ничего кроме перечисленного не нашел. Может это результат конфликта включения Person в BlogPosting?
        • 0
          А покажите html
          • 0
            Ну, в картинке есть URL-адрес, предпоследний параметр (url), а выкладывать HTML-код всей веб-страницы, это как-то… даже не знаю.
            • 0
              Достаточно ссылки на pastebin :-)
            • 0
              Я думаю это из-за itemprop='blogPost', потому что непонятно, чьего объекта это пропертя
              • 0
                Да, ошибка исчезла, спасибо. Но с другой стороны этот атрибут описан в schema.org, вот: schema.org/blogPost — или я чего-то неправильно понял или подразумевается его использование во внутреннем контейнере с itemtype?
                • +1
                  Эта пропертя должна использоваться в объекте типа schema.org/Blog
                  Надо объявить его выше в дереве, тогда всё будет ок
                  • 0
                    Спасибо, действительно всё так и есть… надо было лишь понять логику такой особенности разметки.
  • 0
    Не проходит проверку:

    <div class="event" itemscope itemtype="http://schema.org/Event">
            <meta itemprop="startDate" content="2014-05-06T00:00:00+04:00"/>
            <meta itemprop="endDate" content="2014-06-03T00:00:00+04:00"/>
            <meta itemprop="interactionCount" content="UserComments:0"/>
            <meta itemprop="interactionCount" content="UserLikes:0"/>
            <meta itemprop="interactionCount" content="UserPageVisits:12"/>
    </div>
    



    хотя в schema.org/UserInteraction есть

    • +1
      Тут дело в том, есть ли это свойство в Event… вы же его задали в scope
      Upd: я его и в UserInteraction не вижу…
      • 0
        Вот такой пример работает:
        <div itemscope itemtype="http://schema.org/Article">
          <span itemprop="name">How to Tie a Reef Knot</span>
          by <span itemprop="author">John Doe</span>
          This article has been tweeted 1203 times and contains 78 user comments.
          <meta itemprop="interactionCount" content="UserTweets:1203"/>
          <meta itemprop="interactionCount" content="UserComments:78"/>
        </div> 
        


        Потому что в схеме Article есть такое свойство
  • 0
    Использую meta og:image, т. к. это необходимо для указания нормальной картинки фейсбуку при лайке. Ну и ещё какие-то og-теги для дефолтного текста в твиттер и т. п. Теперь буду знать, что я использую стандарт RDFa :-).

    Благодаря статье заметил, что у меня в проекте не указан префикс <html prefix="og: ogp.me/ns#">. Интересно, кто-то этот префикс проверяет вообще? Все соцсети и так парсят всё нормально. Есть подозрение, что если использовать не og:, они перестанут работать.

    Я правильно понимаю, что только RDFa позволяет «разметить» всю страницу сразу через теги в <head>? А остальные стандарты размечают только конкретный кусок HTML?
    • 0
      Там емнип была интересная история с этим rdfa (могу врать): опенграф появился сначала, а потом создатели rdfa сделали rdfa таким, чтобы опенграф в него попадал. А префикс вроде как по дефолту включен.
    • +2
      На самом деле в <head> можно размещать не только атрибуты RDFa. Например, вы можете передать все данные об объектах, которые есть на странице в <head> с помощью JSON-LD
      Как-то так
      <!DOCTYPE html>
      <html>
       <head>
         <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>
       <head>
      

  • +2
    Какой итог? Какой стандарт использовать на перспективу?
    • +2
      Я для себя сделал вывод — использовать Microdata и Opengraph RDFa. Собственно к этому я и склонялся ранее, но данный пост всё расставил по полочкам. За ссылку на Lenta.ru — автору большое спасибо, отличный пример где можно подсмотреть что и как выглядит вживую.
  • 0
    Достаточно долго выбирал для себя стандарт микроразметки — и благодаря именно этой статье остановился на microdata.
    Сейчас думаю — стоит ли убрать на своих проектах на Друпале модуль RDFa или таки пока оставить…
    • 0
      RDFa вроде перспективнее и шире, лучше оставить его и использовать со словарём Schema.org.
      Да и в примерах на самой Schema.org он смотрится аккуратнее…
  • +1
    Ну незнаю — если смотреть код страницы — то мне как-раз микродата кажется более структурированной, понятной и аккуратной… Хотя дело вкуса, тут важнее кто и насколько полно поддерживает эти стандарты (ПС). ИМХО — все-же микродата+схема.орг выглядят интереснее…
  • 0
    Отличная вводная статья. Пасиба друг Яндекс.
  • 0
    С недавнего времени валидатор Яндекса стал игнорировать атрибуты itemscope и itemtype, указанные в тэге . Это ошибка или намеренное нововведение? Если намеренное, то какие у него причины?

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

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