Микроразметка хлебных крошек Schema.org
(ошибки, рекомендации, пример HTML)

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

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

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

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

«Хлебные крошки»

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

Пример: «Главная страница» / «Магазин» / «Инструмент» / «Дрели»

Как Вы можете видеть из приведённого примера, название «хлебные крошки» вполне объяснимо, так как они фактически представляют собой путь для возврата в вышележащие разделы сайта.

Строка навигации может как включать URL текущей страницы, так и не включать его, особенно если страница является конечным элементом (товар, статья и т.д).

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

Тем не менее, сам факт наличия «хлебных крошек» ещё не говорит о том, что с ними всё в порядке. Давайте посмотрим, какие ошибки чаще всего допускают при создании строки навигации.

Ошибки в «хлебных крошках»

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

Вот некоторые типичные ошибки, которые могут быть допущены при разработке блока навигации «хлебные крошки»:

• Блок неверно расположен на странице.
  Строка навигации должна быть вверху, чтобы она была сразу заметна при открытии страницы. Можно продублировать «хлебные крошки» внизу страницы, то есть после контента, но такой вариант встречается редко.
• Блок не очевиден.
  Проще говоря, на некоторых сайтах можно сразу и не понять, что это строка навигации. Оригинальный дизайн это, конечно, хорошо, но не стоит забывать и о том, что назначение любого блока на сайте должно быть понятно без долгих раздумий.
• И «хлебных крошек» исключён один или более уровней.
  Это грубая ошибка, которую чаще всего допускают SEO специалисты в попытке излишней оптимизации сайта. Например, мотивироваться удаление уровня из строки навигации может так: «один из внутренних разделов представляет собой ненужную страницу, на которую никто не должен заходить». Удаление уровня приводит к тому, что навигация получается «битой». В том числе такое чудо делают даже на JavaScript.
• Навигация в виде выпадающего select.
  Это неудобно. Кроме того, select всегда скрыт и не видно всего пути, что делает такой навигационный блок по сути бесполезным.
• Неправильная микроразметка «хлебных крошек».
  В результате ошибок в микроразметке поисковые системы не могут нормально воспринимать структуру сайта, показываемую данным блоком. Это отражается и в сниппетах результатов поиска.

Последний вопрос рассмотрим подробнее. Ниже отдельно рассмотрены ошибки в микроразметке «хлебных крошек» для Schema.org, а также приведён пример правильной микроразметки, который Вы можете взять за образец.

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

Микроразметка Schema.org применяется для «хлебных крошек» очень часто. Это простой и удобный способ показать структуру Вашего поисковым системам Яндекс и Google. Если, конечно, всё сделано правильно.

Обратите внимание, что ошибки в микроразметке как правило становятся заметны далеко не сразу, так как нужно время на переиндексацию страниц и обновление поисковых баз.

Мы рекомендуем проверять корректность микроразметки при помощи специальных сервисов онлайн-валидации. Лучше всего для этих целей подходит валидатор Google. Это позволит обнаружить допущенные ошибки сразу же.

Ниже приведён готовый пример HTML кода строки навигации. В этом примере микроразметка «хлебных крошек» Schema.org сделана на 100% правильно. Этот блок взят с сайта студии WebMouse и является рабочим примером.

<ul itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/">
	  <span itemprop="name">Главная</span>
	  <i class="fas fa-angle-right"></i>
	  <meta itemprop="position" content="1">
	</a>
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/uslugi/">
	  <span itemprop="name">Услуги</span>
	  <i class="fas fa-angle-right"></i>
	  <meta itemprop="position" content="2">
	</a>
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/uslugi/katalog/">
	  <span itemprop="name">Каталог услуг</span>
	  <i class="fas fa-angle-right"></i>
	  <meta itemprop="position" content="3">
	</a>
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/uslugi/katalog/specialisty/">
	  <span itemprop="name">Услуги специалистов</span>
	  <i class="fas fa-angle-right"></i>
	  <meta itemprop="position" content="4">
	</a>
  </li>
  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="/uslugi/katalog/specialisty/programmist/" class="no-action-link">
	  <span itemprop="name">Оказание услуг программиста</span>
	  <meta itemprop="position" content="5">
	</a>
  </li>
</ul>

Вы можете прямо сейчас скопировать этот HTML код и вставить в онлайн-валидатор Google для проверки. Результат должен быть такой же, как показан на рисунке ниже.

[нажмите на картинку для увеличения]
Справка: как сохранять фото с сайтов

Данный пример не привязан к CMS, поэтому Вы можете использовать его в качестве образца для сайта на любой платформе. Генерацию нужного HTML кода мы здесь не рассматриваем, так как этот код уже зависит от особенностей конкретной CMS. Это Вы сделаете самостоятельно.

Если у Вас возникли проблемы при микроразметке «хлебных крошек» на сайте, Вы можете обратиться в студию WebMouse. Стоимость работ определяется оценкой и зависит от CMS, а также индивидуальных особенностей сайта.

В заключение хочется отметить ещё две типичные ошибки в микроразметке и самом блоке навигации.

• Уровни навигации начинаются не с главной страницы.
• Не указана позиция элемента itemprop="position"

По поводу последнего пункта стоит заметить, что встречается мнение что он не является обязательным, то есть поисковые боты самостоятельно определяют позицию на основе порядка следования элементов. Наша практика показывает, что это не так. Вы можете проверить это самостоятельно, например, просто исключив блок <meta itemprop="position" content="5"> из предлагаемого образца микроразметки и проверив результат валидатором.

И последнее. В приведённом примере строка навигации представляет собой список <ul>. Это наиболее правильный вариант, так как по сути навигационный блок и является списком. Использовать блоки или иные теги менее правильно и не так удобно.

Если у Вас есть своё мнение и опыт по микроразметке «хлебных крошек» Schema.org, поделитесь ими в комментариях после статьи.