0-800-759-750
Мы на связи с 7:00 до 24:00
office@seoftraf.ru

Как правильно оформить хлебные крошки на сайте

Поделитесь
Содержание

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

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

    Что означает выражение «хлебные крошки»

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

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

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

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

    Разработчикам и SEO-специалистам мало понимать, что такое breadcrumbs. Им нужно проследить за тем, чтобы этот элемент был заметен на странице. Он должен визуально выделяться, но вместе с тем не привлекать к себе лишнего внимания. Такого эффекта можно добиться следующими способами:

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

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

    Зачем нужны Breadcrumbs

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

    Повышение юзабилити

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

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

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

    Переход еще на один уровень вверх открывает страницу с категориями, среди которых: «Кулинария», «Детское питание», «Кофе и напитки» и другие бренды.

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

    Элемент качественной внутренней перелинковки

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

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

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

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

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

     breadcrumbs html

    Аналогично выглядит страница выдачи по поиску iPhone конкретной модели.

     хлебные крошки html

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

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

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

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

    Главная > США>Калифорния > Сан-Франциско

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

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

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

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

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

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

    Динамический принцип

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

    Представьте себе интернет-магазин, где пользователь ищет красные кроссовки. Вместо стандартного пути (Главная > Каталог > Обувь > Кроссовки) динамические breadcrumbs могут выглядеть так:

    Главная > Поиск: «Красные кроссовки» > Сортировка: По цене > Фильтр: Цена до 5000 грн

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

    Подход с выпадающим списком

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

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

    Минималистичный подход

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

     хлебные крошки css

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

    На каких сайтах применяются хлебные крошки

    Хлебные крошки в дизайне просто необходимы для таких порталов:

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

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

    Как правильно применить «хлебные крошки»: полезные советы

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

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

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

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

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

    Например, вы хотите, чтобы Google смог отобразить в сниппете не просто URL, а структуру сайта по такому принципу:

    Главная > Каталог>Электроника > Смартфоны

    Тогда вам нужно работать по такому образцу:

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

    Где элементы разметки от Schema.org означают следующее:

    • @type — определяет тип данных, в данном случае — BreadcrumbList.
    • itemListElement — содержит список элементов (ListItem), каждый из которых представляет собой отдельный уровень.
    • Position — указывает позицию элемента в списке.
    • Name — название страницы.
    • Item — URL страницы.

    Как добавить навигационную цепочку на WordPress

    В этом разделе мы дадим детальную инструкцию, как сделать хлебные крошки html.

    С помощью плагинов

    Добавление breadcrumbs на сайт WordPress с помощью плагина — простой способ улучшить навигацию. Эта опция доступна в двух популярных плагинах — Yoast SEO и Breadcrumb NavXT.

    1. Начнем с описания работы с помощью Yoast SEO. Предположим, что этот плагин у вас уже установлен и активирован.
    2. Следует перейти в раздел SEO → Внешний вид поиска → во вкладке «Хлебные крошки» (Breadcrumbs) включить переключатель.
    3. Следующий шаг — настройка внешнего вида цепочки. Откройте файл header.php, single.php, page.php или любой другой файл темы, где вы хотите отобразить крошки. Добавьте следующий код в нужное место.

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

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

    Breadcrumb NavXT — это специализированный плагин для создания breadcrumbs с расширенными настройками. Основные этапы работы в нем аналогичны предыдущему. Но там вы сможете использовать хлебные крошки CSS для стилизации этого элемента в соответствии с дизайном сайта.

    Без помощи плагинов

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

    1. Для начала вам нужно добавить функцию, которая будет генерировать breadcrumbs html. Вам предстоит работать в файле functions.php:

     seo хлебные крошки

    2. После этого вставьте вызов этой функции в шаблоны вашей темы. Обычно ее размещают в header.php, single.php, page.php или archive.php.

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

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

    3. Для стилизации можно внести изменения в файле style.css темы.

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

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

    В Joomla есть специальный модуль, который отвечает за отображение и SEO breadcrumb — это Mod_Breadcrumbs. Найти его можно по этому пути:

    Панель управления > Расширения > Менеджер модулей.

    Далее нужно установить переключатели в нужные положения.

     навигационная цепочка

    Вместо заключения

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

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