Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Что такое хлебные крошки на сайте: Хлебные крошки на сайте — полезный элемент навигации и SEO

Содержание

Хлебные крошки – что это и зачем необходимы на сайте?

#Оптимизация сайта #Хлебные крошки

#107

Февраль’19

1

Февраль’19

1

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

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

Хлебные крошки выполняют ряд важных функций:

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

Как сделать правильные хлебные крошки?

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

  • Хлебные крошки должны содержать все промежуточные страницы.
  • Если в хлебных крошках отображается текущая страница последним элементом, она не должна содержать ссылку сама на себя.
    (SEO > SEO блиц > Хлебные крошки)
  • Для отображения навигационной цепочки на странице результатов поиска Google необходимо выполнить микроразметку хлебных крошек.

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

Микроразметка осуществляется путем добавления специальных HTML-тегов, которые сообщают поисковым роботам к какому типу контента относится элемент.

Поддерживаемые Google форматы микроразметки:

  • Microdata;
  • RDFa;
  • JSON-LD.

Пример микроразметки хлебных крошек в формате Microdata для страницы «Кружки», имеющую навигационную цепочку из ссылок «Главная > Каталог > Столовая > Чай и кофе»:

<ol itemscope itemtype=»http://schema.org/BreadcrumbList»>

<li itemprop=»itemListElement» itemscope
itemtype=»http://schema. org/ListItem»>
<a itemprop=»item» href=»/»>
<span itemprop=»name»>Главная</span></a>
<meta itemprop=»position» content=»1″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog/»>
<span itemprop=»name»>Каталог</span></a>
<meta itemprop=»position» content=»2″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog/stolovaya/»>
<span itemprop=»name»>Столовая</span></a>
<meta itemprop=»position» content=»3″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=» /catalog/stolovaya/chay-i-kofe/»>
<span itemprop=»name»>Чай и кофе</span></a>
<meta itemprop=»position» content=»4″ />
</li>
</ol>

itemscope itemtype=http://schema. org/BreadcrumbList говорит о том, что элемент относится к хлебным крошкам и состоит из цепочки связанных веб страниц.

Далее каждому элементу навигации добавляем следующие атрибуты:

  • itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem — означает , что элемент относится к отдельному пункту списка;
  • itemprop=»item» — для разметки ссылки;
  • itemprop=»name»> — у тега с названием хлебной крошки;
  • В конце блока хлебной крошки добавляем <meta itemprop=»position» content=»%number%» />, который определяет позицию элемента в навигационной цепочке.

Существует известная проблема в том, что валидатор микроразметки выдает предупреждение, когда в коде нет атрибута itemprop=»item» у последнего элемента хлебной крошки. Это возникает из-за отсутствия ссылки у данного элемента.

Но это не мешает поисковой системе Google корректно выстраивать цепочку ссылок в сниппете.

Если же вас смущает это предупреждение, то можно не размечать последний элемент (как у нас в примере), либо же использовать другие способы микроразметки.

Похожее

Контент Параметры

Использование скрытого контента на сайте

Факторы ранжирования Поведенческие

Правильное оформление форм на сайте

Контент Параметры

#140

Использование скрытого контента на сайте

Август’19

1703

1

Факторы ранжирования Поведенческие

#139

Правильное оформление форм на сайте

Август’19

3337

1

Факторы ранжирования Поведенческие

#138

Оформление 404 страницы

Август’19

1821

2

Общие вопросы Продвижение сайта

#137

Как продвигать сайт визитку?

Август’19

1951

3

Оптимизация сайта Внутренняя перелинковка

#136

Поиск 404 ошибок на сайте

Август’19

2022

2

Общие вопросы Продвижение сайта

#135

Почему у сайта разные позиции?

Июль’19

2707

Оптимизация сайта Внутренняя перелинковка

#134

Циклические ссылки на сайте

Июль’19

9922

Оптимизация сайта Индексация

#133

Атрибут rel=canonical

Май’23

13312

23

Факторы ранжирования Коммерческие

#132

Как правильно оформить страницу «Контакты»

Июль’19

2957

10

Общие вопросы Продвижение сайта

#131

Поиск поддоменов сайта

Июль’19

2719

10

Общие вопросы Продвижение сайта

#130

Как вирусы влияют на позиции сайта

Июль’19

2967

11

Ключевые запросы Виды запросов

#129

Каннибализация запросов

Июль’19

8832

10

Системы аналитики Яндекс Метрика

#128

Фильтрация визитов роботов на сайт

Июль’19

9754

13

Общие вопросы Продвижение сайта

#127

Неактуальные страницы товаров на сайте – что делать

Июль’19

2868

12

Системы аналитики Google Analytics

#126

