Что такое хлебные крошки в программировании

Компьютерные «Хлебные крошки»

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

Что означает этот термин?

— «Breadcrumb, navigation, breadcrumb trails» или «Хлебные крошки» — все эти термины, на языке программистов, обозначают элемент интерфейса, упрощающий пользователям работу с контентом сайта.Расположением «крошек» формируется удобство возможности использования (юзабилити), простота и доступность работы с ресурсом. Посетитель сайта всегда знает, на каком уровне структуры сайта он находится, понимает — как ориентироваться в его разделах, где и каким образом он получит необходимую информацию. На деле «Хлебные крошки» представляют собою стандартную систему ориентировочных ссылок связывающих главную страницу со всеми разделами, разделы с подразделами, подразделы с конечными информационными блоками.

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

Виды элементов интерфейса в системах навигации

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

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

• Пошаговый (Path breadcrumbs) – сохраняет для пользователя весь путь движения к требуемой информации. Где опора на элементы интерфейса будет зависеть от маршрута движения пользователя к конечной точке. Основной недостаток такой навигации заключается в характере сотрудничества структуры сайта с поисковыми системами. Попадая на конечную страницу через поисковые системы — пользователь не обнаружит «Хлебных крошек», единственная «крошка» будет связывать его только с поисковиком;
• Линейный (Location breadcrumbs) – выводит пользователя на структуру сайта, представленную в виде цепи элементов связывающих основную страницу с искомым разделом (без «крошек» вне тематики запроса);
• — Облачный (Attribute breadcrumbs) – наиболее удобная навигация. Вычленяет наиболее соответствующие запросу категории меток по всей структуре страницы.

Необходимость использования в навигации

Каждый человек, хоть раз искавший информацию в интернете, знает, как важна качественная сторона работы страниц. Грамотно выстроенное «юзабилити» — залог привлекательности и популярности ресурса. Ориентированные на все категории клиента (от «продвинутого юзера» до откровенного «чайника») порталы, даже с узкоспециализированном контентом, будут бить все рекорды посещаемости в своей информационной нише! Именно в этом и заключается основная польза «крошек» в структуре страниц.

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

Расположение вверху удобно и практично, к тому же пользователю сразу ясно в каком направлении начинать поиск!

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

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

Основная составляющая любой такой ссылки — «перелинкованная» сайтом «крошка» связывающая на уровне поискового запроса (какой-либо фразы, понятия, термина, вопроса) информацию, размещенную на сайте, с поисковой системой в которой будет размещен запрос.

Можно с уверенностью говорить о том, что именно «Хлебные крошки» позволяют связывать пользователя и ресурс на просторах виртуального мира!

• Вы здесь:
• Главная
• Интересное
• Разработка сайтов
• Компьютерные «Хлебные крошки»

Правильные хлебные крошки на сайте — что это, пример

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

Например: Главная>Услуги>Создание сайтов>Создание лендинга

Бесплатный вебинар «Сайт за 5 дней». За 5 дней вы БЕСПЛАТНО научитесь создавать сайты:

Создайте свой сайт уже через 5 дней. Бесплатно.

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

Как выглядят хлебные крошки на сайте, пример:

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

Виды хлебных крошек:
• Линейные. Показывают пользователю, в каком месте иерархической структуры сайта он находится.
• Обратные. Используются в основном в онлайн-магазинах. Вместо полной цепочки в «крошках» отображается только кнопка «Назад». В отличие от аналогичной кнопки браузера, эта кнопка сохраняет пользовательские фильтры и настройки.
• Атрибутивные. Формируются на основе параметров и фильтров, которые задает пользователь при поиске той ли иной страницы. Чаще всего такой тип навигации используется в интернет-магазинах, когда посетитель задает фильтрацию каталога по определенным критериям вроде цвета, размера, бренда и т.д. В этом случае хлебные крошки содержат не только ссылки на разделы сайта, но и заданные свойства.
• Хронологические. «Крошки» показывают историю переходов пользователя на сайте.

