Как обозначить свой сайт с помощью микроданных согласно Schema.org

Микроданные — это спецификация HTML5 от WHATWG (Web Hypertext Application Technology Working Group). Формат данных предлагает мета-синтаксис для разметки, или маркировки, структурированных данных. Аннотируя семантические контексты таким образом, чтобы они были доступны для машинного чтения, это расширение HTML позволяет операторам веб-сайтов обогащать контент метаданными.

Считываемые программами, такими как веб-краулеры или браузеры, эти метаданные составляют основу для расширенных презентаций контента и для обработки веб-контента вспомогательными системами, такими как устройства чтения с экрана. Структурированные данные особенно важны для поисковой оптимизации. Это связано с тем, что семантическая аннотация облегчает индексацию веб-сайтов и позволяет дополнить результаты поиска дополнительной информацией. Для структурирования данных микроданные опираются на единый словарь, определенный Schema.org.

Содержание

Микроданные в сравнении с другими форматами данных
Синтаксис микроданных
Разметка микроданных на практике
Разметка изображений с помощью микроданных
Маркировка контактных данных с помощью микроданных
Тегирование содержимого сайта для богатых сниппетов с помощью микроданных
Хлебные крошки с тегами микроданных

Микроданные в сравнении с другими форматами данных

В то время как интернет-сообщество способно согласиться с тем, что HTML должен стать более семантичным, выбор правильного формата данных для разметки метаданных по-прежнему остается спорной темой. Как отдельный модуль для HTML, microdata был первоначально представлен в качестве альтернативы стандарту того времени, RDFa. Целью создания этого формата было достижение упрощенного синтаксиса с функциональностью, сравнимой с существующей. Дополнительным преимуществом является его сходство с новейшей версией HTML. Микроданные стали известны благодаря проекту Schema.org, совместной инициативе ведущих поисковых систем Google, Bing, Yahoo! и Yandex; вместе они предоставляют основанный на микроданных единый словарь для семантического аннотирования. Если раньше микроданные были предпочтительным форматом данных лидера рынка, то сегодня рекомендации технологического гиганта из Горной долины уже не кажутся такими непоколебимыми, как раньше. Помимо микроданных, словарь Schema.org также продолжает поддерживать разметку с помощью RDFa. JSON-LD также начинает все больше привлекать к себе внимание как новый формат разметки на основе сценариев. Как бы то ни было, этот вариант не поддерживается Google для всех типов данных, что делает микроданные очень актуальным вариантом.

Синтаксис микроданных

Синтаксис микроданных основан на парах имя-значение, известных как элементы, и может быть описан в три этапа: сначала определяется элемент и обозначается как элемент. Затем этому элементу присваивается определенный тип из словаря Schema.org. После определения типа элемента ему могут быть присвоены различные свойства. Разметка осуществляется с помощью атрибутов HTML5 itemscope, itemtype и itemprop:

itemscope: атрибут HTML5 itemscope используется как часть тега div, чтобы обозначить определенную область как элемент. Затем этот элемент определяется с помощью itemtype и itemprop.

itemtype: атрибут HTML5, itemtype, может применяться ко всем элементам, помеченным атрибутом itemscope; его цель — обозначить предопределенные типы. Это позволяет присвоить соответствующим элементам сайта универсальные типы в соответствии со Schema.org. Затем они могут быть прочитаны всеми традиционными поисковыми системами.

itemprop: атрибут HTML5, itemprop, указывает на свойство ранее названного itemtype. О том, какие свойства могут быть присвоены соответствующему itemtype, можно узнать на сайте Schema.org.

Включение атрибутов itemscope, itemtype и itemprop в HTML-код может быть выполнено в соответствии со следующей базовой структурой:

<div itemscope itemtype="http://schema.org/type">
  <span itemprop="property">Item</span>
</div>

Разметка микроданных на практике

Как и другие форматы для семантической разметки HTML-документов, микроданные поддерживаются набором классических HTML-тегов. В принципе, атрибуты микроданных не зависят от тегов HTML. Поэтому семантически пустые теги HTML, такие как <div> и <span>, особенно хорошо подходят для использования в качестве элементов поддержки атрибутов микроданных.

<div></div>	Элемент div определяет новый текстовый блок; как правило, с помощью этого тега начинается и заканчивается область элементов.
<span></span>	Элемент span определяет общую инлайн-область без какого-либо влияния на рендеринг браузера. По этой причине он используется для разметки itemprop.

