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

kak-sdelat-hlebnye-kroshki-na-phpДоброго времени суток ?

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

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

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

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

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


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

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

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

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

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

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

Ухх… вот это я завернул ? Даже самому стало слегка не по себе от своих заумностей ?


http://cccp-blog.com/wp-includes/images/banners/templatemonster/banner_content.jpg

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

primer-hlebnyh-kroshek-cccp-blogТак выглядит навигационная цепочка на данном сайте. А вот так выглядят «хлебные крошки» крупнейшего Интернет-магазина России OZON:


primer-hlebnyh-kroshek-ozonКак видите, несмотря на различие в назначении ресурсов, навигационные меню у нас одинаковы.

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

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

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


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

Кроме сайтов, данный элемент навигации существует также и в операционных системах (Windows, начиная с Vista), а также в различных файловых менеджерах (всем известный Total Commander, например, который позаимствовал эту фичу у Windows Vista Explorer).

Вот так, например, выглядят «хлебные крошки» в Windows 7:

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


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

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

Библиотека курсов

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

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

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

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

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


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

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

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

На чём бы ни был разработан ваш сайт – на WordPress, Joomla, ModX, OpenCart, на базе различных фреймворков (Yii, Laravel, Symfony, Zend) или вообще на «чистых» языках – всем вам без «хлебных крошек» не обойтись.

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

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


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

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

Поэтому рассмотренный пример и подойдёт для большинства, а не для всех сайтов, ведь помимо PHP никто не мешает вам писать сайты на Java, Python, Ruby и прочих языках бэкэнда.

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

Вот к нему-то мы наконец и переходим.

Создание «хлебных крошек» на 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 – постановка задачи

Итак, мы наконец добрались до самого интересного ?

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

В моём примере у сайта будет url «site.corp»

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

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

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


primer-shapki-sajta-dlya-vstatki-hlebnyh-kroshekКак раз в блоке с заголовком страницы мы и будем выводить наши «хлебные крошки».

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

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

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

Итак, начальные данные мы описали.

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

Теперь, непосредственно сам код.

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

Код с логикой формирования «крошек» должен быть доступным на всех страницах сайта, поэтому разметить его нужно будет в контроллере, отвечающем за хэдер сайта (при условии, что у вас 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 <= $key; $i++) {  $prev_urls[] = $urls[$i]; } 

Как видно из кода, для текущего элемента с ключом $key в массив $prev_urls будут записываться url всех предыдущих объектов, которые содержатся в url текущей страницы.

На данном этапе url предыдущих объектов содержатся в виде строковых элементов массива $prev_urls. Для сборки итогового url предшествующей страницы элементы массива нужно соединить слэшом.

Для части url текущей страницы, которая соответствует идентификатору этой же страницы мы url формировать не будем.

