Для чего нужны хлебные крошки. Навигационная цепочка или хлебные крошки. С помощью шаблона

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

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

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

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

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

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

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

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

Виды хлебных крошек

Существует три основных тип хлебных крошек. Давайте посмотрим на них поближе.

1.Основанные на местоположении.

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

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

Пример использования

Главная страница -> Раздел сайта -> Запись из раздела

Главная страница -> Архив публикаций -> Запись из раздела

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

Эта часть навигации создана для удобства пользователя, который после прочтения статьи может посетить категорию этой статьи, чтобы посетить подобные страницы, или вернуться в корневой документ – на главную страницу сайта. Так как большинство посетителей приходят из поисковых систем, навигация такого рода поможет ему разобраться в структуре сайта и переходить на страницы меньшего уровня вложенности (например, рубрики или архив записей). Это повышает пользовательские факторы, позволяет дольше задержать посетителя на сайте и является частью внутренней перелинковки (хотя, во многих случаях breadcrumbs помещаются в теги или их ссылкам даются значения rel=”nofollow”. В таком случае, они размещаются исключительно для пользователя).

Где используются хлебные крошки

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

Все же, часто хлебные крошки используются на:

  • Интернет-магазинах.
  • Форумах.
  • Сайтах со скудной навигацией (когда блок навигации не располагает всеми ссылками на разделы или находится в футере).
  • Сайтах без карты.

Карта сайта часто заменяет breadcrumbs, если она правильно разработана (имеется в виду html-карта, а не файл sitemap.xml для поисковиков). Такая страница должна иметь ссылки на все главные разделы, что позволит пользователю с легкостью переходить по ним и искать нужную информацию.

На форумах и интернет-магазинах хлебные крошки – обязательный атрибут.

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

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

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

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

Вывод хлебных крошек может проводиться с помощью дополнений к популярным ЦМС (модуль для Друпал, плагин для Вордпресс, в Joomla есть встроенная возможность вывода пути к странице), на сайте с авторским php вставляется блоком через функции include или require (require-once). На популярных ЦМС для форумов (phpBB и прочее) эти функции или уже установлены, или могут быть установлены через соответственные расширения.

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

Навигационная цепочка: что это такое?

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

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

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

«Хлебные крошки» на сайтах

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

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

Примеры использования хлебных крошек

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

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

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

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

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

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

Основные функции и преимущества использования навигации на сайте

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

Применение навигации имеет следующее назначение:

  1. Оптимизация внутренней структуры сайта.
  2. Связывание отдельных страниц ресурса ссылками (наращивание внутренней ссылочной массы).
  3. «Помощь» поисковым роботам в «исследовании» веб-площадки. Так, «хлебные крошки» выполняют те же функции, что и карта сайта и Robots.txt, дополняют данные элементы.
  4. Положительно влияет на число кликов на рекламные ссылки и баннеры за счет того, что навигационная цепочка имеет связь с Uniform Resource Locator (URL) при выдаче.
  5. Повышает релевантность - уровень соответствия результатов поиска ожиданиям поиска.

Почему успешным ресурсам не обойтись без навигации?

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

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

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

  1. Навигационная цепочка может быть основана на структуре, что является самым распространенным приемом. Суть размещения «хлебных крошек» в этом случае заключается в отображении иерархической системы сайта. Ссылки не только вернут пользователя в раздел, откуда тот перешел на запись или карточку товара, но также система предложит варианты «Также вам может быть интересно» или «Подобные товары».
  2. Второй вариант: «Хлебные крошки», основанные на истории перемещений посетителя по страницам веб-ресурса, которые функционируют через ссылку «Назад», менее эффективны. Такая навигационная цепочка не позволяет ознакомиться со всем объемом предложений, а значит, косвенно снижает конверсию.

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

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

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

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

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

Во-первых, необходимо открыть файл functions.php, который расположен в папке используемой темы. Перед изменениями необходимо сделать резервную копию файла, чтобы в случае ошибки не иметь дополнительных проблем, а просто сделать бэкап.

Далее в файл следует вставить код. Еще одна часть кода вставляется туда, где в конечном итоге должны быть расположены «хлебные крошки» на сайте. Как правило, это конструктивные элементы шаблона сайта - файл index.php или single.php. В заключение можно оформить навигационную цепочку особым образом, настроить стили, в чем помогут элементарные знания CSS.

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

Навигационная цепочка для CMS Joomla

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

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

«Хлебные крошки» с помощью плагина Breadcrumb NavXT для wordpress

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

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