Разработка SEO-сайтов с пожизненной гарантиейСоздаем невероятные SEO-сайты, оптимизированные по 69 параметрам уже на этапе разработки

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

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

Хлебные крошки выполняют следующие функции:

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

2 Повышают юзабилити сайта Хлебные крошки в отличие от кнопки «Назад» позволяют вернуться сразу на несколько шагов назад, экономя таким образом клики. Чем меньше кликов требуется сделать посетител, чтобы добраться до определенного раздела, тем выше юзабилити сайта.

3 Удобство навигации и юзабилити положительно влияют на поведенческие метрики (глубину просмотра, вовлеченность пользователя), которые поисковики учиитывают при ранжировании сайта.

4 Улучшают вид снипеттов. Сниппет — это небольшой информационный блок, которые показывается вместе с ссылкой в результатах поисках. Если на сайте настроены хлебные крошки, в сниппете вместо трудночитаемого текста ссылки отображается навигационная цепочка. В результате сниппет визуально легче воспринимается, а пользователь сразу может увидеть структуру сайта.

5 Участие в перелинковке. Хлебные крошки участвуют в перелинковке страниц — в связывании страниц ссылками. Чем больше ссылок на страницу, тем выше её вес «в глазах» поисковых роботов.

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

Хлебные крошки создаются с помощью плагинов на CMS, на PHP, JavaScript, CSS. Правильные хлебные крошки должны соответствовать следующим рекомендациям:
• Их не должно быть на главной странице сайта.
• Последний пункт хлебных крошек не должен быть ссылкой, так как страница не может ссылаться сама на себя.
• Ссылки в «крошках» должны быть читаемыми, но не кричащими и не выбиваться из общего стиля оформления страницы.
• «Крошки» должны содержать микроразметку. Микроразметка — это дополнительные теги и атрибуты в HTML, которые помогают поисковым роботам понять смысл содержимого страницы, отдельного элемента или сайта в целом. Это подсказки, которые добавляют в код, чтобы улучшить распознавание контента страницы поисковиками. Если в хлебные крошки добавлена микроразметка, то они отображаются в сниппете Google. Яндекс пока их не распознает.
• Путь в хлебных крошках должны прописываться так, чтобы включать конечную страницу. Если взять для примера интернет-магазин, то цепочка ссылок должна заканчиваться названием страницы товара, а не ссылкой на раздел каталога, в котором этот товар находится.

Хлебные крошки: что это такое, зачем они нужны, какими бывают и как создать

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

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

Зачем нужны «хлебные крошки»

«Хлебные крошки» воздействуют на usability и SEO:

1. Отражают структуру сайта.
2. Указывают клиенту, в какой раздел он зашёл. Чем логичнее расположены страницы, тем больше вовлечённость. Для компании — это значит увеличение трафика и продаж.
3. Оптимизируют поведенческие показатели.
4. Bread crumbs с микроразметкой способствуют улучшению сниппета в поисковой системе.

Преимущества «хлебных крошек»

Удобство для клиентов

С навигационной цепочкой проще находить нужную информацию на сайте. Пользователям понятно, как перейти в иной раздел или назад.

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

Также «хлебные крошки» позволяют перейти в начало, не нажимая «Назад». Если клиент поставит фильтр (по стоимости, бренду, цвету и т. д.), то, возвращаясь с помощью браузера, он потеряет эти настройки. Поэтому на сайте размещается кнопка «Назад». Используя её, клиент вернётся на прошлую страницу и сохранит выбранные характеристики.

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

«Хлебные крошки» — одна из моделей веб-навигации, поэтому её полезно использовать для качественной внутренней перелинковки.

Успешный сниппет и увеличение позиций

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

Пользователи могут открывать различные разделы через сниппет в поиске. Эта функция оптимизирует поведенческие факторы, а организация дополнительно показывает иные разделы своего сайта.

