Введение в schema.org

Любой вебмастер хорошо знаком с HTML-разметкой. Обычно HTML-теги указывают браузеру, как отображать информацию, заключенную в тег. Например, тег <h1>Аватар</h1> означает, что строку «Аватар» следует отображать в формате заголовка первого уровня. Однако HTML-тег не предоставляет никакой информации о смысловом значении этой строки: «Аватар» может относиться к чрезвычайно успешному 3D-фильму или к картинке в пользовательском профиле. Это усложняет поисковым системам задачу нахождения информации, адекватной запросу пользователя.

Schema.org предоставляет общедоступный словарь, с помощью которого вебмастера могут размечать страницы, так чтобы они были понятны самым распространенным поисковым системам: Яндексу, Google, Microsoft и Yahoo!.

Словарь schema.org применяется вместе с микроданными (формат microdata). Хотя долгосрочная цель заключается в расширении перечня поддерживаемых форматов семантической разметки, изначально используются именно микроданные. Данное руководство познакомит вас с микроданными и schema.org, и вы сразу же сможете добавлять разметку на страницы своих сайтов.

Как размечать контент с помощью микроданных

Для чего нужны микроданные

Содержание страниц вашего сайта понятно читающим их людям, однако поисковым системам сложно определить, о чем идет речь. Добавляя специальные теги к HTML-коду своих страниц, вы как бы говорите: «Эй, поисковая система, вот здесь описывается такой-то фильм (место, человек, видеоролик)». Тем самым вы помогаете поисковым системам и другим приложениям лучше понимать ваш контент и отображать его подходящим, полезным образом. Микроданные — набор тегов, появившийся в HTML5,— позволяют делать именно так.

itemscope и itemtype

Начнем с конкретного примера. Представим, что у нас есть страница о фильме «Аватар» — со ссылкой на трейлер, информацией о режиссере и т. п. HTML-код может выглядеть примерно так:

<div>
    <h1>Аватар</h1>
    <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)</span>
    <span>Фантастика</span> 
    <a href="../movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>

В первую очередь необходимо указать, какая часть страницы посвящена непосредственно фильму «Аватар». Для этого добавим атрибут itemscope к HTML-тегу, в который заключена эта информация:

<div itemscope>
    <h1>Аватар</h1>
    <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)</span>
    <span>Фантастика</span>
    <a href="../movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>

Добавляя itemscope, мы тем самым обозначаем, что HTML-код, содержащийся в блоке <div>...</div>, описывает некоторую сущность.

Пока мы только объявили, что речь идет о какой-то сущности, но не сообщили, что это за сущность. Чтобы указать тип сущности, добавим атрибут itemtype сразу после itemscope.

<div itemscope itemtype="http://schema.org/Movie">
    <h1>Аватар</h1>
    <span>Режиссер: Джеймс Кэмерон (род. 16 августа 1954 г.)</span>
    <span>Фантастика</span>
    <a href="../movies/avatar-theatrical-trailer.html">Трейлер</a>
</div>

Тем самым мы уточняем, что сущность, описание которой заключено в теге <div>, представляет собой фильм (тип Movie в иерархии типов schema.org). Названия типов имеют вид URL, в нашем случае http://schema.org/Movie.

itemprop