Разметка изображений с помощью микроданных

Встраивание логотипов компаний представляет собой типичное применение для семантического аннотирования содержимого сайта. В то время как человек способен идентифицировать графическое изображение сайта как логотип компании, программы, такие как веб-краулеры, должны полагаться на микроданные, чтобы «понять» такие контексты:

В первой строке кода открывается новый элемент div, который охватывает как URL во второй строке, так и встроенное изображение в третьей строке. Этот неспецифический тег div помечен атрибутом itemscope как элемент, несущий информацию. Атрибут itemtype обозначает тип ‘Organization’ в соответствии со Schema.org. Таким образом, веб-поисковики могут сделать вывод, что информация, расположенная в теге div, относится к информации о компании. Кроме того, атрибуту itemtype присваиваются свойства ‘url’ и ‘logo’ вместе с соответствующими значениями. Это позволяет поисковым системам идентифицировать графику как логотип компании, связанный с компанией в процессе работы. Поисковые системы, такие как Google, используют этот тип маркированной графики для создания графов знаний.

В случае с фирменным логотипом используется следующая разметка Schema.org:

<div itemscope itemtype="http://schema.org/Brand">
  <span itemprop="name">brand name</span>
  <img itemprop="logo" src="http://www.examplebrand.com/logo.png" />
</div>

Элемент в пределах itemscope был помечен как бренд в соответствии со Schema.org. Название и логотип бренда (включая его веб-положение) указаны как свойства.

<div itemscope itemtype="http://schema.org/Brand">
<span itemprop="name">Name der Marke</span>
<img itemprop="logo" src="http://www.beispielmarke.de/logo.png" />
</div>

Маркировка контактных данных с помощью микроданных

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

<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">Google.org (GOOG)</span>
  Contact Details:
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    Main address:
      <span itemprop="streetAddress">38 avenue de l'Opera</span>
      <span itemprop="postalCode">F-75002</span>
      <span itemprop="addressLocality">Paris, France</span>
  </div>
  Tel: <span itemprop="telephone">( 33 1) 42 68 53 00 </span>,
  Fax: <span itemprop="faxNumber">( 33 1) 42 68 53 01 </span>,
  E-mail: <span itemprop="email">secretary(at)google.org</span>
</div>

В первой строке кода атрибут itemtype определяет элемент в теге div с первой по 13 строку как ‘Organization’. С помощью различных атрибутов itemprop им присваиваются свойства ‘name’, ‘address’, ‘phone’, ‘faxNumber’ и ’email’ с соответствующими значениями. Пока что ничего не отличается от того, что было объяснено в предыдущих примерах. Однако в четвертой строке есть отклонение. Синтаксис микроданных позволяет значениям свойств также быть элементами. Здесь информация в разделе «основной адрес» вложена через второй элемент div со своим собственным itemscope и далее определена как itemtype, ‘PostalAddress’. Затем он определяется более конкретно через свойства ‘streetAddress’, ‘postalCode’ и ‘addressLocality’.

Тегирование содержимого сайта для богатых сниппетов с помощью микроданных

Богатые сниппеты — это функция, которая позволяет отображать фрагменты содержимого сайта в результатах поиска. Семантическая маркировка определенной информации очень важна для того, чтобы она правильно обрабатывалась поставщиками поисковых систем. С помощью богатых сниппетов такие детали, как информация о продуктах, рецепты, отзывы пользователей, события, программные приложения, видео и новостные статьи, отображаются непосредственно на страницах результатов поисковой системы (SERPS) при условии, что соответствующая исходная информация была помечена как машиночитаемая. Следующий пример имитации предложения отеля схематично показывает, как маркируется такая информация с помощью синтаксиса микроданных Schema.org.

Обычно на порталах, посвященных путешествиям и отдыху, потенциальным гостям предоставляется информация о названии отеля, фотография и описание места расположения. Вот как будет выглядеть HTML-код этой базовой информации при разметке микроданных в соответствии со Schema.org:

<div itemscope itemtype="http://schema.org/Hotel">
  <span itemprop="name">hotel name</span>
  <span itemprop="description">hotel description</span>
  <img itemprop="image" src="http://Images/hotel.jpg" />
</div>

Атрибут itemtype в первой строке относится к предопределенному типу ‘Hotel’. В строках со второй по четвертую, свойства ‘name’, ‘description’ и ‘image’ назначаются для ‘hotel’, вместе с их соответствующими значениями.