Какими бывают «хлебные крошки»

Bread crumbs бывают нескольких типов. Выбор зависит от структуры веб-ресурса.

Линейный тип

Самый популярный вариант, где демонстрируется цепочка от главной страницы до нужной.

Большинство сайтов имеют много уровней вложенности, поэтому они урезают навигацию. В таком случае начало цепочки — раздел или подраздел.

Функция «Назад»

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

Объединение предыдущих типов

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

Динамический тип

Навигация формируется, исходя из пути потребителя. Такой способ часто применяется в онлайн-магазинах, где продукция находится сразу в нескольких разделах.

Навигация с появляющимся меню

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

Атрибутивный тип

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

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

Как создать «хлебные крошки»

Существует несколько способов создания bread crumbs:

1. Применение стандартных компонентов или модулей CMS.
2. Использование плагинов.
3. Добавление навигации через PHP или CSS.

Правила, о которых нужно знать:

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

• Не делайте заключительный элемент веб-навигации кликабельным.
• Размещайте «хлебные крошки» всегда в одном месте.
• Применяйте bread crumbs по необходимости. Они добавляются для комфортного использования ресурса. На одностраничных сайтах «хлебные крошки» не нужны.
• Создайте микроразметку для навигации через микроформаты Microdata и RDFa. Так они логично и содержательно отобразятся в поиске.
• Посмотрите правильность разметки через поисковые системы (например, валидатор микроразметки от «Яндекс.Вебмастер»).

Ошибки при создании хлебных крошек

Расположение навигации в нижней области сайта. Посетители могут просто не увидеть её.

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

Заключение

«Хлебные крошки» — это навигационное меню, улучшающее usability и SEO. Благодаря им клиенты легко передвигаются по веб-странице и находят необходимый товар.

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

Почему хлебные крошки полезны для SEO

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

Что такое хлебные крошки и какая у них структура

Хлебные крошки — дословный перевод английского термина breadcrumbs. Такое название прижилось для навигационной цепочки, размещенной в верхней части страницы сайта. Обычно на этой цепочке отображается путь от главной страницы до той, на которой сейчас находится пользователь. Стандартно, выглядит это так: Главная страница — Раздел — Подраздел — Страница . Но встречаются и другие варианты. Динамические хлебные крошки. Это когда навигационная цепочка отображает вложенность страниц в зависимости от пути пользователя, а не от иерархии страниц. Например, на вашем сайте есть разделы с товарами «Подарки для парня» и «Подарки для друга». Носки могут одновременно находиться в двух разделах, поэтому навигационная цепочка для страницы с этим товаром может выглядеть по-разному — в зависимости от того, как на нее попал пользователь. Хлебные крошки с выпадающим списком. Это навигационная цепочка с более расширенным функционалом. У каждого раздела списка при наведении отображается список смежных разделов. То есть пользователь может не просто вернуться на один уровень выше, но и перейти в смежный раздел любой категории. Также встречаются варианты, когда слишком длинные хлебные крошки сокращают, удаляя очевидные подразделы, или же, наоборот, добавляют в них дополнительный элемент — например, с брендом товара. Еще можно столкнуться с примерами, когда навигационная цепочка начинается не с главной страницы сайта, а с каталога. Если вы сейчас задумались над тем, а надо ли хлебные крошки на вашем сайте, прочитайте следующий раздел. Спойлер: хлебные крошки нужны не только большим интернет-магазинам.

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

Как вы уже поняли, хлебные крошки помогают с навигацией на сайтах со сложной структурой и множеством категорий. Обычно первыми на ум приходят большие интернет-магазины, но для информационных порталов, форумов, блогов, корпоративных ресурсов такая навигационная цепочка тоже нужна. Главный критерий — не вид ресурса, а вложенность его страниц. Если на вашем сайте линейная структура с максимум двумя уровнями вложенности, в хлебных крошках нет потребности. Но если уровней вложенности больше двух, то без крошек не обойтись. Иначе пользователям будет сложно отследить свой путь до страницы и красивых сниппетов с навигацией вам тоже не видать. Ведь польза хлебных крошек не ограничивается только удобством для пользователей — давайте рассмотрим все плюшки, которые они дают.

