Что такое хлебные крошки
Хлебные крошки (ХК) — это последовательные ссылки, показывающие структуру вложенности текущей страницы относительно всего сайта. Этот навигационный элемент обычно располагается в верхней части страницы перед основным контентом.
Пример хлебных крошек
Зачем нужно размечать хлебные крошки
- Правильное формирование расширенного сниппета в выдаче поисковых систем. Помимо заголовка и описания, к странице с валидной микроразметкой могут добавиться хлебные крошки, которые улучшат внешний вид сниппета, что приведет к увеличению его CTR.
- Улучшение индексации ресурса в целом. Поисковый робот будет лучше «понимать» иерархию сайта, а в процессе сканирования ему будет проще переходить к странице на уровень выше.
Как добавить микроразметку 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 в разделе «Улучшения» => «Строки навигации».
Рекомендации
- Последнюю ссылку в хлебных крошках (текущую страницу) делайте неактивной. Активная ссылка может повлиять на поведенческие факторы, ухудшить юзабилити, а также зациклить индексацию. Таким образом, последняя страница в микроразметке — это почти всегда фактически предпоследняя страница в иерархии.
- Поскольку ХК представляют собой список вложенных страниц, то и оформлять их лучше в тегах <ul>, а не в <div> и т.д.
- Чтобы сделать сниппет еще более заметным, используйте в разметке эмодзи. Взять их можно, например, здесь. Однако применяйте их с осторожностью: слишком пестрый сниппет может, напротив, оттолкнуть пользователя.
* Meta Platforms Inc. (и принадлежащие ей соц.сети Instagram, Facebook) признана экстремистской организацией, ее деятельность в России запрещена.