Какую дополнительную информацию о фильме «Аватар» можно предоставить поисковым системам? О фильме можно сообщить множество интересных сведений: актерский состав, режиссер, рейтинг. Чтобы отметить свойства сущности, используется атрибут itemprop. Например, чтобы указать режиссера фильма, добавим атрибут itemprop="director" к HTML-тегу, содержащему имя режиссера. (Полный список свойств, которые можно задать для фильма, приведен на странице http://schema.org/Movie.)

<div itemscope itemtype="http://schema.org/Movie">
    <h1 itemprop="name">Аватар</h1>
    <span>Режиссер:
        <span itemprop="director">Джеймс Кэмерон</span>
        (род. 16 августа 1954 г.)</span>
    <span itemprop="genre">Фантастика</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Трейлер</a>
</div>

Обратите внимание, что мы добавили дополнительный тег <span>...</span>, чтобы привязать атрибут itemprop к соответствующему тексту на странице. Тег <span> не влияет на отображение страницы в браузере, поэтому его удобно использовать вместе с itemprop.

Теперь поисковые системы смогут понять не только то, что http://www.avatarmovie.com — это ссылка, но и то, что это ссылка на трейлер фантастического фильма «Аватар» режиссера Джеймса Кэмерона.

Вложенные сущности

Иногда значение свойства может само являться сущностью, с собственным набором свойств. Например, режиссер фильма может быть описан как сущность с типом Person, у которой есть свойства name (имя) и birthDate (дата рождения). Чтобы указать, что значение свойства представляет собой сущность, необходимо добавить атрибут itemscope сразу после соответствующего itemprop.

<div itemscope itemtype="http://schema.org/Movie">
    <h1 itemprop="name">Аватар</h1>
    <div itemprop="director" itemscope itemtype="http://schema.org/Person">Режиссер:
        <span itemprop="name">Джеймс Кэмерон</span>
        (род. <span itemprop="birthDate">16 августа 1954 г.</span>)
    </div>
    <span itemprop="genre">Фантастика</span>
    <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Трейлер</a>
</div>

Как использовать словарь schema.org

Типы и свойства schema.org

Кроме типов Movie и Person, упомянутых в разделе Как размечать контент с помощью микроданных, schema.org описывает множество разнообразных типов сущностей, для каждого из которых определен набор свойств.

Наиболее обобщенный тип сущности — это Thing (нечто), у которого есть четыре свойства: name (название), description (описание), url (ссылка) и image (картинка). Более специализированные, частные типы имеют общие свойства с более универсальными. Например, Place (место) — частный случай Thing, а LocalBusiness (местная фирма) — частный случай Place. Частные типы наследуют свойства родительского типа. (Более того, тип LocalBusiness является и частным случаем Place, и частным случаем Organization, поэтому наследует свойства обоих родительских типов.)

Вот список некоторых популярных типов сущностей:

• Творческие произведения: CreativeWork (творческое произведение), Book (книга), Movie (фильм), MusicRecording (музыкальная запись), Recipe (рецепт), TVSeries (телесериал)...

• Встроенные нетекстовые объекты: AudioObject (аудио), ImageObject (изображение), VideoObject (видео)

• Event (событие)

• Organization (организация)

• Person (человек)

• Place (место), LocalBusiness (местная фирма), Restaurant (ресторан)...

• Product (продукт), Offer (предложение), AggregateOffer (сводное предложение)

Смотрите также полный список типов сущностей на одной странице.

Ожидаемые типы, текст и URL

Размечая страницы с помощью schema.org, придерживайтесь следующих рекомендаций:

• Чем больше, тем лучше — за исключением скрытого текста. Чем больше контента вы разметите, тем лучше. Однако, как правило, следует размечать только контент, видимый посетителям сайта, но не содержимое скрытых тегов <div> и других скрытых элементов страницы.

• Ожидаемые типы или текст. Просматривая типы schema.org, вы заметите, что у многих свойств есть так называемые ожидаемые типы. Это значит, что значение свойства может быть вложенной сущностью (см. раздел Вложенные сущности). Однако добавлять вложенную сущность не обязательно: приемлемо использовать просто текст или URL.

  Также вместо ожидаемого типа можно использовать дочерний тип. Например, если для свойства указан ожидаемый тип Place, можно добавить вложенную сущность с типом LocalBusiness.

• Использование свойства url. Одни страницы посвящены описанию только одной сущности. Например, персональная страница конкретного человека, которую можно разметить, используя тип сущности Person. Другие — целому ряду сущностей. Например, на сайте вашей компании есть список сотрудников, со ссылками на профиль каждого из них. Для таких агрегирующих страниц нужно разметить отдельно каждую сущность (в этом случае получится последовательность сущностей с типом Person) и добавить свойство url в ссылку на соответствующую страницу для каждой сущности, например:

  <div itemscope itemtype="http://schema.org/Person">
      <a href="alice.html" itemprop="url">Элис Джонс</a>
  </div>
  <div itemscope itemtype="http://schema.org/Person">
      <a href="bob.html" itemprop="url">Боб Смит</a>
  </div>
  

Тестирование разметки

Подобно тому, как браузер необходим для проверки изменений в верстке веб-страницы, а компилятор — для тестирования кода, разметку schema.org также следует тестировать. В интернете существует несколько инструментов, с помощью которых можно проверить корректность разметки и выявить ошибки: Валидатор микроразметки от Яндекса, Rich Snippets Testing Tool от Google, Structured Data Linter.

Дополнительно: машиночитаемая версия информации

Многие страницы можно разметить, используя только атрибуты itemscope, itemtype и itemprop (описанные в разделе Как размечать контент с помощью микроданных) вместе с типами и свойствами schema.org (описанными в разделе Как использовать словарь schema.org).

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

Даты, время и длительность: используйте тег <time> с атрибутом datetime

Не всегда роботам удается правильно понять дату и время. Например, «04/01/11» — это 11 января 2004 г., 4 января 2011 г. или 1 апреля 2011 г.? Чтобы однозначно задать дату, используйте тег <time> вместе с атрибутом datetime. Значение атрибута datetime — дата в формате YYYY-MM-DD. Следующий HTML-код точно определяет дату как 1 апреля 2011 г.:

<time datetime="2011-04-01">04/01/11</time>

Время суток задается в формате hh:mm либо hh:mm:ss, с префиксом T. Время может быть указано вместе с датой:

<time datetime="2011-05-08T19:30">8 мая, 19:30</time>

Рассмотрим пример в контексте: HTML-код с информацией о концерте, который состоится 8 мая 2011 г. Разметка типа Event включает название события, описание и дату.

<div itemscope itemtype="http://schema.org/Event">
    <div itemprop="name">Spinal Tap</div>
    <span itemprop="description">Одна из самых громких музыкальных групп всех времен воссоединится для незабываемого двухдневного шоу.</span> Концерт состоится
    <time itemprop="startDate" datetime="2011-05-08T19:30">8 мая в 19:30</time>
</div> 

Длительность описывается аналогичным образом, с помощью тега <time> и атрибута datetime. Значение атрибута предваряется префиксом P (от англ. period). Например, указать в рецепте, что время приготовления составляет полтора часа, можно следующим образом:

<time itemprop="cookTime" datetime="PT1H30M">1 ½ часа</time>

H обозначает количество часов, а M — количество минут.

Форматы даты, времени и длительности соответствуют стандарту ISO 8601.

Перечисления и ссылки на канонические страницы: используйте тег link с атрибутом href

• Перечисления

  Некоторые свойства имеют ограниченный набор возможных значений. Программисты называют их перечислениями. Например, интернет-магазин может использовать тип сущности Offer для подробного описания товарного предложения. Свойство availability (наличие) обычно имеет одно из нескольких возможных значений: In stock (в наличии), Out of stock (отсутствует), Pre-order (на заказ) и т. д. Значения перечисляемых свойств можно указывать в виде URL, аналогично типам сущностей schema.org.

  Вот товарное предложение, размеченное как сущность типа Offer, с соответствующими свойствами:

  <div itemscope itemtype="http://schema.org/Offer">
      <span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span>
      <span itemprop="availability">Уже в продаже!</span>
  </div> 
  

  А вот то же самое предложение, размеченное с использованием <link> и href, что позволяет однозначно указать одно из допустимых значений свойства availability:

  <div itemscope itemtype="http://schema.org/Offer">
      <span itemprop="name">Blend-O-Matic</span>
      <span itemprop="price">$19.95</span>
      <link itemprop="availability" href="http://schema.org/InStock"/>Уже в продаже!
  </div>
  

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

• Ссылки на канонические страницы

  Обычно ссылки создаются с помощью тега <a>. Например, следующая гиперссылка на страницу в Википедии для книги «Над пропастью во ржи»:

  <div itemscope itemtype="http://schema.org/Book">
      <span itemprop="name">Над пропастью во ржи</span> Автор
      <span itemprop="author">Джером Сэлинджер</span>
      <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Страница в       Википедии</a>
  </div> 
  

  Как видите, атрибут itemprop="url" можно использовать для ссылки на страницу другого сайта (в этом случае, Википедии), которая описывает ту же самую сущность. Ссылки на сторонние сайты помогают поисковым системам лучше понимать, о чем речь на вашей странице.

  Если вы не желаете добавлять ссылку, видимую посетителям, используйте тег <link>, как показано ниже:

  <div itemscope itemtype="http://schema.org/Book">
      <span itemprop="name">Над пропастью во ржи</span>
      <link itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" /> Автор <span itemprop="author">Джером Сэлинджер</span>
  </div> 
  

Недостающая или неявная информация: используйте тег <meta> с атрибутом content

Иногда важная информация не может быть размечена из-за способа ее отображения на странице. Например, информация представлена на рисунке (изображение рейтинга 4 звезды из 5) или во Flash-объекте (например, длительность видеоролика) либо она подразумевается, но не указана на странице в явном виде (например, валюта цены).

В таких случаях можно использовать тег <meta> с атрибутом content. В следующем примере картинка иллюстрирует рейтинг 4 звезды из 5:

<div itemscope itemtype="http://schema.org/Offer">
    <span itemprop="name">Blend-O-Matic</span>
    <span itemprop="price">$19.95</span>
    <img src="four-stars.jpg" /> 25 оценок
</div> 

А вот тот же пример с размеченной информацией о рейтинге.

<div itemscope itemtype="http://schema.org/Offer">
    <span itemprop="name">Blend-O-Matic</span>
    <span itemprop="price">$19.95</span>
    <div itemprop="reviews" 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>

Этим приемом не следует злоупотреблять. Используйте тег <meta> с атрибутом content только для той информации, которую невозможно разметить иным способом.

Расширение schema.org

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

Задайте вопрос Нейровебмастеру — в правом нижнем углу нажмите кнопку .

Если у вас остались вопросы:

• Напишите в чат службы поддержки — в правом нижнем углу нажмите значок . Чат доступен ежедневно с 8:00 до 20:00 по московскому времени.

• Заполните форму обратной связи ниже.