Поэтому добавляем во внутренний цикл следующий код:

 if ($key == count($urls) - 1) {  $crumbs[$key]['url'] = ''; } elseif (!empty($prev_urls)) {  $crumbs[$key]['url'] = count($prev_urls) > 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-скрипта, оформленного внутри директив <?php?>.

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

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

 <section class = "title-section">  <h1 class = "title-header"><!--Заголовок--></h1> </section>  <section id = "inner-headline">  <div class = "row">  <div class = "col-lg-12">  <!--Здесь будет код «хлебных крошек»-->  </div>  </div> </section> 

Итак, «хлебные крошки» мы будем делать списком с помощью тега <ul>, элементы которых будут выводиться в виде тегов <li>.

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

 <?php if (!empty($crumbs)) { ?>  <ul class="breadcrumb">  <?php foreach ($crumbs as $item) { ?>  <?php if (isset($item)) { ?>  <li>  <a href="<?php echo $item['url'] ?>"><?php echo $item['text'] ?></a>  </li>  <?php } ?>  <?php } ?>  </ul> <?php } ?> 

Как видите, мы выводим все элементы массива с «хлебными крошками» в виде ссылок, задав в качестве url значение элемента массива с индексом ‘url’, а текст – из значения с индексом‘text’.

Смотрим в браузере, что же у нас в итоге получилось:

primer-hlebnyh-kroshek-so-ssylkamiНеплохо, однако последний элемент, соответствующий текущей странице, также оформился в виде ссылки на текущую страницу, хотя у него значение ‘url’ пустое.

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

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

 <?php if (!empty($item['url'])) { ?>  <a href="<?php echo $item['url'] ?>"><?php echo $item['text'] ?></a> <?php } else { ?>  <?php echo $item['text'] ?> <?php } ?> 

Теперь наши «хлебные крошки» приобрели требуемый вид:

primer-gotovyh-hlebnyh-kroshekКрайний элемент цепочки, соответствующий текущей странице, некликабельный, а все остальные элементы оформлены в виде ссылок на соответствующие страницы, в чём можно убедиться при наведении на них курсором мышки, как на предыдущем изображении.

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

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

 $cur_url = $_SERVER['REQUEST_URI']; $urls = explode('/', $cur_url);  $crumbs = array();  if (!empty($urls) && $cur_url != '/') {  foreach ($urls as $key => $value) {  $prev_urls = array();  for ($i = 0; $i <= $key; $i++) {  $prev_urls[] = $urls[$i];  }  if ($key == count($urls) - 1)  $crumbs[$key]['url'] = '';  elseif (!empty($prev_urls))  $crumbs[$key]['url'] = count($prev_urls) > 1 ? implode('/', $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.

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

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

Например, к таковым смело можно отнести популярную CMS WordPress, в которой ЧПУ идёт «из коробки».

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

Достаточно будет всего лишь достать название из БД.

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

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

Такой подход очень распространён в не-ЧПУ платформах, а также в проектах, где формирование текущего url происходит не добавлением родительских категорий в url, а иными способами.

К примеру, рассмотрим «коробочный» способ формирования url страниц в популярной CMS для Интернет-магазинов OpenCart:

hlebnye-kroshki-url-opencartКак видите, url не ЧПУ, т.е. в нём не присутствует никаких понятных человеку названий, только идентификаторы категории и товара, по которым можно уже достать из БД информацию о соответствующих страницах, предварительно произведя парсинг url с целью их извлечения.

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

hlebnye-kroshki-i-primer-url-ozonТут url, кстати, тоже не ЧПУ, поэтому единственный способ получения родительских элементов – это прямые запросы в БД с целью формирования «хлебных крошек», с которыми у OZON, несмотря на все особенности url, всё ОК ?

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

 <?php if (!empty($crumbs)) { ?>  <section id="inner-headline">  <div class="row">  <div class="col-lg-12">  <ul class="breadcrumb">  <?php foreach ($crumbs as $item) { ?>  <?php if (isset($item)) { ?>  <li>  <?php if (!empty($item['url'])) { ?>  <a href="<?php echo $item['url'] ?>"><?php echo $item['text'] ?></a>  <?php } else { ?>  <?php echo $item['text'] ?>  <?php } ?>  </li>  <?php } ?>  <?php } ?>  </ul>  </div>  </div>  </section> <?php } ?> 

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

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

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

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

На этом на сегодня всё. Жду ваших отзывов.

До новых встреч и удачи вам в сайтостроении ?

cccp-blog.com

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

От переводчика

Юзабилити интернет-магазина — это конструктор, состоящий из множества разных деталей. Одна из шестерёнок этого конструктора — это «хлебные крошки». О них и пойдёт речь в статье. Это мой перевод статьи: http://baymard.com/blog/ecommerce-breadcrumbs. Неточности или ошибки перевода (если Вы такие найдёте) прошу отправлять в личные сообщения — я оперативно внесу необходимые правки. Если статья будет интересна — обязательно переведу и другие материалы подобной тематики.

Введение

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

Сопоставляя различные показатели 40 крупнейших сайтов e-commerce, исследователи обнаружили, что 68% интернет-магазинов испытывают трудности с внедрением этого компонента: 45% сайтов располагают лишь одним вариантом «крошек», а у 23% сайтов «хлебные крошки» вообще отсутствуют.

Хлебные крошки на сайте
Некоторые из 68% самых успешных интернет-магазинов, слабым местом которых являются «хлебные крошки»

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

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

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

Хлебные крошки на сайте
Вариант «хлебных крошек», основанный на структуре сайта, позволяет пользователям легко переходить к категориям товаров, чтобы подробнее узнать о других товарах в категории. Участник исследований, не уверенный на 100% в выборе куртки, легко перешел к категории «Куртки и пальто» на странице товаров H&M, используя структурный вариант «крошек».

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

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

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

habr.com

Что такое «хлебные крошки» на сайте и зачем они нужны

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

Нет, не уходите! Вы правильно зашли! Сейчас Вы во всем подробно разберетесь.

Итак, «хлебные крошки» на сайте – что же это такое?


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

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

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

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

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

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

Вот наглядный пример навигационной цепочки «хлебные крошки»:

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

Нюансы и особенности, о которых нужно знать

  1. «Хлебные крошки» обычно отображаются в виде горизонтальной полосы, располагающейся в верхней части странички. Хотя вертикальные варианты также иногда встречаются, но гораздо реже.
     
  2. Желательно чтобы эта навигационная цепочка органично вписывалась в общий дизайн веб-ресурса, что будет формировать общее положительное мнение юзеров. Следовательно, можно сделать вывод о том, что наличие ее имеет некоторое влияние на поведенческие факторы сайта, которые, в свою очередь, учитываются поисковыми системами при ранжировании результатов выдачи.
     
  3. А еще навигационная цепочка «хлебные крошки» имеет один нюанс, касающийся ее функционирования.  Он связан с понятием «циклические ссылки» – те, которые приводят пользователя на ту же страничку, на которой он находится в момент нажатия на ссылку. 

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

Что нужно уяснить

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

seo-akademiya.com

SEO-рекомендации к хлебным крошкам

1. Статический вес

Вес страницы – это условная величина, которая показывает «значимость» сайта.

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

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

Все ссылки из навигации должны ввести на продвигаемые разделы с вхождением ключевых слов. Это очень важный момент для ранжирования в поисковой выдаче, например: Главная > Аксессуары> Клавиатуры>

Но бывает и такое, что вы продвигаетесь по конкурентным запросам. В таком случае, лучше использовать не слово «Главная», а фразу или запрос целиком, например: Техника > Аксессуары > Клавиатуры

2. Поведение пользователей

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

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

3. Сниппет

Сниппет – это фрагмент текста, который выводится рядом со ссылкой в поисковой выдаче.

С помощью поисковой системы Google можно передавать структурированные данные и улучшить позиции сайта в выдаче. Яндекс немного отстает от Google и пока не умеет поддерживать данный вид разметки. Но Яндекс сам формирует цепочку навигации, которую можно увидеть в поиске.

Навигационная цепочка в Яндексе:

Навигационная цепочка в Яндексе. Как сделать правильные для SEO хлебные крошки на сайте?

Оформленная и неоформленная с помощью структурированных данных навигационная цепочка в выдаче Google:

Навигационная цепочка в Google. Как сделать правильные для SEO хлебные крошки на сайте?

Google использует три формата передачи структурированных данных – JSON-LD, Microdata, RDFa. «Хлебным крошкам» подойдут форматы Microdata и RDFa. Ниже представлен пример оформления кода в формате Microdata:

Код в формате Microdata. Как сделать правильные для SEO хлебные крошки на сайте?

После оформления кода необходимо убедиться, нет ли ошибок. Для этого существует инструмент валидатор от Google.

Валидатор от Google. Как сделать правильные для SEO хлебные крошки на сайте?

Убедиться, что происходит правильная обработка и отображение структурированных данных поможет инструмент Search Console от Google.

Search Console от Google. Как сделать правильные для SEO хлебные крошки на сайте?

4. Помните

  • Хороший тон – не делать последний элемент навигации ссылкой, например: Главная > Блог > Статья
  • Если вы используете слишком много ключевых фраз в цепочке навигации, увеличивается вероятность применения фильтров к сайту со стороны поисковых систем.
  • Внедрять «хлебные крошки» или нет – зависит от того, какой у вас ресурс. Если у вас сайт-визитка или на сайте мало разделов, то данная навигация вам не нужна. Но если у вас большой интернет-магазин, такая цепочка навигации вам явно необходима.

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

www.obrazstroy.ru

Основные SEO-требования к хлебным крошкам

1. Статический вес

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

Базовый вывод: важно, чтобы ссылки из цепочки навигации вели на продвигаемые разделы с вхождением в них слов из продвигаемых фраз. Если ставка при продвижении проекта делается на товарные (теговые и прочие НЧ-запросы), то имеет смысл рассмотреть вариант скрытия части гиперссылок с помощью AJAX.

Если главная страница сайта продвигается по конкурентным запросам, то (не в ущерб навигации) лучше использовать в качестве анкора ссылки не слово «Главная», а фрагмент соответствующей фразы или весь запрос целиком. Скажем: Мебель > Офисная > Стулья и кресла.

2. Поведенческие факторы

Безусловно, понятная навигация внутри сайта повышает глубину просмотра и вовлеченность пользователя. Как следует из ряда SEO-исследований [1, 2] данные поведенческие факторы (доля переходов из поиска со временем просмотра более 1 минуты, глубина просмотра) существенно сказываются на ранжировании сайта по продвигаемым запросам.

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

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

3. Представление сайта на выдаче (сниппет)

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

Наглядная цепочка в Яндексе
Рис. 1. Отображение наглядной цепочки навигации в выдаче Яндекса.

Сравнение в Google
Рис. 2. Отображение оформленной с помощью структурированных данных и не оформленной цепочки навигации в выдаче Google.

Google поддерживает три формата передачи структурированных данных — JSON-LD, Microdata, RDFa [3]. Для оформления хлебных крошек рекомендуется использовать Microdata и RDFa [4]. Пример оформления кода в формате Microdata для данных типа BreadcrumbList представлен ниже (сама цепочка: SEO > Трафик > Заказ).

<ol itemscope itemtype=»http://schema.org/BreadcrumbList»>
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.org/ListItem»>
    <a itemscope itemtype=»http://schema.org/Thing»
       itemprop=»item» href=»https://example.com/SEO»>
        <span itemprop=»name»>SEO</span>
        <img itemprop=»image» src=»http://example.com/images/icon-SEOicon.png» alt=»SEO»/></a>
    <meta itemprop=»position» content=»1″ />
  </li>
  >
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.org/ListItem»>
    <a itemscope itemtype=»http://schema.org/Thing»
       itemprop=»item» href=»https://example.com/SEO/Traffic»>
      <span itemprop=»name»>Трафик</span>
      <img itemprop=»image» src=»http://example.com/images/icon-Traffic.png» alt=»Traffic»/></a>
    <meta itemprop=»position» content=»2″ />
  </li>
  >
  <li itemprop=»itemListElement» itemscope
      itemtype=»http://schema.org/ListItem»>
    <a itemscope itemtype=»http://schema.org/Thing»
       itemprop=»item» href=»https://example.com/SEO/Traffic/Order»>
      <span itemprop=»name»>Заказ</span>
      <img itemprop=»image» src=»http://example.com/images/icon-Order.png» alt=»Order»/></a>
    <meta itemprop=»position» content=»3″ />
  </li>
</ol>

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

Контролировать правильность обработки и отображение структурированных данных можно с помощью соответствующей вкладки в Search Console от Google, путь: Вид в поиске > Структурированные данные.

Структурированные данные
Рис. 3. Инструмент работы со структурированными данными от Google в Search Console.

4. Добрые советы

  • Включение текущий страницы с отсутствием ссылки на неё в конце дублирующей навигации — является хорошим тоном.
    Скажем: SEO > Тарифы > Трафик > Онлайн-заказ.

  • Не стоит злоупотреблять вхождением ключевых фраз в цепочке — это повышает плотность их вхождений и увеличивает вероятность применения текстовых пост-фильтров. 1–2 вхождений для слова будет достаточно.

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

Полезные ссылки

  1. Эффективная работа с коммерческими и поведенческими факторами в 2016 году, Cybermarketing, 2016, http://www.slideshare.net/SergeyYurkov1/2016-cybermarketing-16.

  2. Аналитика поведенческих факторов Яндекс/Гугл, SEO conference в Казани, 2015, http://www.slideshare.net/staspolomar/ss-53154946.

  3. Introduction to Structured Data, Google Developers, 2016, https://developers.google.com/search/docs/guides/intro-structured-data.

  4. Breadcrumbs, Google Developers, 2016, https://developers.google.com/search/docs/data-types/breadcrumbs.

pixelplus.ru

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

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

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

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

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

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

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

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

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

Хлебные крошки

2.Основанные на атрибутах.

Показывают аттрибуты страницы. Например, на этом скриншоте показано, что мы находимся на странице с компьютерами с процессором Intel Core i7.

Хлебные крошки

3.Основанные на истории.

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

В основном это выглядит так: Главная> Предыдущая страница> Предыдущая страница> Предыдущая страница> Текущая страница.

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

Для чего нужны хлебные крошки

  1. Улучшают навигацию сайта. Если разместить хлебные крошки на сайт, то посетитель сразу увидит в какой категории он находиться, а также в любой момент может подняться на уровень выше. Для сайтов с большим количеством вложенных страниц советую обязательно использовать хлебные крошки, это очень важный элемент внутренней оптимизации сайта.
  2. Улучшают внутреннюю перелинковку. Если взглянуть на хлебные крошки, которые размещены на моем сайте, то сразу видно, что со всех страниц идет ссылка на главную и на рубрику, таким образом, эти страницы получают наибольший вес, что очень хорошо. Категорию можно продвинуть по какому-нибудь ключевому слову. А что касается главной страницы, то я считаю, что ее нужно обязательно продвигать по высокочастотному запросу.
  3. Улучшают индексацию сайта. Хлебные крошки – это всего лишь внутренние ссылки. Если робот перейдет на страницу сайта, то он будет «ходить» по этим ссылкам. Таким образом можно сделать вывод, что поисковик будет быстрее находить другие посты вашего ресурса и индексировать их.
  4. Влияют на URL-ы в выдаче. Если на сайте присутствуют хлебные крошки, то поисковые системы иногда показывают их в выдаче. А это позволяет увеличить CTR и соответственно посещаемость вашего ресурса.
  5. Улучшают релевантность страницы. Практически все оптимизаторы прописывают ключевое слово в заголовке H1. Так вот, если сделать хлебные крошки, то этот заголовок будет дублироваться на странице, и соответственно будут дублироваться ключевые слова :smile:.

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

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

Если у вас сайт на WordPress, то самый простой путь, это использовать плагин. И один самых популярных SEO плагинов — Yoast, уже имеет этот фукционал.

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

Хлебные крошки

 

vachevskiy.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector