Чем больше пользователь осуществляет переходов на сайте, тем больше вероятность запутаться на странице. При таком раскладе существует вероятность того, что он просто закроет сайт и найдет необходимую информацию в другом источнике. Для того, чтобы этого не произошло, используются навигационные цепочки, по-другому хлебные крошки.
В цепочке показывается путь от главной страницы до страницы, в которой на данный момент находится пользователь.
Например: Главная страница - Основной раздел - Подраздел - Страница
На сайте они повторяют меню, и, чаще всего, располагаются в верхней части страницы.
Для чего нужны и какие задачи решают?
Хлебные крошки (breadcrumbs) - это навигационная система, которая представляет собой цепочку, по которой движется пользователь.
Навигационная цепочка нужна всем сайтам, где есть логическая вложенность разделов. Это информационные сайты, интернет-магазины, сайты услуг, корпоративные сайты и тд.
При правильной настройке “хлебных крошек”, посетитель сможет сориентироваться, где находится и, при необходимости, вернуться в предыдущий раздел.
Хлебные крошки имеют две функции:
- Положительное влияние на SEO по следующим направлениям:
- облегчение навигации и, за счет этого, увеличение показателей поведенческих метрик, таких как глубина просмотра и время посещения; пользователю удобно и понятно на сайте, поэтому он будет спокойно переходить из раздела в раздел и даже совершить дополнительную покупку;
- создание перелинковки с другими страницами сайта;
- улучшение внешнего вида сайта и повышение кликабельности сниппета; данная задача выполняется только при условии настроенной микроразметки сайта.
Хлебные крошки Яндекс формируется автоматически. Приоритет отдается большим ресурсам с четкой структурой. Названия подтягиваются из метатегов или анкорных ссылок.
В поисковике Google формируется читаемая навигационная цепочка, которую пользователь сразу же видит на странице выдачи.
- Улучшение юзабилити сайта.
Использовать хлебные крошки можно для решения задач:
- наглядная демонстрация структуры сайта;
- подсказка пользователю о его местонахождении.Он наглядно видит, в какой части ресурса находится;
- создание понятной структуры и расположения страниц;
- перемещение между разными уровнями без использования в браузере кнопок вперед и назад.
Типы хлебных крошек
При верстке хлебных крошек используется список <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:
- Если нужно изменить название главной страницы. Например, на “Аренда вилл”.
add_filter('woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_home_text');
function jk_change_breadcrumb_home_text($defaults) {
// Изменяем текст для главной страницы с 'Главная' на 'Аренда вилл'
$defaults['home'] = 'Аренда вилл';
return $defaults;
}
- Для изменения разделителя:
add_filter('woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_delimiter');
function jk_change_breadcrumb_delimiter($defaults) {
// Изменяем разделитель хлебных крошек с '/' на '>'
$defaults['delimiter'] = ' > ';
return $defaults;
}
- Изменение нескольких параметров:
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')
);
}
- Изменение ссылки с главной страницы на любую другую:
add_filter('woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url');
function woo_custom_breadrumb_home_url() {
return 'http://example.com';
}
- Удаление хлебных крошек:
add_action('init', 'jk_remove_wc_breadcrumbs');
function jk_remove_wc_breadcrumbs() {
remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0);
}
Хлебные сео крошки бывают нескольких видов. Выбор зависит от структуры сайта и способов формирования страниц.
- Линейные.Показывают полный путь от главной страницы до текущей.
При сложной структуре навигационную цепочку лучше укоротить. Например, начать с раздела каталога.
- Динамические. Формируется в зависимости от пути пользователя. Чаще всего используется в интернет-магазинах, где один товар может находится в нескольких разделах.
- Хлебные крошки с выпадающим списком. Позволяет клиентам перейти в любой раздел меню. У каждого раздела есть список смежных разделов. Пользователь может не только вернуться на один уровень выше, но и перейти в другой раздел меню.
- Система “назад”.Вместо цепочки показываются кнопки назад, вернуться на предыдущую страницу, назад в каталог и тд.Удобно для страниц, где есть функция поиска.
- Смешанная навигация (линейная+назад). Кнопка назад должна присутствовать только страницах, которые пользователи нашли через внутренний поиск на сайта. Ниже представлен пример оформления меню хлебных крошек.
- Атрибутивная. Пользователь формирует свой путь на сайте на основе заданных фильтров.
Как реализовать seo хлебные крошки?
При создании навигационной цепочки нужно учитывать определенные правила:
- Использовать навигационную цепочку только там, где она нужна. Например, создавать хлебные крошки сайтам-одностраничникам нет необходимости.
- Не использовать хлебные крошки на главной странице. Это отрицательно отразится на ранжировании.
- Не стоит подгонять название разделов под ключевые фразы, только если соблюдена логика, иначе поисковые системы сочтут сайт спамным.
- При линейной навигации прописывать путь до самого конца.
- Размещать цепочку в хорошо видном для пользователя месте.
- Обозначить контент html - тегами. Для этого добавляется микроразметка, чтобы поисковые боты понимали, что и где находится на сайте.
- Проверить правильность создания хлебных крошек при помощи специальных сервисов: валидатора заметки в Яндекс.Вебмастер и проверки структурированных данных в 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
Есть несколько вариантов:
- Установить готовый модуль.
- Прописать код вручную. Для этого нужно:
- зайти на 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%" — всегда пишется в конце блока и определяет позицию элемента в навигационной цепочке.
Хлебные крошки в веб-дизайне
Дизайн хлебных крошек может быть разным. Стиль зависит от требования заказчика и особенностей отраслей. Есть несколько вариантов оформления:
- в макете выделено специальное место для навигационной строки;
- вместо ссылки «главная» используется домик или лого;
- иконки добавлены в элементы навигационной цепочки;
- создаётся список меток.
Очень часто оформлению не уделяют должного внимания, что в корне неверно. Красивые хлебные крошки добавляют веб-проекту индивидуальность и демонстрируют заботу о пользователе.
Удалить хлебные крошки
Иногда приходится удалять цепочку и сделать это возможно несколькими способами:
- С помощью CSS
.woocommerce-page section#title {
display: none;
}
- Отключить хлебные крошки с помощью тегов 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);
}
}
Навигационная цепочка - необходимый элемент на каждом сайте. От её удобства и внешнего вида зависит интерес пользователей к ресурсу. Если он запутается в разделах, либо переходы будут ошибочными, есть риск навсегда потерять клиентов и упасть в рейтинге выдачи.
Автор: Наталья Гилёва-Живых
