Как оформить хлебные крошки на сайте (bredcrumbs)
Название “хлебные крошки” исходит из детской сказки “Гензель и Гретель” Братьев Гримм, в которой один из главных героев оставляет хлебные крошки по пути в дремучий лес, чтобы затем найти дорогу домой.
По этой аналогии, на веб-сайтах создается путь (навигационная цепочка) из «хлебных крошек» от главной страницы до текущего раздела, на котором находится пользователь.
Зачем нужны хлебные крошки на сайте:
- Хлебные крошки показывают текущее положение пользователя на сайте. Пользователь, который попадает на страницу продукта нелинейным образом (например, из внутреннего или внешнего поиска), сможет быстро сориентироваться по хлебным крошкам куда он попал (категория товаров, бренд и т.п.). По этой же причине важно указывать весь путь от главной страницы, а не только последние шаги в хлебных крошках
- Хлебные крошки дают доступ в 1 клик к верхним уровням сайта. С помощью хлебных крошек пользователь, которому не подошел текущий продукт, или он просто хочет увидеть другие продукты того же типа (например, для сравнения), может использовать хлебные крошки для беспрепятственного перехода вверх по иерархии сайта и, таким образом, продолжить просмотр продуктов, не прибегая к резким скачкам по сайту в виде возврата на главную страницу или заново.
При этом, хлебные крошки:
- Занимают мало места на сайте;
- Просты в реализации;
- Никогда не вызывают проблем у пользователей;
- Учитываются поисковыми системами.
Поисковые системы учитывают наличие хлебных крошек на сайте и отображают их в результатах поисковой выдачи. Что упрощает навигацию по сайтам и косвенно влияет на поисковую оптимизацию сайта.
Хлебные крошки улучшают размер и привлекательность сниппета (отображение сайта в результатах поисковой выдаче), выводя под заголовком путь. За счет этого сниппет становится больше и заметнее за счет дополнительной строки контрастного цвета. Также за счет хлебных крошек страницы сайта быстрее индексируются. Поскольку крошки есть на каждой странице и каждый “шаг” в пути является ссылкой, поисковой робот быстрее индексирует страницу и за один обход охватывает больше разделов сайта.
Отсутствие хлебных крошек
Если хлебные крошки на сайте отсутствуют, то пользователям, приходится возвращаться на главную страницу и начинать путь заново или выполнять повторный поиск, что замедляет и затрудняет подбор товаров.
При этом, хлебные крошки не смогут исправить сложную архитектуру сайта, поэтому их можно отнести скорее к вспомогательным навигационным средствам. Но хлебные крошки стали неким стандартом юзабилити и дизайна, помогая пользователям ориентироваться на веб-сайтах. В ходе тестирования мы наблюдали как испытуемые искали хлебные крошки и удивлялись их отсутствию.
Как оформить хлебные крошки:
Наиболее распространенное использование хлебных крошек — это возвращение пользователей в категорию, из которой они пришли, что похоже на действие кнопки «назад» в браузере, только в случае с хлебными крошками это часть интерфейса веб-страницы.
Поэтому хлебные крошки — это простой способ вернуться и продолжить просмотр продуктов в категории, переключаясь между страницей продукта и списком продуктов. Однако ссылки на хлебные крошки часто работают не так, как кнопка «назад» в браузере, поскольку они обычно основаны на иерархии, тогда как кнопка «Назад» основана на истории браузера пользователя. Поэтому важно показать весь путь, а не только последние шаги в хлебных крошках. А также важно правильно оформить хлебные крошки, рекомендации по оформлению ниже:
- Путь начинается с главной страницы (название бренда);
- Разделяются уровни знаками: “>” (больше чем) или “/” (косая черта, слеш) или “→” (стрелка направо) чтобы прослеживалось направление движения:
Раздел меню > Подраздел (1 уровень) > Подраздел (2 уровень) … > Карточка товара;
- Не стоит разделять уровни следующими символами: “ | “ (вертикальная черта), “ — “ (горизонтальная черта, дефис/тире),”:” (двоеточие), “;” (точка с запятой), “…” (многоточие) они могут вызвать путаницу;
- Последний уровень выделяется жирным шрифтом или цветом;
- Каждый уровень (кроме последнего) является кликабельны и ведет в соответствующий раздел сайта;
- Так как пользователь всегда находится на последнем уровне, то делать его кликабельным не нужно;
- Располагать хлебные крошки желательно в левой-верхней части экрана, именно там пользователи искали их чаще всего, что говорит о выработанной привычке.
Всё большую популярность набирают хлебные крошки с выпадающими списками (изображение ниже). Подобный подход не вызывал трудностей у пользователей в ходе тестирования.
Все эти рекомендации применимы и к мобильным версиям сайтов. Здесь важно учесть то, что пространство экрана меньше, чем на настольных компьютерах, поэтому хлебные крошки желательно не делать в несколько строк, а уместить на одной, оставив возможность горизонтальной прокрутки строки с хлебными крошками.
Ошибки при оформлении хлебных крошек
Ниже два примера с ошибками в оформлении хлебных крошек. Так на сайте Техно парк путь начинается не с главной страницы из-за этого не сразу понятно что означает данная строка. Также не указан последний уровень (не выделена текущая страница) из-за этого непонятно где сейчас находится пользователь и не понятен путь до текущей страницы.
А на сайте Harbery уровни разделены точкой из-за чего не прослеживается направление движения направо. В результате оформления хлебных крошек с ошибками, они не выполняют свою функцию и не помогают в навигации по сайту.
Точка роста конверсии: используйте хлебные крошки и избегайте ошибок при их оформлении
В данной статье рассмотрена лишь одна точка роста конверсии. Узнать ещё 100+ точек роста конверсии и UX-исследований можно в электронном учебнике Conversant.
Как сделать хлебные крошки на сайте �� [Полное руководство + бонус]
В детской сказке «Гензель и Гретель» по пути в лес брат и сестра крошили хлеб, чтобы по крошкам найти дорогу домой. Отсюда свое название получили «хлебные крошки» на сайте — они помогают пользователям ориентироваться в иерархии страниц. В сказке крошки склевали птицы, зато на сайте путь от главной до искомой страницы будет надежным.
Разберемся, каким сайтам нужна такая разметка и как ее настроить правильно.
Что такое хлебные крошки на сайте и как они выглядят
Хлебные крошки в SEO (Breadcrumbs) — это навигационная цепочка, показывающая место страницы в иерархии сайта. Она нужна, чтобы пользователь мог быстро перейти на главную, в предыдущий раздел или в корневой каталог. Как они выглядят на странице:
Товарная страница citilink.ru
Правильно размеченные хлебные крошки могут попасть в сниппет сайта в выдаче Яндекса и Google. На сниппете вместо обычной ссылки отобразится навигационная цепочка:
Выдача Google
Отображаемая цепочка в сниппете может меняться в зависимости от пользовательского запроса, но с помощью крошек поисковику будет проще определить категорию контента для поискового запроса.
Каким сайтам нужны хлебные крошки и чем они полезны в SEO
Польза разметки «Breadcrumbs»:
С ними удобнее ориентироваться на сайте.
Хлебные крошки делают страницы удобнее для пользователей, с ними проще ориентироваться в разделах и переходить к общим категориям.
Позволяют перелинковать страницы.
Ссылки в хлебных крошках участвуют во внутренней перелинковке, так что помогают выстроить поток ссылочного веса по сайту.
Делают сниппет нагляднее.
В сниппете благодаря крошкам появляются понятные названия категорий. Это может повысить кликабельность сниппета. Пользователи могут сразу перейти на нужный раздел прямо из выдачи.
В хлебных крошках нет нужды, если сайт имеет простую линейную структуру без уровней вложенности. Тогда в крошках будет нечего отображать — там будет только главная и искомая страница.
Если у сайта больше двух уровней вложенности, то хлебные крошки могут помочь в навигации на сайте. Крошки точно нужны, чтобы ориентироваться в каталогах интернет-магазинов, разделах порталов, форумов, блогов с разными рубриками.
Как добавить разметку хлебных крошек на сайт
Для настройки используют разметку Breadcrumbs. Благодаря разметке поисковикам проще считывать информацию о странице.
Советы для создания правильных хлебных крошек
На главной крошки не нужны.
Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.
Ссылка на страницу, где находится пользователь, не нужна.
Если в крошках будет кликабельная ссылка на текущую страницу, образуется циклическая ссылка. Страница будет ссылаться сама на себя, это бессмысленно и может ухудшить ранжирование сайта.
Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:
Страница товара
Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.
Привычное место для хлебных крошек — верхняя часть страницы.
Так сложилось, что навигационную цепочку размещают под меню над информацией о товаре или над заголовком материала. В этом случае оригинальность не нужна, сделайте так, как пользователям привычно и удобно.
Замените первую ссылку на ключ или бренд.
Специалист по оптимизации Сергей Кокшаров (Devaka) советует использовать потенциал первой ссылки в хлебных крошках: вместо слова «Главная» писать основное ключевое слово сайта или название бренда, если один короткий ключ подобрать не получается.
Вместо крошек вида «Главная > Продукция > Пиломатериалы > Брус» сделать «Строительные материалы > Продукция > Пиломатериалы > Брус».
Как настроить разметку BreadcrumbList на сайте
Яндекс формирует крошки по своему алгоритму. Для Google настроить разметку можно вручную с помощью разметки Schema.org.
Разметка «BreadcrumbList» — разновидность «ItemList». Она предполагает использование форматов Microdata и RDFa.
Пример разметки «BreadcrumbList» через Microdata:
Типичная ошибка разметки хлебных крошек
Пользователи часто сталкиваются с ошибкой «Отсутствует поле «id»». Ошибка обычно связана с тем, что пользователи указывают в разметке последним пунктом текущую страницу, которая, логично, не имеет ссылки, чтобы не ссылаться сама на себя. Но все item — это ссылки, так что последний пункт тоже должен быть ссылкой, иначе появляется ошибка.
Что делать: если это активная текущая страница, то для нее не нужна ссылка, ее вообще не нужно вставлять в разметку. Последний пункт хлебных крошек должен вести на предыдущий раздел каталога.
Как проверить разметку хлебных крошек
Проверить внедрение микроразметки можно с помощью инструментов от ПС: инструмента Google и валидатора Яндекса.
В обновленной версии Google Search Console внедрили отчет «Breadcrumbs», в русской версии он называется «Строки навигации» и находится в категории «Улучшения». Отчет показывает ошибки, связанные с отображением микроразметки в выдаче Google.
Отчет в Google Search Console
Плагины разметки для разных CMS
Добавить навигационную цепочку в сниппет можно при помощи специальных плагинов для CMS.
WordPress
Код разметки хлебных крошек нужно поместить в файлы:
показать крошки везде — в файл header.php;
для всех записей — в файл single.php;
для статистических страниц — в файл page.php;
для всех рубрик — в файл category.php.
В меню плагинов можно настроить ссылки, задать значок разделителя для ссылок.
Joomla
Добавить хлебные крошки в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления > Расширения > Менеджер модулей.
Настройка модуля
Настройте модуль под свой сайт и укажите:
позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);
название главной страницы;
разделитель текста для элементов навигации (обычно «/»).
На главной странице хлебные крошки отображать не нужно, поэтому на вкладке «Привязка к пунктам меню» выберите опцию «На всех страницах, кроме» и отметьте пункт с домашней страницей.
Opencart
Хлебные крошки для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.
Webasyst
К этому движку для интернет-магазинов есть два платных плагина — «Навигация в хлебных крошках» и «Динамические хлебные крошки» с простыми настройками.
Настройка плагина
1С Битрикс
Разметка крошек обычно находится в комплекте решений для SEO, но есть и отдельный компонент Умные хлебные крошки. Его можно использовать в каталоге или в многоуровневых разделах, которые связаны с инфоблоками.
Moguta
Для этого движка есть бесплатный плагин Хлебные крошки. Для установки в Панели управления сайтом зайдите в раздел Маркетплейс, там найдите бесплатный плагин и запустите установку.
Установка плагина
Проверьте правильность настройки с помощью валидатора Яндекса или Google.
Бонус: фишка для повышения CTR в выдаче с помощью хлебных крошек
Один из способов выделить сниппет — добавить эмодзи. Сниппет с яркими элементами может с большей вероятностью привлечь внимание пользователей. На отношение поисковых систем к сайту они не влияют.
Читатель блога PR-CY и оптимизатор Витя Смертный поделился своим опытом работы с сайтом 100.ks.ua: чтобы сделать сниппет в выдаче заметнее, он добавил пару тематических эмодзи в описание и хлебные крошки.
Сниппет сайта в выдаче
После добавления эмодзи сниппет показал рост кликабельности. Он стал заметнее на белом фоне выдачи.
График с CTR сниппета 
Рост CTR сниппета
Некоторые эмодзи могут неправильно отображаться в выдаче, но увидеть это можно только по факту. Тогда нужно просто подобрать другой элемент.
Витя заметил, что в Google бывают внезапные смены отображения: красивый значок может начать отображаться как монохромный символ, а потом вернуться к первоначальному виду. Такое периодически случается, нужно быть готовым к этой погрешности.
Эмодзи и смайлы можно брать из каталогов, к примеру, этого. Если в поле для копирования символ не отображается, лучше выбрать другой: велика вероятность, что он не отобразится и в сниппете.
Эмодзи не отображается
На своем опыте оптимизатор заметил, что в некоторых тематиках красный цвет работает лучше. Это справедливо для автомобильного сегмента: если в хлебные крошки поставить зеленую машину, то CTR вырастет, но незначительно, а если красную, то вырастет намного больше.
Выбор эмодзи для автомобильной тематики
Некоторые красные эмодзи напротив вредят кликабельности. Возможно, это связано с тем, что красный часто используют для обозначения ошибок и опасности.
Красные маркеры
С эмодзи важно не переборщить, такой сниппет выглядит пестрым и перегруженным:
Перебор элементов
Советуем подбирать эмодзи по ассоциациям под вашу тематику, чтобы пользователь сразу распознавал, в какой сфере работает сайт. И важно тестировать значки разного вида и цвета, чтобы найти те, которые будут привлекать.
Хлебные крошки — полезная разметка для навигации пользователей и управления ссылочным весом. Рекомендуем размещать крошки на страницы и в сниппет с помощью разметки, так ссылка в выдаче будет смотреться нагляднее.
Как сделать хлебные крошки на сайте с помощью CSS
За последнее время CSS и CSS3 сильно продвинулись вперед и поэтому старые стили, которые используют картинки на заднем фоне для получения нужной фигуры — больше не требуются.
В этой статье я расскажу как сделать хлебные крошки на сайте с помощь HTML и CSS в стиле flat. Так же можете посмотреть интересные flat шаблоны сайтов, может что-нибудь пригодиться. Я недавно делал подборку.
В конце мы получим вот такой результат:
Ранее, для того чтобы сделать прозрачную стрелки между двумя блоками использовалась прозрачная картинка на заднем фоне. Теперь данная проблема может быть решена используя только CSS.
1. Каркас крошек
Для начала создадим маркированный список — <ul>, в котором будут <li> элементы. Хлебная крошка будет добавляться с помощью добавления нового <li>.
2. Добавляем CSS
Теперь напишем CSS, чтобы выглядело как тут:
Данные стили добавляют:
- вид для ссылки в виде блока и синий цвет
- центрируют текст и делаем его белым
- ровный padding , чтобы блок отображался корректно по вертикали
- сбрасывает иные стили для ссылок с text-decoration: none
Внимание: position: relative добавлен для того, чтобы позже сдерживать все внутренние блоки с position: absolute.
3. Создаем эффект стрелки
Для создания стрелок мы будем использовать свойство :after, которое позволяет создавать дополнительный элемент после родителя. Добавляем ему position: absolute — для этого мы и делали positive: relative для ссылок <a>, чтобы удержать absolute свойство внутри ссылки и манипулировать им как нам хочется.
Вид стрелки будет сделан с помощью использования border’ов. В примере специально использован красный цвет, но чтобы придать вид треугольника будет использоваться transparent. Далее border будет пододвинут на месте с использование position: absolute.
4. Добавляем прозрачность с border
Меняем red в border на transparent, чтобы создать эффект прозрачности.
5. Добавляем стрелку сзади
Используя тот же принцип как и в третьем этапе — можно создать прозрачный треугольник позади блока. Цвет border должен быть поставлен как и задний цвет сайта, чтобы создавался эффект прозрачности.
5. Добавляем новые элементы
Добавляя новые <li> увеличивают глубину хлебной крошки.
6. Первый и последний <li>
Чтобы создать эффект закругления для первого и последнего элемента в хлебной крошки мы будем использовать :first-child и :last-child.
7. Добавляем hover эффект
После чего нужно сделать выделения ссылки при наведении на нее. Цвет выделения можно выбрать по вашему вкусы — как пожелаете.
Так же не забудьте добавить border-radius при наведении на первый и последний элемент в хлебной крошке.
На этом все. Если у вас есть какие-то вопросы — пишите комментарии и поделитесь статьей, если вам понравилось!
Как сделать хлебные крошки на сайте с помощью CSS от bologer
Bootstrap Breadcrumb – Компонент для создания хлебных крошек
Хлебные крошки (навигационные цепочки, breadcrumbs) – это элемент интерфейса, предназначенный для создания дополнительной навигации по сайту.
Их основное назначение – это показать текущее местоположение пользователя в иерархической структуре сайта и обеспечить навигацию по ней .
Например, в интернет-магазине с помощью хлебных крошек можно очень наглядно показать в каком сейчас разделе находится посетитель, а также в какие более крупные секции этот раздел входит. При необходимости пользователь с помощью хлебных крошек может очень просто перейти в секцию, которая, например, на один или два уровня выше по иерархии чем текущая и посмотреть, из чего она состоит и что в ней есть. Это очень удобно.
Таким образом, хлебные крошки – это ещё один вариант навигации, который помогает пользователям ориентироваться в структуре сайта и перемещаться по его страницам.
Создание хлебных крошек в Bootstrap
В фреймворке Bootstrap создание хлебных крошек осуществляется с помощью компонента Breadcrumb . По сути этот компонент – это просто набор стилей , которые нужно добавить к определённой HTML разметке через классы.
HTML код хлебных крошек в Bootstrap 4 :
Из кода видно, что процесс создания хлебных крошек состоит из добавления на страницу элемента <ol> с классом breadcrumb . Далее в <ol> необходимо поместить нужное количество элементов <li> с классом breadcrumb-item . Эти элементы будут определять навигационную цепочку до текущей страницы. После этого в <li> необходимо поместить <a> с атрибутом href и текстом.
Если хлебные крошки должны заканчиваться названием текущей страницы, то в этом случае в последний элемент <li> нужно просто поместить её название и добавить к нему класс active . Создавать ссылку в этом случае не нужно, т.к. в ней нет никакого смысла, да и с точки зрения SEO это неправильно.
В Bootstrap 3 хлебные крошки создаются аналогично (посредством нумерованного списка) за исключением только того, что к элементам li не нужно добавлять класс breadcrumb-item :
Для сведения, разделитель элементов списка в Bootstrap CSS ( «bootstrap.css» ) добавляется на страницу через псевдоэлемент ::before следующим образом:
Примеры хлебных крошек:
Создание хлебных крошек со своим оформлением
На сайте, построенном на Bootstrap, оформление хлебных крошек вы можете выполнять не только с помощью стилей, которые идут по умолчанию с этим фреймворком. При необходимости вы можете написать свои.