Что такое хлебные крошки
При переходе в описание товара или тему форума, можно увидеть путь от главной страницы — это и есть хлебные крошки. Элемент относится к навигации и упрощает использование сайта пользователем.
Но есть еще одна полезная опция — это отображение хлебных крошек в поисковой системе. С помощью них можно отобразить структуру сайта и привлечь больше посетителей. Например, пользователь видит цепочку вида «Ремонт телефонов — iPhone – iPhone 13 Pro Max» и понимает, компания ремонтирует все модели. Следовательно, это более профессиональная мастерская и ей можно доверить смартфон. Аналогично и с форумом — пользователь видит подкатегории и делает вывод, что сайт популярен и обсуждаются многие темы.
Зачем нужно размечать хлебные крошки
Для отображения подкатегорий в поисковой выдаче роботу нужно «дать понять», что индексируемый блок навигации является хлебными крошками. Только в этом случае в результатах над основным текстом появится цепочка с путем к странице.
Вывод информации в сниппете настраивается с помощью переменных через микроразметку schema.org. Для отображения хлебных крошек потребуется поочередное выделение каждого элемента блока навигации, с последующим присвоением им свойств (ссылки, порядка и т.д.).
Как добавить микроразметку Schema.org в хлебные крошки
Для примера возьмем магазин по продаже техники Apple и пользователя, который хочет купить 13 Pro Max. Благодаря выведенному блоку навигации он поймет, что может купить не только iPhone, но и наушники Air Pods к нему.
Без разметки хлебные крошки оформляются как обычный список. Для главной страницы код выглядит так:
<ul>
<li>
<a href=»/main/»>
<span>Главная</span>
</a>
</li>
</ul>
Чтобы робот вывел всю кликабельную цепочку навигации, ему «нужно сказать» — она является хлебными крошками, а каждый элемент — ссылкой.
Выводим элемент навигационной цепочки:
- Itemscope — определяем список элементов;
- Itemtype — устанавливаем вид объекта через schema.org (в данном случае это хлебные крошки).
Добавляем выделенному элементу свойства микроразметки через атрибут itemprop:
- itemListElement — делаем элементом списка;
- item — добавляем свойства ссылки;
- name — устанавливаем выводимое в сниппете имя;
- position — вводим порядок, в котором будет отображаться данный элемент в списке.
Оформляем объекты со свойствами в список и получаем микроразметку. На примере главной страницы код будет следующим:
<ul itemscope itemtype=»https://schema.org/BreadcrumbList»>
<li itemprop=»itemListElement» itemscope itemtype=»https://schema.org/ListItem»>
<a href=»/main/» title=»Главная» itemprop=»item»>
<span itemprop=»name»>Главная</span>
</a>
<meta itemprop=»position» content=»0″>
</li>
</ul>
Оформление первого и последнего элемента
Если через микроразметку дублировать оригинальное название страницы, в сниппете пользователь увидит цепочку «Главная — iPhone — 13 Pro Max». Это однообразно и встречается в выдаче многих сайтов. Поэтому лучше переименовать главную страницу для сниппета. В начале кода находим строку <span itemprop=»name»>Главная</span> и меняем имя на оригинальное, например <span itemprop=»name»>Техника Apple</span>.
Вторая проблема оформления хлебных крошек — последний элемент. При стандартной разметке всей цепочки наименование последней страницы станет кликабельным, что создаст проблемы:
- пользователь будет отвлекаться на нее ненужными переходами;
- робот также проведет лишние переходы на одни и те же страницы, что задержит индексацию сайта в целом.
Оставлять последний элемент без разметки не вариант. Например, пользователь хочет купить iPhone 13 Pro Max. Он увидит сниппет с цепочкой и «iPhone» в конце, который на самом деле предпоследний элемент. Но потенциальный покупатель не знает этого и не посетит сайт, сделав вывод об отсутствии смартфона в продаже. Так и с форумом, содержание темы в сниппете будет, но в навигации нет. Пользователь решит, что она уже удалена или недоступна для просмотра на сайте.
Как правильно размечать для google и яндекса
С учетом всех рассмотренных нюансов полный код для разметки хлебных крошек цепочки «Главная — iPhone — 13 Pro Max» выглядит так:
<ul itemscope itemtype=»https://schema.org/BreadcrumbList»>
<li itemprop=»itemListElement» itemscope itemtype=»https://schema.org/ListItem»>
<a href=»/main/» title=»Главная» itemprop=»item»>
<span itemprop=»name»>Техника Apple</span> <!—На сайте в навигации остается «Главная», в сниппете «Техника Apple» —>
</a>
<meta itemprop=»position» content=»1″>
</li>
<li itemprop=»itemListElement» itemscope itemtype=»https://schema.org/ListItem»>
<a href=»/iPhone/» title=»iPhone» itemprop=»item»>
<span itemprop=»name»>iPhone</span>
</a>
<meta itemprop=»position» content=»2″>
</li>
<li itemprop=»itemListElement» itemscope itemtype=»https://schema.org/ListItem»>
<a title=»13 Pro Max» itemprop=»item»>
<span itemprop=»name»>iPhone 13 Pro Max</span>
</a>
<meta itemprop=»position» content=»3″>
</li>
</ul>
Проверка кода разметки на ошибки
Проверить корректность и работоспособность кода с микроразметкой можно с помощью инструментов вебмастера.
Переходим по ссылке https://developers.google.com/search/docs/appearance/structured-data и перейдите в валидатор разметки schema.org. На новой странице выберите вариант «Фрагмент кода» и вставите подготовленный код. В правой колонке будет результат.
Если в коде будет допущена опечатка или пропущен тег, сервис сообщит об этом с указанием проблемы.
Сервис также можно использовать, если на CMS установлен бесплатный недоработанный модуль хлебных крошек. После настройки навигации код можно отредактировать вручную, посмотрев ошибки на сайте.
Яндекс
Проверка разметки хлебных крошек поисковиком Яндекс происходит как у Google. Переходим по ссылке https://webmaster.yandex.ru/tools/microtest/ и на странице валидатора в поле вставляем код. Ниже появится схема с порядком, в котором робот будет обрабатывать блок хлебных крошек. При опечатках в коде система выдаст сообщение об ошибке.
Если код страницы правится прямо в панели управления сайтом (т.е. онлайн), проще выполнить проверку по адресу. Нужно вставить ссылку на редактируемую страницу и валидатор выдаст результат. Способ работает для Яндекса и Google.
