Навигационная цепочка известна многим под названием «хлебные крошки». Она указывает путь, позволяющий найти каждую страницу на сайте. Для удобства стоит добавить в Breadcrumbs семантическую разметку. Рассмотрим, как это сделать.
Зачем нужна разметка
- Первая причина – упрощенная индексация самого сайта, ускорение ее выполнения.
- Второй важный момент – «объяснение» для поисковых роботов.
- Третий пункт – сниппет, появляющийся в выдаче поисковика. Разметка станет своеобразной дополнительной информацией, которая позволит конечному пользователю не просто перейти на нужную страницу, но и проследить всю цепочку вложений. Это значительно упрощает пользование.
- Еще один актуальный момент – построение роботом правильной структуры самого сайта, то есть выделения главной страницы, категории и непосредственно записи.
- Зачастую в Breadcrumbs включаются ключевые слова. В этом случае микроразметка позволяет «сообщить» поисковым роботам, что это не просто перечень ключей, часто воспринимаемый в качестве спама, а непосредственно «хлебные крошки» – цепочка навигации от главной страницы к записи.
Использование семантической разметки позволяет справиться с рядом важных задач, которые необходимы для оптимизации сайта.
Однако здесь возникает небольшая проблема. Дело в том, что Google корректно работает со всеми видами разметок, в то время как Яндекс на текущий момент подобную микроразметку не понимает. Впрочем, это не влияет на отображение Breadcrumbs в его поисковой выдаче.
Добавление микроразметки
Проще всего понять алгоритм действий на примере. Возьмем запись со следующим путем:
Главная – Принципы оптимизации (в нашем случае это категория) – Хлебные крошки (название записи).
- Сначала надо дописать itemscope=”” itemtype=”” в div, который содержит Breadcrumbs. Этим вы укажете, что блок описывает конкретный элемент (например, навигационный).
- Далее каждую ссылку надо «обрамить» специальным тегом span (span ссылка /span). Прописанный здесь же itemprop=»itemListElement» обозначает отдельные пункты в перечне элементов.
- Добавьте к ссылкам параметр itemprop, который должен иметь значение item.
- Следующий шаг – добавление к тесту ссылки все того же тега span (не забудьте «закрыть» его в конце, то есть прописать с закрывающим слешем). К этому тегу необходимо добавить и параметр itemprop, который должен иметь значение «name» (то есть указывать на то, что это – имя ссылки).
- Далее, сразу за самой ссылкой, добавьте еще один тег – meta. Ему «потребуется» параметр content.
Таким образом формируется один из элементов хлебных крошек. По аналогии размечаются и остальные пункты, чтобы получилась полноценная микроразметка. Обратите внимание, что при этом сами хлебные крошки не теряют своего значения, поскольку всего лишь дополняются и размечаются актуальными микроданными.
