Что такое хлебные крошки и как сделать их на сайте

Блог / Экспертиза / Почему хлебные крошки полезны для SEO

Хлебные крошки — один из видов навигации сайта.

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

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

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

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

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

Обычно на этой цепочке отображается путь от главной страницы до той, на которой сейчас находится пользователь. Стандартно, выглядит это так: Главная страница — Раздел — Подраздел — Страница. 

Но встречаются и другие варианты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Узнать детальнее про внутреннюю перелинковку и проверить ее качество можно с помощью инструментов SE Ranking. 

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

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

Какими должны быть хлебные крошки и как их добавить на сайт — Serpstat Blog

ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — ССЫЛКИ

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

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

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

Атрибутивные хлебные крошки

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

К такому выводу пришел Baymard Institute — институт, изучающий веб-юзабилити. UX-дизайнеры проанализировали 50 крупнейших интернет-магазинов и обнаружили, что 45% из них используют только один тип крошек, а 23% — вообще не имеют подобной навигации, теряя потенциальных клиентов.

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

Комбинированные хлебные крошки

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

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

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

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

Строка хлебных крошек на сайте

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

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

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

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

В большинстве CMS создать хлебные крошки SEO специалисты могут несколькими способами. Редактированием кода, использованием плагинов или интуитивной настройкой с помощью внутреннего функционала.

В Битрикс хлебные крошки вставляются через компонент bitrix:breadcrumb, в Joomla и OpenCart — с помощью модулей, в WordPress — с помощью различных плагинов, например, Yoast Seo. Для примера разберемся, как настроить хлебные крошки WordPress.

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

Самый удобный плагин хлебных крошек в WordPress — плагин Breadcrumb NavXT. Он скачивается в панели управления WordPress.

Чтобы Breadcrumb NavXT заработал после установки и активации, необходимо вставить код вызова плагина в нужные шаблоны WordPress:

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

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

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

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

Настройка через код не настолько визуализирована и проста, не все доступные в сети коды актуальны, корректно работают и регулярно обновляются.

Если вы решили воспользоваться таким способом, при создании хлебных крошек можно ориентироваться на этот пример кода, который также содержит стили CSS. Для проверки созданного кода используйте валидатор хлебных крошек, например, сервис Schema.org.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А вот в интернет-магазинах и форумах без хлебных крошек никуда.

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

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

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

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

Динамические хлебные крошки

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

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

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

Хлебные крошки с выпадающим списком

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

Пример ниже показывает работу хлебных крошек с выпадающим списком.

Обратные хлебные крошки

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

Основные функции хлебных крошек

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

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

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

Красивое представление сниппета в поиске

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

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

Доброго времени суток ????

Сегодня мы поговорим о том, как сделать «хлебные крошки» на PHP своими руками.

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

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

Итак, поехали ????

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

Сразу хочу сказать, что это не то, о чём подумало большинство людей, не связанных с веб-программированием ????

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

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

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

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

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

• Ухх… вот это я завернул ???? Даже самому стало слегка не по себе от своих заумностей ????
• Но, как ни описывай «хлебные крошки», всё равно лучше один раз увидеть, чем сто раз услышать.
• Так выглядит навигационная цепочка на данном сайте. А вот так выглядят «хлебные крошки» крупнейшего Интернет-магазина России OZON:
• Как видите, несмотря на различие в назначении ресурсов, навигационные меню у нас одинаковы.
• Отличия заключаются только в цвете (тут уже кому что нравится) и принципе организации «хлебных крошек» — у меня они заканчиваются заголовком текущей страницы, а у OZON они состоят только лишь из ссылок на родительские категории.
• Но, несмотря на эти мелочи, предназначение у них одинаково – предоставление пользователям ссылок на разделы, предшествующие текущей странице, чтобы можно было без труда попасть в нужное место, вплоть до главной страницы.

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

