Микроразметка хлебных крошек Schema.org

Что такое хлебные крошки

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

Пример хлебных крошек

Зачем нужно размечать хлебные крошки

Как добавить микроразметку Shema.org в хлебные крошки

Разметка Schema.org помогает поисковикам понимать разные типы данных, отделять их друг от друга. Словарь данного синтаксического языка состоит из различных сущностей (например, цена товара), предназначенных в том числе и для разметки ХК.

Чтобы внедрить Schema.org в хлебные крошки, нужно обрамить их
HTML-код в специальные блоки. К примеру, пропишем код для крошек вида «Главная — Смартфоны — XIAOMI — Mi 9T» и разберем, из чего он состоит:

<ul itemscope itemtype="https://schema.org/BreadcrumbList">
 
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/" title="Главная" itemprop="item">
<span itemprop="name">Главная</span>
<meta itemprop="position" content="0">
</a></li>
 
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/phones/" title="Смартфоны" itemprop="item">
<span itemprop="name"> Смартфоны </span>
<meta itemprop="position" content="1">
</a></li><
 
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/phones/xiaomi/" title="XIAOMI" itemprop="item">
<span itemprop="name"> XIAOMI</span>
<meta itemprop="position" content="2">
 
</a>
</li>
</ul>

• Itemscope и itemtype показывают объект и его тип, а также наличие разметки Shema.org;
• http://schema.org/BreadcrumbList указывает на то, что это хлебные крошки;
• ItemListElement показывает, что описываемый элемент относится к определенной иерархии;
• Itemprop="item" определяет ссылку элемента;
• Itemprop="name" — название элемента.
• Itemprop="position" — порядковый номер элемента в общей иерархии крошек.

Как проверить правильность разметки

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

Проверка микроразметки по фрагменту кода

Проверка микроразметки по URL

Отчет о проверке валидатором микроразметки

После запуска теста валидатор покажет ошибки и предупреждения, если таковые присутствуют. Найти ошибки можно также в Google Search Console в разделе «Улучшения» => «Строки навигации».

Рекомендации