Главная
Кейсы
Микроразметка Schema

Кейсы

Микроразметка Schema

Что такое Schema?

В 2011 году поисковики Google, Yahoo!, Bing и Яндекс объединились для работы над единым словарем метаданных Schema.org. Цель данной работы улучшить понимание поисковиками данных на сайте и повысить релевантность поисковой выдачи. Schema.org помогает поисковикам лучше понимать данные, представленные на сайте. На основе этих данных поисковики формируют расширенные сниппеты в поисковой выдаче.

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

Зачем нужна микроразметка Schema?

Несмотря на то, что поисковые системы постоянно развиваются и обзаводятся новыми механизмами для определения типов контента на страницах в сети, они все еще часто ошибаются, им сложно определить то, о чем идет речь на странице. Правильное описание товаров, блоков с комментариями, информационных постов и других элементов упрощает работу Google, Яндекс и аналогичным сервисам.

Грамотная и структурированная разметка позитивно сказывается на SEO-показателях. Помимо этого микроразметка – это один из простейших способов попасть в расширенные результаты поиска (карточки, сниппеты), напротив ссылок на вашу страницу появятся дополнительные подсказки: звездочки, если вы публикуете товар с рейтингом, карта, если вы описываете какое-то место, постер фильма, если вы описываете на сайте кинокартину, кнопка для быстрого заказа столика, если вы владеете рестораном. Все это выделит ресурс с разметкой на фоне конкурентов и спровоцирует пользователя стать вашим клиентом.

Также микроданные помогают нивелировать ошибки со стороны поисковой системы. Она не определит статью как комментарий или страницу с товаром как рецепт блюда.

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

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

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

Сущности

Словарь микроразметки состоит из сущностей (например, Product ) и свойств, которые описывают параметры сущности (SKU, цена, наличие и т.д.).

Весь список сущностей и документация представлены на официальном сайте schema.org.

Так же вы можете ознакомиться с пока не полностью переведённой, неофициальной документацией на сайте ruschema.org.

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

Person — сущность для описания человека.
Product — сущность, которая используется для разметки любого товара или услуги.
Event — для описания событий, происходящих в определенное время и в определенном месте: концерт, лекция, фестиваль и т.д. Также в Schema.org есть более специфичные типы сущностей Event для разных видов событий. Например, бизнес события (BusinessEvent), фестиваль (Festival), спортивное событие (SportsEvent).
Organization, LocalBusiness — сущность для описания подробных сведений о вашей компании.
Не стоит использовать на нескольких страницах вашего сайта данные сущности (Organization/LocalBusiness), так как это может запутать поисковые системы.
Breadcrumbs — сущность для описания цепочки или «хлебных крошек». Она позволяет понимать иерархию страниц сайта и отображает навигационные цепочки, в большинстве случаев разделяя на части соответствующий URL-адрес в сниппете.
Article — сущность для описания статей. Также в Schema.org есть более специфичные типы сущностей для описания статей. Например, статья, содержимое которой носит новостной характер (NewsArticle), пост блога (BlogPosting), отчёт, составленный государственной или негосударственной организацией (Report), научная статья (ScholarlyArticle), техническая статья (TechArticle)

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

Сразу отметим, что на всех примерах отображается синтаксис Microdata. Так как большая часть нашей аудитории распологается в РФ, то мы рекомендуем использовать именно этот стандарт, потому что Яндекс не работает с альтернативным форматом – JSON-LD.

Ниже представлен пример простой карточки товара. Мы видя карточку понимаем что это, но для робота это просто набор тегов.

<article>
  <img src="img/content/boots.png" width="100" height="100" alt="Ботинки мужские">
  <a href="#">
    <h3>Ботинки мужские</h3>
  </a>
  <p>Очень удобные и красивые ботинки!</p>
  <div>
    <span>Цена 10 000</span>
  </div>
</article>

itemscope

itemscope - данный атрибут говорит о том что тот блок на котором распологается данный атрибут родительский.

itemtype

itemtype - данный атрибут служит для указания схемы которую мы будем использовать. В нем мы указываем ссылку на схему которую будем использовать в блоке itemtype="https://schema.org/Product".

<article itemscope itemtype="https://schema.org/Product">
  <img src="img/content/boots.png" width="100" height="100" alt="Ботинки мужские">
  <a href="#">
    <h3>Ботинки мужские</h3>
  </a>
  <p>Очень удобные и красивые ботинки!</p>
  <div>
    <span>Цена 10 000</span>
  </div>
</article>

itemprop

itemprop - данный атрибут говорит о свойствах сущности.
itemprop="image" - указывает на то что это изображение товара.
itemprop="url" - указывает на то что это ссылка на товар.
itemprop="name" - указывает на то что это имя товара.
itemprop="description" - указывает на то что это описание товара.
itemprop="offers" - указывает на предложение предоставить этот товар — например, предложение продать товар.

<article itemscope itemtype="https://schema.org/Product">
  <img itemprop="image" src="img/content/boots.png" width="100" height="100" alt="Ботинки мужские">
  <a itemprop="url" href="#">
    <h3 itemprop="name">Ботинки мужские</h3>
  </a>
  <p itemprop="description">Очень удобные и красивые ботинки!</p>
  <div itemprop="offers">
    <span>Цена 10 000</span>
  </div>
</article>

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

Мы можем создавать новые родительские блоки (itemscope) внутри других родительских блоков.

<article itemscope itemtype="https://schema.org/Product">
  <img itemprop="image" src="img/content/boots.png" width="100" height="100" alt="Ботинки мужские">
  <a itemprop="url" href="#">
    <h3 itemprop="name">Ботинки мужские</h3>
  </a>
  <p itemprop="description">Очень удобные и красивые ботинки!</p>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">Цена 10 000</span>
  </div>
</article>

Если в дизайне не хватает каких-то элементов, которые мы хотели бы указать для поисковой системы, мы можем их добавить с помощью тегов meta и link.

<article itemscope itemtype="https://schema.org/Product">
  <img itemprop="image" src="img/content/boots.png" width="100" height="100" alt="Ботинки мужские">
  <a itemprop="url" href="#">
    <h3 itemprop="name">Ботинки мужские</h3>
  </a>
  <p itemprop="description">Очень удобные и красивые ботинки!</p>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price">Цена 10 000</span>
    <meta itemprop="priceCurrency" content="RUB">
    <link itemprop="availability" href="https://schema.org/InStock">
  </div>
</article>

Проверка валидности

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