3 причины полюбить хлебные крошки

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

1. Улучшение юзабилити

С хлебными крошками на сайте легче ориентироваться. Пользователям всегда видно, где они находятся, как им попасть обратно или на другой раздел ресурса. Особенно, если на страницу товара посетитель попал по ссылке или прямо из выдачи. Рассмотрим пример. Вы ищите хлебопечку, но модель, которую вы искали, вам не понравилась. Что делать? Конечно же, посмотреть другие хлебопечки, а сделать это можно, воспользовавшись хлебными крошками на сайте. Также с помощью хлебных крошек можно в один клик переместиться на более высокий уровень вложенности, не используя кнопку браузера «Назад». Ведь если пользователь сайта на какой-либо странице выставил на странице фильтры (например, по мощности товара или цене), то возвращаясь через браузер, он эти настройки может потерять. Чтобы этого не произошло, интернет-магазины размещают кнопку «Назад». Последовательно нажимая на нее, посетитель может возвратиться на страницы, которые он ранее посещал, не потеряв при этом выбранные настройки фильтров.

2. Качественная внутренняя перелинковка

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

3. Прокачанный сниппет и рост позиций

Если на вашем сайте правильно размечены хлебные крошки, то в выдаче Гугла можно получить сниппеты с навигационными цепочками. Интересно, что навигационная цепочка для вашего сниппета может меняться в соответствии с поисковым запросом пользователя. Google Поиск использует разметку хлебных крошек, чтобы определить категорию контента применительно к поисковому запросу. Посмотреть, как выглядел сниппет в выдаче за разные даты, можно в SE Ranking. Для этого нужно добавить свой сайт и интересующие ключевые слова в проект. Все данные про сниппет распределены по поисковым системам и датам, хранятся в разделе «Аналитика и трафик» в течение 30 дней. Благодаря сниппету с навигационной цепочкой пользователи могут переходить на разные разделы вашего сайта прямо из выдачи, просто кликая на нужный раздел. При этом улучшаются поведенческие факторы, а вы дополнительно демонстрируете другие разделы вашего веб-ресурса прямо в выдаче. Если смотреть еще шире, то улучшение поведенческих факторов и правильная перелинковка влекут за собой более качественное ранжирование страниц сайта в поисковых системах. Чтобы вы смогли оценить все преимущества хлебных крошек, нужно добавить их на сайт по всем правилам и использовать соответствующую микроразметку. Давайте разбираться, как это сделать для самых популярных CMS и какая микроразметка нужна.

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

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

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

• Хлебные крошки лучше размещать в видимом и привычном для посетителя месте . Стандартное местоположение — под структурным меню веб-ресурса. Но встречаются и такие примеры, когда хлебные крошки дублируются внизу страницы для удобства пользования (нажав много раз «Показать еще», пользователю может быть проблемно быстро вернуться вверх страницы).

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

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

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

Для оформления хлебных крошек рекомендуется использовать такие форматы микроразметки — Microdata и RDFa .

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

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

Как добавить хлебные крошки для WordPress

Можно использовать специальные плагины (Breadcrumb NavXT, SEO by Yoast) или настроить хлебные крошки самостоятельно.

С плагином

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

Для этого скачиваем плагин (бесплатно, но должна быть версия не ниже WordPress 3.0 и хост должен поддерживать PHP5).

Добавить код хлебных крошек нужно в файл single.php (для всех записей), файл page.php (для статических страниц), category.php (для всех рубрик) или в файл header.php (чтобы показать везде).

Пример кода для добавления:

  if(function_exists('bcn_display'))   bcn_display(); > ?> 

Главная — Название раздела — Подраздел