Дополнительная информация в виде itemprops или subordinateitemscopes может быть добавлена к этой базовой структуре по усмотрению пользователя. Для этого шага важно обратить внимание на то, что подчиненные элементы div размещаются внутри div-тега более высокого itemscope. Следующий код добавляет ценовое предложение в семантическую аннотацию для предложений отелей.

<div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer"> 
  <span itemprop="price">400 dollars</span>
</div>

Первая строка кода определяет свойство ‘makeOffers’ как тип элемента ‘Offer’. А поскольку предложения обычно также требуют цены, это свойство добавляется во второй строке с itemprop, ‘price’, и сопрягается со значением, ‘400 долларов’.

Кроме того, информация о способах оплаты (itemprop=»paymentAccepted»), местоположении (itemprop=»map») или впечатлениях пользователей (itemprop=»reviews») также может быть помечена с помощью словаря Schema.org. Теперь разметка выглядит следующим образом:

<div itemscope itemtype="http://schema.org/Hotel">
  <span itemprop="name">hotel name</span>
  <span itemprop="description">hotel description</span>
  <img itemprop="image" src="http://Images/hotel.jpg" />
  <div itemprop="makesOffer" itemscope itemtype="http://schema.org/Offer"> 
    <span itemprop="price">400 dollars</span>
  </div>
  <span itemprop="paymentAccepted">credit, debit, etc.</span> 
  <span itemprop="map">map URL</span> 
  <div itemprop="reviews" itemscope itemtype="http://schema.org/Review"> 
    <span itemprop="name">review title</span>
    <span itemprop="author">author</span>
    <span itemprop="reviewBody">review text</span>
    <span itemprop="datePublished">review date</span>
  </div>
</div>

В первой строке элемент ‘Hotel’ определяется как тип с более высоким рангом для последующих записей до строки 15. После этого основная информация, название, описание и изображение обозначаются как свойства элемента ‘Hotel’. Затем в строках с 05 по 07 обозначается цена отеля через подчиненный атрибут itemscope, ‘Предложение’. После этого следуют условия оплаты и местоположение, которые присваиваются элементу ‘Hotel’. Подчиненный itemscope с элементом ‘Review’ маркирует информацию в строках с 10 по 15 как относящуюся к пользовательскому отчету. Этот отчет содержит свойства title, author, review text и date, каждое из которых помечено своим itemprop.

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

<div itemscope itemtype="http://schema.org/Review">
  <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Hotel">
    <span itemprop="name">hotel name</span>
  </div>
  <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
    <span itemprop="ratingValue">4</span>
  </span> stars -
  <b>"<span itemprop="name">title of review</span>"</b>
  <span itemprop="author" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">author</span>
  </span>
  <span itemprop="reviewBody">review text</span>
</div>

Хлебные крошки с тегами микроданных

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

<ol>
  <li>
    <a href="http://www.provider.com/hotels/">Hotels</a>
  </li>
  <li>
    <a href="http://www.provider.com/hotels/USA/">Hotels in the US</a>
  </li>
  <li>
    <a href="http://www.providers.com/hotels/USA/Boston/">Hotels in Boston</a>
  </li>
<ol>

В приведенном выше примере показан элемент списка (упорядоченный список, ol), который содержит ссылки на различные подстраницы веб-сайта. Чтобы разметить эту навигационную структуру для программ, таких как веб-браузеры или поисковые машины, используется следующий синтаксис микроданных Schema.org:

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="http://www.provider.com/hotels/">
      <span itemprop="name">Hotels</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="http://www.provider.com/hotels/USA/">
      <span itemprop="name">Hotels in the US</span></a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="http://www.provider.com/hotels/USA/Boston/">
      <span itemprop="name">Hotels in Boston</span></a>
    <meta itemprop="position" content="3" />
  </li>
</ol>

Элемент списка, <ol>, определяется с помощью атрибута itemscope как элемент и назначается через itemtype схеме, ‘BreadcrumbList’. Для каждой «хлебной крошки», расположенной в навигационной структуре сайта, открывается отдельный itemscope с itemtype, ‘ListItem’. Каждому элементу списка хлебных крошек присваиваются свойства itemprops ‘name’, ‘item’ и ‘position’. Размеченные в машиночитаемой форме, они содержат значения для имени, URL и позиции данной хлебной крошки в маршруте хлебных крошек.