Правильные хлебные крошки на сайт с микроразметкой Schema

Давайте для начала разберемся — что это такое — хлебные крошки на сайте и зачем они нужны.

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

Влияние хлебных крошек на SEO

Со временем SEO-оптимизаторы заметили, что данный блок ссылок положительно влияет на продвижение ресурса. И работает это вот почему:

1. Внутренняя перелинковка

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

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

2. Поведенческие факторы

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

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

Микроразметка позволяет поисковым системам точнее определить хлебные крошки и даже бонусом добавить их в свою выдачу. Выглядеть это будет примерно так:

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

Полная версия разметки одной ссылки выглядит следующим образом:

<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
 <a itemprop="item" href="http://rumbi.ru">
 <span itemprop="name">Главная</span>
 <meta itemprop="position" content="1">
 </a>
</span>

Теперь рассмотрим, что это такое.

Первое, что нам необходимо сделать — это обернуть каждую ссылку в тег <span> и в самом теге прописать
itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»

<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
ССЫЛКА
</span>

Этот тег у нас остается по умолчанию. В нем мы говорим поисковикам — что вот это разметка schema и элемент этой разметки называется itemListElement. Данная конструкция используется во всех ссылках.

Следующее, что нужно сделать — это в ссылку (тег <a>) добавить значение itemprop=»item».
Т.е. мы указываем, что эта ссылка является частью разметки и ее надо использовать.

<a itemprop="item" href="http://rumbi.ru">

Далее — размечаем сам текст ссылки. Для этого достаточно точно так же обернуть анкор (текст ссылки) в тег <span> и прописать в нем itemprop=»name»

<span itemprop="name">Главная</span>

И последнее — указываем позицию ссылку, или, проще говоря, уровень вложенности. Главная у нас — это первый уровень вложенности, поэтому добавляем:

 <meta itemprop="position" content="1">

Соответственно, если бы у нас был второй уровень вложенности, надо было бы написать content=»2″.

Вот, собственно, и все! Разметив каждую ссылку таким образом Вы получите красивые ссылки в поисковых системах, что несомненно повлияет на количество трафика Вашего сайта 🙂