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

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

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

Например: Главная страница - Основной раздел - Подраздел - Страница

На сайте они повторяют меню, и, чаще всего, располагаются в верхней части страницы.

Для чего нужны и какие задачи решают?

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

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

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

Хлебные крошки имеют две функции:

1. Положительное влияние на SEO по следующим направлениям:

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

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

В поисковике Google формируется читаемая навигационная цепочка, которую пользователь сразу же видит на странице выдачи.

2. Улучшение юзабилити сайта.

Использовать хлебные крошки можно для решения задач:

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

Типы хлебных крошек

При верстке хлебных крошек используется список <ul> с классом breadcrumb, элементы <li> формируют «крошки». Текущий пункт ссылкой не является и к нему добавляется класс active.

<ul class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Товары для дома</a></li>
  <li><a href="#">Постельное белье</a></li>
  <li class="active">Еврокомплекты из хлопка</li>
</ul>

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

1. Если нужно изменить название главной страницы. Например, на “Аренда вилл”.

add_filter('woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_home_text');

function jk_change_breadcrumb_home_text($defaults) {

  // Изменяем текст для главной страницы с 'Главная' на 'Аренда вилл'
  $defaults['home'] = 'Аренда вилл';
  return $defaults;
}

2. Для изменения разделителя:

add_filter('woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_delimiter');

function jk_change_breadcrumb_delimiter($defaults) {

  // Изменяем разделитель хлебных крошек с '/' на '>'
  $defaults['delimiter'] = ' > ';
  return $defaults;
}

3. Изменение нескольких параметров:

add_filter('woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs');

function jk_woocommerce_breadcrumbs() {

  return array(
    'delimiter' => ' / ',
    'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
    'wrap_after' => '</nav>',
    'before' => '',
    'after' => '',
    'home' => _x(Аренда вилл', 'breadcrumb', 'woocommerce')
  );
}

4. Изменение ссылки с главной страницы на любую другую:

add_filter('woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url');

function woo_custom_breadrumb_home_url() {
  return 'http://example.com';
}

5. Удаление хлебных крошек:

add_action('init', 'jk_remove_wc_breadcrumbs');

function jk_remove_wc_breadcrumbs() {
  remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
}

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

1. Линейные.Показывают полный путь от главной страницы до текущей.

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

2. Динамические. Формируется в зависимости от пути пользователя. Чаще всего используется в интернет-магазинах, где один товар может находится в нескольких разделах.

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

4. Система “назад”.Вместо цепочки показываются кнопки назад, вернуться на предыдущую страницу, назад в каталог и тд.Удобно для страниц, где есть функция поиска.

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

6. Атрибутивная. Пользователь формирует свой путь на сайте на основе заданных фильтров.

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

При создании навигационной цепочки нужно учитывать определенные правила:

1. Использовать навигационную цепочку только там, где она нужна. Например, создавать хлебные крошки сайтам-одностраничникам нет необходимости.
2. Не использовать хлебные крошки на главной странице. Это отрицательно отразится на ранжировании.
3. Не стоит подгонять название разделов под ключевые фразы, только если соблюдена логика, иначе поисковые системы сочтут сайт спамным.
4. При линейной навигации прописывать путь до самого конца.
5. Размещать цепочку в хорошо видном для пользователя месте.
6. Обозначить контент html - тегами. Для этого добавляется микроразметка, чтобы поисковые боты понимали, что и где находится на сайте.
7. Проверить правильность создания хлебных крошек при помощи специальных сервисов: валидатора заметки в Яндекс.Вебмастер и проверки структурированных данных в Google.

Настройка “хлебных крошек” происходит разными способами.

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

Прописывается код, который добавляется в место будущего отображения хлебных крошек в HTML. Это самый простой код для настройки.

Например:

<ul class="breadcrumb">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Товары для женщин</a></li>
  <li><a href="#">Косметика</a></li>
  <li>Тени</li>
</ul>

У вас не будет красивого оформления, только черновой вариант. Обычно это только начальный этап и используется для разметки сайта.

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

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

• градиенты;
• переходы;
• стрелки.

Файл style.css используется для улучшения внешнего вида. Добавляется после начального этапа настройки. Пример:

/* Стиль списка */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;   
}

/* Добавить символ косой черты (/) перед/за каждым элементом списка */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Добавить цвет для всех ссылок внутри списка */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}

/* Добавить цвет на наведении курсора мыши */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

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

Подключение модулей CMS (Joomla, Breadcrumb NavXT). BreadcrumbNavXT - добавляется код через файл single.php для хлебных крошек (все записи), файл page.php (для статических страниц), category.php (для всех рубрик) или в файл header.php (чтобы показать везде).Joomla - подключение осуществляется через раздел «Менеджер модулей» панели управления. В настройках модуля можно произвести настройку под себя, выбрав символ для разделителя крошек, указав название для главной и нюансы отображения навигационной цепочки.

Настройка хлебных крошек для разных CMS

CMS - это движок для вашего сайта. В этом разделе мы рассмотрим самые популярные системы: Wordpress, Tilda, Bitrix. Самый быстрый способ создания - подключить плагин и добавить код в header.php. Тем не менее, разметка хлебных крошек будет отличаться. Это связано с тем, что у каждой системы свой код и свои требования.

Хлебные крошки для Tilda

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

Хлебные крошки для Bitrix

Использовать компонент bitrix:breadcrumb можно внутри других компонентов, например: bitrix:news или bitrix:catalog.

Вызов компонента bitrix:breadcrumb

<& $APPLICATION->IncludeComponent("bitrix:breadcrumb", "", Array("START_FROM" => "0", "PATH" => "", "SITE_ID" => "s1")); ?>