(not set) и (not provided) в отчетах Google Analytics

Июль’19

4343

12

Зачем нужны хлебные крошки на сайте? Как настроить блок хлебных крошек, чтобы им было удобно пользоваться?

Главная

Блог

SEO

Зачем нужны хлебные крошки на сайте

Лебедев Антон

SEO-специалист агентства RACURS

 8049

19. 09.2019

Содержание:

  • Какие задачи решают хлебные крошки
  • Стандартные рекомендации для блока хлебных крошек
  • Нестандартные решения, используемые в блоке хлебных крошек
  • Частые вопросы
  • Заключение

Хлебные крошки (breadcrumbs) — дополнительный навигационный элемент, который значительно упрощает перемещение пользователей по сайту с большим количеством разделов, подразделов и со значительным уровнем вложенности страниц.

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

Главная страница – категория – подкатегория – … текущая страница


Как правило, блок хлебных крошек располагается вверху страницы, сразу после шапки сайта и основного навигационного меню.

Какие задачи решают хлебные крошки

Хлебные крошки используются на сайте как для увеличения пользовательской вовлеченности (юзабилити), так и для улучшения ранжирования в поисковых системах и представления сниппетов в результатах поисковой выдачи:

  1. Отображение уровня вложенности и пути текущей страницы — пользователь видит и понимает, на какой странице и в каком разделе он находится;
  2. Упрощение навигации по сайту, в случае если необходимо перейти на страницу с уровнем вложенности выше. Например, если пользователю потребуется перейти с карточки товара на страницу категории, вместо поиска нужной ссылки в основном меню сайта (зачастую довольно запутанному), достаточно кликнуть на соответствующую ссылку в блоке хлебных крошек;
  3. Увеличение пользовательской вовлеченности (увеличивается глубина просмотра сайта, снижается показатель отказов), за счет упрощения навигации по сайту;
  4. Улучшение поведенческих факторов влечет за собой более качественное ранжирование страниц сайта в поисковых системах;
  5. Обеспечение корректной перелинковки и распределения ссылочного веса между страницами сайта;
  6. При использовании микроразметки хлебных крошек по словарю schema. o, отображение в спиппетах Google корректной навигационной цепочки.


Стандартные рекомендации для блока хлебных крошек

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

  1. Не отображайте блок хлебных крошек на главной странице;
  2. Хлебные крошки должны быть расположены в одном и том же месте на всех страницах сайта и иметь одинаковый внешний вид;
  3. Отображайте в последнем шаге хлебных крошек текущую страницу, если при этом блок хлебных крошек не будет занимать много пространства и вынуждать скрывать промежуточные шаги хлебных крошек. В противном случае – скрывайте последний шаг;
  4. При указании текущей страницы в качестве последнего шага хлебных крошек, этот элемент должен быть некликабельным. Размещение ссылки со страницы на саму себя не только может запутать пользователей, но и некорректно с точки зрения поисковой оптимизации. В тоже время, отсутствие ссылки в микроразметке хлебных крошек, будет воспринято валидаторами как ошибка, а навигационная цепочка в сниппете Google не будет сформирована:


    Для устранения ошибки, необходимо в микроразметке последнего шага указать ссылку на соответствующую страницу c помощью атрибута content=”ссылка_на_страницу”, размещенного в теге <div itemprop=»item» title=» «>.


    Пример некорректной микроразметки последнего шага хлебных крошек


    Пример корректной микроразметки

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


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


    Кликнув по ней, пользователь должен попадать на страницу категории с примененными параметрами фильтрации или сортировки товаров, а не на страницу уровнем вложенности выше.

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

    Например, вместо навигационной цепочки:

    «Главная – каталог – холодильники – холодильники двухкамерные – холодильники Bosch двухкамерные – холодильник Bosch KGN39VL17R»,

    рекомендуем использовать вариант:

    «Главная – каталог – холодильники – двухкамерные – Bosch – KGN39VL17R».

Нестандартные решения, используемые в блоке хлебных крошек

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

Однако функционал и внешний вид блока может быть изменен в зависимости от особенностей сайта. Например:

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

Частые вопросы

Можно ли размещать хлебные крошки внизу страницы?

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

Нужно ли размещать блок хлебных крошек, если сайт состоит из небольшого количества страниц?

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

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

Нужны ли хлебные крошки в мобильной версии сайта?

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

Как выводить хлебные крошки для страницы товара, который размещен в разных разделах?

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

Заключение

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

Комментарии

Александр Александр 18.11.2019 18:11:49

Здравствуйте,

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

Рекомендуемые статьи

  • Нужные тексты на сайте
  • Заголовок last-modified
  • Сезонность спроса

Оглавление

На весь экран