1. Но, неправильно думать, что навигационные цепочки применяются исключительно в веб-разработке.
2. Кроме сайтов, данный элемент навигации существует также и в операционных системах (Windows, начиная с Vista), а также в различных файловых менеджерах (всем известный Total Commander, например, который позаимствовал эту фичу у Windows Vista Explorer).
3. Вот так, например, выглядят «хлебные крошки» в Windows 7:

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

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

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

Я сам, когда первый раз услышал данное определение, никак не мог понять, что же мне хотят сказать? О каких ещё крошках мне рассказывают? Даже малейшего предположения не возникло ????

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

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

Так что либо создатель термина «хлебные крошки» посчитал его более благозвучным (на английском звучит как «breadcrumbs»), либо он обладал весьма своеобразным чувством юмора ????

Нам же остаётся только принимать это как факт.

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

Как следует из материала выше – всем веб-мастерам, у которых на сайте больше 2 уровней вложенности (раздел/статья или категория/товар), и кто не безразличен к позициям своего творения в поисковой выдаче.

При этом совершенно не важно, какой у вас тип сайта. Также не важна платформа.

• На чём бы ни был разработан ваш сайт – на WordPress, Joomla, ModX, OpenCart, на базе различных фреймворков (Yii, Laravel, Symfony, Zend) или вообще на «чистых» языках – всем вам без «хлебных крошек» не обойтись.
• Так же не важен и язык бэкэнда вашего сайта, на котором, в большинстве случаев, breadcrumbs будут разрабатываться.
• Кстати, раз уж мы завели разговор о CMS и фреймворках, следует сказать, что практически для каждой платформы уже существует целый набор готовых решений в виде плагинов и модулей, реализующих функционал «хлебных крошек».
• Я мог бы посвятить этому отдельные статьи (возможно, что в будущем я на это и решусь), но для начала я решил познакомить вас с универсальным вариантом, который подойдёт для большинства площадок.

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

1. Поэтому рассмотренный пример и подойдёт для большинства, а не для всех сайтов, ведь помимо PHP никто не мешает вам писать сайты на Java, Python, Ruby и прочих языках бэкэнда.
2. Но алгоритм, который используется при построении «хлебных крошек», всё равно будет неизменным.
3. Вот к нему-то мы наконец и переходим.

Создание «хлебных крошек» на PHP — алгоритм

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

Как правило, указание категорий содержится в самом url текущей страницы. Рассмотрим на примере данного сайта.

Счётчик просмотров с AdBlock своими руками

Данный url страницы со статьёй состоит из нескольких частей, разделённых слэшами («/»):

1. Корень сайта (cccp-blog.com)
2. Категория сайта (blogosfera)
3. Объект категории, в нашем случае статья (schyotchik-prosmotrov-s-adblock-svoimi-rukami)

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

1. Получаем url текущей страницы;
2. Парсим его (разбираем на части);
3. Для каждой части задаём название элемента «хлебных крошек» и составляем для неё url;
4. Записываем название элементов и их url в отдельную конструкцию (массив) для передачи в шаблон;
5. Передаём полученные данные в шаблон и отображаем их там.

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

Единственный нюанс – принципы формирования url на различных площадках отличаются, но об этом мы поговорим при реализации нашего алгоритма формирования «хлебных крошек» на языке PHP.

Делаем «хлебные крошки» на PHP – постановка задачи

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

   corp»

4. Структура нашего сайта будет следующая:

Название страницы	Url
Главная страница	site.corp/
О нас	site.corp/about
Услуги	site.corp/services
Блог	site.corp/blog
Контакты	site.corp/contacts

• Естественно, ссылки на каждую страницу будут доступны в главном меню сайта. В итоге, шапка получилась следующая:
• Как раз в блоке с заголовком страницы мы и будем выводить наши «хлебные крошки».
• По сути, для сайта-визитки компании больше ничего и не нужно, но в таком случае «хлебные крошки» будут содержать одну-единственную ссылку на главную страницу, что не продемонстрирует все возможности нашего кода ????
• Поэтому, с целью увеличения количества уровней иерархии нашего сайта для дальнейшего их отображения в «хлебных крошках» я решил добавить ещё две страницы, ссылки на которые будут доступны на странице «Услуги»:

