Глоссарий

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

автор
Автор Максим Пушкарёв
clock
На чтение 8 минут
Хлебные крошки - нужный элемент сайта для его посетителей и поисковиков. Первые отлично по ним ориентируются во время серфинга, а вторые видят, что структура ресурса продумана до мелочей. Есть несколько способов сделать хлебные крошки: от настройки микроразметки до вставки тегов HTML.
В данной статье мы расскажем:

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

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

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

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

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

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

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

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

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

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

Зачем нужны хлебные крошки кроме навигации

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

Для обеспечения удобства пользователя «хлебные крошки» берут на себя следующие задачи:

  1. Указывают пользователю, в каком разделе сайта он находится в конкретный момент.
  2. Дают представление о структуре ресурса.
  3. Позволяют быстрое перемещение на более высокий уровень вложенности, не используя кнопку «Назад» в браузере.
Кроме решения задач юзабилити, правильная навигация работает и на SEO-оптимизацию:
  • является естественным элементом перелинковки страниц;
  • положительно влияет на поведенческую статистику (время на сайте и глубину просмотра) за счет понятной навигации;
  • при условии настроенной микроразметки упрощает внешний вид и повышает кликабельность сниппета в поиске.

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

  • Динамические хлебные крошки. Рассмотрим ситуацию, когда пользователь увидел на главной странице раздел со специальными предложениями и далее оттуда перешел к товару. В карточке товара в хлебных крошках отобразится именно этот путь от страницы со спецпредложениями к товару. А если пользователь воспользуется функцией поиска на сайте этого же товара, то на странице отобразится путь от главной страницы к категории, которой этот товар принадлежит (либо к марке). Этим и характеризуются динамические хлебные крошки – отображают сам путь пользователя, а не иерархию разделов и страниц.
  • Хлебные крошки с выпадающим списком. Когда пользователь наводит курсор на подраздел, то отображается список с другими подразделами сайта. Это обеспечивают хлебные крошки. Данная функция призвана создать в первую очередь комфорт и удобство посетителя – ему достаточно кликнуть в выпадающем списке на нужную страницу, а не возвращаться на главную или подраздел выше, чтобы выбрать другую категорию.
  • Обратные хлебные крошки. Такой вид предусматривает только кнопку «назад» на странице товара, но в более широком применении. Например, если на странице поиска посетитель использовал фильтр, то при нажатии кнопки «назад» фильтрация не сбросится.

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

  1. Микроразметка для хлебных крошек в сниппете
  2. Для отображения навигационной цепочки в сниппете нужно обозначить хлебные крошки соответствующим видом разметки согласно стандарту Schema.org. Его поддерживают самые распространенные поисковики: Google, Yahoo! и Bing.

    Рекомендуем применять форматы Microdata и RDFa для оформления хлебных крошек.

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

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

  3. Создание хлебных крошек для WordPress
  4. Можно использовать специальные плагины (Breadcrumb NavXT, SEO by Yoast) или настроить хлебные крошки самостоятельно.
    • Как сделать с плагином
    Приводим здесь один из известных плагинов для хлебных крошек BreadcrumbNavXT.

    Сам плагин доступен бесплатно для скачивания, при этом версия WordPress должна быть не ниже версии 3.0, а хостинг поддерживается PHP5.

    Добавить код хлебных крошек нужно в файл single.php (для всех записей), файл page.php (для статических страниц), category.php (для всех рубрик) или в файл header.php (чтобы показать везде).

    Приводим пример кода для добавления:

    <div class="breadcrumb">

    <?php

    if(function_exists('bcn_display'))

    {

        bcn_display();

    }

    ?>

    </div>

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

    • Без плагина 
    Программный код WordPress достаточно простой и можно легко добавить в него код хлебных крошек.

    Для начала ищем файл functions.php и вставляем в него такой код:

    function the_breadcrumb() {

        echo '<div id="breadcrumb"><ul><li><a href="/">Home</a></li><li>></li>';

        if ( is_category() || is_single() ) {

            $cats = get_the_category();

            $cat = $cats[0];

            echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li><li>></li>';

        }

        if(is_single()){

            echo '<li>';

            the_title();

            echo '</li>';

        }

        if(is_page()){

            echo '<li>';

            the_title();

            echo '</li>';

        }

        echo '</ul><div class="clear"></div></div>';

    }

    Критично! Не вставляйте эту функцию внутри другой функции, чтобы не было конфликта.

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

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

    <?php the_breadcrumb(); ?>

    В целом, это все, но можно доработать внешний вид и поэкспериментировать с дизайном хлебных крошек. Для этого нужно отредактировать файл style.css в части идентификатора id=”breadcrumbs”.

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

  5. Добавляем хлебные крошки для Joomla
  6. В Joomla предусмотрен специальный модуль, который работает над отображением хлебных крошек — Навигатор сайта (mod_breadcrumbs). Приводим путь к нему: Панель управления — Расширения — Менеджер модулей.

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

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

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

  7. Теги HTML
  8. Для тех, кому не подходят варианты WordPress или Joomla есть и ручной вариант создания хлебных крошек – с помощью обычных тегов HTML:

    <a href="https://sait/glavnaia/">Главная</a>  — <a href="https:// sait/glavnaia/razdel/">Название раздела</a> — <a href="https:// sait/glavnaia/razdel/podrazdel/">Подраздел</a>

    Данный код нужно руками проставить на всех страницах.

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

    • Не создавайте хлебные крошки на главной странице. Иначе она будет ссылаться на саму себя, а это вредит оптимизации и выглядит по меньшей мере странно. То же самое и в навигационной цепочке – она не должна содержать ссылку на страницу, на которой находится пользователь. Эти нюансы можно отметить в настройках плагинов хлебных крошек.
    • Размещайте их в интуитивно понятном месте для пользователя. Обычно это делают под меню сайта. Но бывают случаи, когда хлебные крошки дублируют и внизу страницы для удобства в пользовании ресурсом (нажав несколько раз «Показать еще» пользователь может легко вернуться вверх страницы.
    • Не забывайте про микроразметку (обозначение контента соответствующими HTML-тегами), чтобы поисковые системы могли считать нужную информацию с вашего сайта и использовать ее для сниппетов. Это делается, чтобы поисковые роботы распознавали, что является логотипом, где указана стоимость и какие элементы отвечают за хлебные крошки на вашем сайте.
    Хлебные крошки – очень полезный элемент и нужно пользоваться им, чтобы обеспечить удобство посетителя при работе с вашим сайтом как внутри ресурса, так и при поисковой выдаче, а также увеличить длительность и эффективность взаимодействия с ним. Воспользовавшись нашими рекомендациями, вы легко сможете внедрить их самостоятельно.
    Сохраните себе:
Другие термины на букву «Х»
Читайте также
Бюджет проекта: составляющие, этапы разработки
Из этого материала вы узнаете: Что собой представляет бюджет проекта Структура бюджета…
Установление контакта с клиентом: цели, техники, принципы
Из этого материала вы узнаете: Цели и задачи установления контакта с клиентом…
Таргетированная реклама: что это такое и как работает
Из этого материала вы узнаете: Что такое таргетированная реклама Зачем нужна таргетированная…
Постановка целей по SMART: суть методики
В данной статье мы расскажем: Технология постановки целей по SMART Критерии постановки…
Одностраничный сайт: понятие, функции, создание
В данной статье мы расскажем: Что собой представляет одностраничный сайт Виды одностраничных…
Наружная реклама: виды, правила размещения
В данной статье мы расскажем: Преимущества и недостатки наружной рекламы Закон о…
Тестирование гипотез: где применяется, как выполняется
В данной статье мы расскажем: Что такое тестирование гипотез простыми словами Процесс…
KPI отдела продаж: понятие, основные показатели
В данной статье мы расскажем: Что такое KPI отдела продаж и для…
Бизнес-партнер: для чего нужен и как найти
В данной статье мы расскажем: Определение бизнес-партнера Цели и задачи сотрудничества с…
Бесплатные каналы продвижения, их плюсы и минусы
В данной статье мы расскажем: Суть и виды каналов продвижения Основные каналы…
Позиционирование компании: виды, стратегии, цели и задачи
В данной статье мы расскажем: Цели и задачи позиционирования компании Преимущества позиционирования…
Позиционирование продукта: стратегии, методы, этапы
В данной статье мы расскажем: Суть позиционирования продукта Модели и стратегии позиционирования…