В шаблоне располагать placeholder, который при выполнении component_epilog.php будет заменяться на нужный нам контент. (в данном случаи на "хлебные-крошки").

Для реализации задачи потребуется создать класс, например ComponentHelper. В папке /bitrix/php_interface/ создадим папку /class/ в ней нужно создать файл ComponentHelper.php со следующим содержимым:

Содержимое ComponentHelper.php

<?php
#/bitrix/php_interface/classes/ComponentHelper.php
namespace PHPInterface;

/** * ComponentHelper * * */
class ComponentHelper {
  private $component = null;
  private $lastPlIndex = 0;
  private $pull = array();

  public function __construct(\CBitrixComponent $component) {
    $this->component = $component;
    $this->component->SetResultCacheKeys(array('CACHED_TPL', 'CACHED_TPL_PULL'));
    ob_start();
  }

  public function deferredCall($callback, $args = array()) {
    $plName = $this->getNextPlaceholder();
    echo $plName;
    $this->pull[$plName] = array('callback' => $callback, 'args' => $args);
  }

  public function saveCache() {
    $this->component->arResult['CACHED_TPL'] = @ob_get_contents();
    $this->component->arResult['CACHED_TPL_PULL'] = $this->pull; ob_get_clean();
    $this->component = null;
  }

  private function getNextPlaceholder() {
    return '##PLACEHOLDER_'.(++$this->lastPlIndex).'##';
  }

  public static function handle(\CBitrixComponent $component) {
    $buf = &$component->arResult['CACHED_TPL'];

    foreach ($component->arResult['CACHED_TPL_PULL'] as $plName => $params) {
      list($prevPart, $nextPart) = explode($plName, $buf);
      echo $prevPart;
      call_user_func_array($params['callback'], $params['args']);
      $buf = &$nextPart;
    }

    echo $buf;
  }
}
?>

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

Строки необходимые добавить в файл init.php (располагается в /bitrix/php_interface/)

// Подключаем созданный класс ComponentHelper.php
require_once(dirname(__FILE__).'/classes/ComponentHelper.php');

// Функция отвечающая за вывод "хлебных-крошек" bitrix:breadcrumb
function ShowNavChain($template = '.default') {
  global $APPLICATION;
  $APPLICATION->IncludeComponent("bitrix:breadcrumb", "", Array("START_FROM" => "0", "PATH" => "", "SITE_ID" => "s1");
}

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

// В необходимом месте вставки "хлебных-крошек"
$helper = new PHPInterface\ComponentHelper($component);
$helper->deferredCall('ShowNavChain', array('.default'));

//... код шаблона ...

// И в конце шаблона обязательно вызвать
$helper->saveCache();

В папке шаблона создаём файл component_epilog.php с содержимым:

PHPInterface\ComponentHelper::handle($this);

Хлебные крошки для WordPress

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

Другой вариант - Breadcrumb NavXT — самый популярный плагин по хлебным крошкам в вордпресс. Содержит функции для легкой настройки отображения навигации. В нем есть:

• встроенный виджет;
• поддержка bbPress, BuddyPress и локализации;
• возможность использования фильтров.

Хлебные крошки для Opencart

Есть несколько вариантов:

1. Установить готовый модуль.
2. Прописать код вручную. Для этого нужно:

• зайти на FTP;
• прописать нужную информацию. В примере приведены стандартные хлебные крошки опенкарт.

• перейти по ссылке и проверить полученный результат.

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

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

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

Все это ведет к увеличению трафика и влияет на ранжирование.

Микроразметка хлебных крошек shema.org - является самой удобной и востребованной. Разберем один из примеров:

<ul itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="/" title="Главная" itemprop="item">
      <span itemprop="name">Главная</span>
      <meta itemprop="position" content="0">
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="/razdel/" title="Раздел" itemprop="item">
      <span itemprop="name">Раздел</span>
      <meta itemprop="position" content="1">
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
    <a href="/razdel/podrazdel/" title="Подраздел" itemprop="item">
     <span itemprop="name">Подраздел</span>
      <meta itemprop="position" content="2">
    </a>
  </li>
</ul>

Расшифруем элементы, которые содержат хлебные крошки на Shema.org:

• itemscope — показывает поисковому боту объект на странице;
• itemtype — демонстрирует тип объекта;
• meta itemprop="position" content="%number%" — всегда пишется в конце блока и определяет позицию элемента в навигационной цепочке.

Хлебные крошки в веб-дизайне

Дизайн хлебных крошек может быть разным. Стиль зависит от требования заказчика и особенностей отраслей. Есть несколько вариантов оформления:

• в макете выделено специальное место для навигационной строки;
• вместо ссылки «главная» используется домик или лого;

• иконки добавлены в элементы навигационной цепочки;
• создаётся список меток.

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

Удалить хлебные крошки

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

1. С помощью CSS

.woocommerce-page section#title {
  display: none;
}

2. Отключить хлебные крошки с помощью тегов Woocommerce.

• удалить с главной страницы, но оставить в категориях:

// Remove breadcrumbs only from shop page
add_filter( 'woocommerce_before_main_content', 'remove_breadcrumbs');

function remove_breadcrumbs() {
  if(!is_product() && !is_product_category()) {
    remove_action( 'woocommerce_before_main_content','woocommerce_breadcrumb', 20, 0);
  }
}

• удалить идентификатор или пул:

add_action('template_redirect', 'remove_page_breadcrumbs');

function remove_page_breadcrumbs() {
  if(is_page('YOUR_PAGE_ID_OR_SLUG')) {
    remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
  }
}

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