company_banner

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

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

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

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

    Стандартов синтаксиса, как и словарей, несколько. В этой статье мы и разберем на практических примерах наиболее распространенные:
    • 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 и указано конкретное свойство, предусмотренное микроформатом;
      свойство "адрес" содержит вложенные свойства: "тип", "город", "страна", "почтовый индекс".
    Метки:
    Яндекс 605,56
    Как мы делаем Яндекс
    Поделиться публикацией
    Комментарии 34
    • +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, указанные в тэге . Это ошибка или намеренное нововведение? Если намеренное, то какие у него причины?
                                • 0
                                  Так вам и ответят.
                                  • 0

                                    В комментарии был указан тэг body, но куда-то исчез. Сейчас валидатор работает нормально.

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

                                Самое читаемое