Schema.org своими руками

Schema.org — стандарт семантической разметки данных, который помогает поисковикам лучше понимать данные, представленные на сайте. Например, с помощью разметки можно явно указать поисковым роботам, что на странице site.ru/product_page1 находится товар, и передать основные параметры: название, цену, артикул, производителя и т.д. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.

Кроме Schema.org есть другие виды микроразметок. У них разные назначения, поэтому вкратце приведем свойства основных видов, чтобы не путать:

• Open Graph. Микроразметка Facebook, используется для настройки правильного отображения публикации в соцсетях при репосте статьи с вашего сайта (заголовок, описание, правильная картинка). Изначально разметка была создана для Facebook, сейчас поддерживается и другими соцсетями и мессенджерами (ВКонтакте, Твиттер, Телеграм и т.д.).
• Микроформаты. Разработка W3C, создан в 2007 году. Подходит для разметки товаров, отзывов, контактной информации и других видов контента. Раньше использовался более активно, сейчас имеет ряд недостатков, недостаточно быстро развивается и уступает Schema.org.
• Dublin Core. Этот словарь разметки используют библиотеки и музеи — позволяет описывать книги и музейные экспонаты.

Основные принципы разметки

Любая разметка Schema.org производится в два шага:

1. Оборачивание описания определенного типа в контейнер с указанием схемы разметки:<div itemscope itemtype="http://schema.org/Organization" > ... </div>
2. Разметка отдельных свойств с указанием на конкретное свойство схемы:<span itemprop="streetAddress">Льва Толстого, 16</span>

Документ без разметки

<div>
  <span>Яндекс</span>
  Контакты:
  <div>
    Адрес: Льва Толстого, 16,
    119021,
    Москва,
  </div>
  Телефон: +7 495 739–70–00, 
  Факс: +7 495 739–70–70,
  Электронная почта: pr@yandex-team.ru
</div>

Документ с разметкой Schema.org

<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">Яндекс</span>
  Контакты:
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    Адрес:
    <span itemprop="streetAddress">Льва Толстого, 16</span>
    <span itemprop="postalCode"> 119021</span>
    <span itemprop="addressLocality">Москва</span>,
  </div>
  Телефон:<span itemprop="telephone">+7 495 739–70–00</span>,
  Факс:<span itemprop="faxNumber">+7 495 739–70–70</span>,
  Электронная почта: <span itemprop="email">pr@yandex-team.ru</span>
</div>

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

• Введение в Schema.org (перевод на русский).