Название страницы	Url
Наши работы	site.corp/services/portfolio
Цены	site.corp/services/prices

1. Итак, начальные данные мы описали.
2. Постановка задачи будет максимально проста – необходимо сделать «хлебные крошки» на сайте, которые будут выводиться на каждой странице под её заголовком.
3. Теперь, непосредственно сам код.
4. Сразу хочу оговориться, что наш код «хлебных крошек» будет состоять из двух частей: формирования массива с названиями элементов и их url, а также кода вывода полученной структуры на странице сайта.
5. Код с логикой формирования «крошек» должен быть доступным на всех страницах сайта, поэтому разметить его нужно будет в контроллере, отвечающем за хэдер сайта (при условии, что у вас MVC-CMS или фреймворк) либо в файле с кодом, который будет вызываться при заходе на каждую страницу.

Только не размещайте его в шаблоне сайта – файле, содержащем html-код его страниц, т.к. это крайне нежелательно с точки зрения чистоты кода.

Формирования массива «хлебных крошек» на PHP

Приступим к написанию кода, формирующего наш массив с «хлебными крошками».

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

Текущий url будет доступен по индексу REQUEST_URI:

$cur_url = $_SERVER['REQUEST_URI'];

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

$urls = explode('/', $cur_url);

Создаём пустой массив, в который будем заносить информацию о названиях элементов «хлебных крошек» и их url:

$crumbs = array();

Следующий шаг алгоритма – это формирование ссылок и названий элементов. Для этого перебираем части текущего url в цикле, внутри которого создаём массив для url предыдущих элементов.

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

В итоге, получился следующий код:

if (!empty($urls) && $cur_url != '/') {
foreach ($urls as $key => $value) {
$prev_urls = array();
}
}

Теперь заполним массив url-ов. Для этого добавим в наш цикл ещё один цикл, который будет выполняться для каждого текущего элемента url текущей страницы:

for ($i = 0; $i 1 ? implode('/', $prev_urls) : '/';
}

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

Array (

[0] => Array (
[url] => /
)

[1] => Array (
[url] => /services
)

[2] => Array (
[url] =>
)

)

Единственное, чего нам не хватает – это названия самих элементов «хлебных крошек». Для этого во внутренний цикл, после формирования url элементов, добавим заполнение массива $prev_urls названиями в следующем виде:

switch ($value) {
case 'about' : $crumbs[$key]['text'] = 'О нас';
break;

case 'services' : $crumbs[$key]['text'] = 'Услуги';
break;

case 'blog' : $crumbs[$key]['text'] = 'Блог';
break;

case 'contacts' : $crumbs[$key]['text'] = 'Контакты';
break;

case 'portfolio' : $crumbs[$key]['text'] = 'Наши работы';
break;

case 'prices' : $crumbs[$key]['text'] = 'Цены';
break;

default : $crumbs[$key]['text'] = 'Главная страница';
break;
}

Здесь, как видите, на основании url страницы мы прописываем название соответствующему элементу «хлебных крошек».

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

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

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

Array(

[0] => Array (
[url] => /
=> Главная страница
)

[1] => Array (
[url] => /services
=> Услуги
)

[2] => Array (
[url] =>
=> Наши работы
)

)

Осталось теперь только вывести его в шаблоне.

Вывод «хлебных крошек» в шаблоне

Итак, для вывода в шаблоне PHP-массив с «хлебными крошками» сначала нужно передать в HTML-шаблон. Универсальный способ описан в статье по ссылке, однако, в большинстве фреймворков и CMS есть свои механизмы, которые подробно описаны в их документациях.

Также, в зависимости от платформы, вывод в шаблоне массивов может производиться с помощью директив шаблонизаторов или платформенных директив.

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

Для начала набросаем блок, внутри которого будут содержаться наши «хлебные крошки».

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

Итак, «хлебные крошки» мы будем делать списком с помощью тега

, элементы которых будут выводиться в виде тегов
• .

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