О микроразметке навигационной цепочки

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

Зачем нужна разметка

  1. Первая причина – упрощенная индексация самого сайта, ускорение ее выполнения.
  2. Второй важный момент – «объяснение» для поисковых роботов.
  3. Третий пункт – сниппет, появляющийся в выдаче поисковика. Разметка станет своеобразной дополнительной информацией, которая позволит конечному пользователю не просто перейти на нужную страницу, но и проследить всю цепочку вложений. Это значительно упрощает пользование.
  4. Еще один актуальный момент – построение роботом правильной структуры самого сайта, то есть выделения главной страницы, категории и непосредственно записи.
  5. Зачастую в Breadcrumbs включаются ключевые слова. В этом случае микроразметка позволяет «сообщить» поисковым роботам, что это не просто перечень ключей, часто воспринимаемый в качестве спама, а непосредственно «хлебные крошки» – цепочка навигации от главной страницы к записи.

Использование семантической разметки позволяет справиться с рядом важных задач, которые необходимы для оптимизации сайта.

Однако здесь возникает небольшая проблема. Дело в том, что Google корректно работает со всеми видами разметок, в то время как Яндекс на текущий момент подобную микроразметку не понимает. Впрочем, это не влияет на отображение Breadcrumbs в его поисковой выдаче.

Добавление микроразметки

Проще всего понять алгоритм действий на примере. Возьмем запись со следующим путем:

Главная – Принципы оптимизации (в нашем случае это категория) – Хлебные крошки (название записи).

  1. Сначала надо дописать itemscope=”” itemtype=”” в div, который содержит Breadcrumbs. Этим вы укажете, что блок описывает конкретный элемент (например, навигационный).
  2. Далее каждую ссылку надо «обрамить» специальным тегом span (span ссылка /span). Прописанный здесь же itemprop="itemListElement" обозначает отдельные пункты в перечне элементов.
  3. Добавьте к ссылкам параметр itemprop, который должен иметь значение item.
  4. Следующий шаг – добавление к тесту ссылки все того же тега span (не забудьте «закрыть» его в конце, то есть прописать с закрывающим слешем). К этому тегу необходимо добавить и параметр itemprop, который должен иметь значение «name» (то есть указывать на то, что это – имя ссылки).
  5. Далее, сразу за самой ссылкой, добавьте еще один тег – meta. Ему «потребуется» параметр content.

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

 

Добавить комментарий