Контент-маркетолог

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

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

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

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

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

Положительное влияние на SEO

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

Хлебные крошки: какими они бывают

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

Линейная

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

Система «Назад»

На сайте устанавливается кнопка «Назад к каталогу», «Назад к главной» и т.п. Практически то же самое, что кнопка «Назад» в браузере. Неудобный тип навигации, если на сайте нет поиска.

Линейная + кнопка «Назад»

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

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

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

Навигационная цепочка пригодится любому ресурсу. При ее создании учитывайте эти несложные правила:

• Никаких хлебных крошек на главной странице. Получится, что вы ставите на странице ссылку на нее же саму. Это отрицательно скажется на ранжировании. Подробнее о факторах ранжирования можно прочитать здесь.
• Последним кликабельным звеном цепочки должна быть предыдущая страница, иначе вы также продублируете ссылку, как в случае с хлебными крошками на главной.
• Навигационные элементы должны быть хорошо видны пользователям. Текст должен контрастировать с фоном, и располагать элементы желательно вверху страницы.
• В Яндексе и Гугле есть функция, которая позволяет отображать навигационные цепочки вашего сайта в результатах поиска. Для этого нужно сделать микроразметку. Это удобно, поскольку пользователь сразу видит структуру вашего сайта.

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

Bbreadcrumbs в web-дизайне: применение и примеры

На сайтах с множеством страниц навигационная цепочка (breadcrumb navigation) может значительно помочь посетителям ориентироваться в иерархической структуре документов и указать текущее местоположение пользователей на сайте.  С точки зрения юзабилити, «хлебные крошки» могут сократить число действий посетителя, чтобы найти путь на верхний уровень страницы. 

Что такое breadcrumb?

Навигационная цепочка (Навигационное меню

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

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

Когда нужно использовать Breadcrumbs?

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

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

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

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

Виды Breadcrumbs

Существуют три основных вида «хлебных крошек». 

На основе местоположения 

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

На основе свойств

«Хлебные крошки» на  основе свойств отражают атрибуты конкретной страницы.

На основе пути

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

Преимущества использования Breadcrumbs

Они могут помочь пользователю 

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

Снижает  количество кликов или действий для возвращения на страницы более высокого уровня

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

Как правило, не  засоряют экран

Они, как правило, имеют горизонтальную ориентацию и поэтому не занимают на странице много места. 

Снижают показатель отказов

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

Ошибки при использовании Breadcrumbs

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

Использование навигационных цепочек, когда в этом нету необходимости

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

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

Использование «хлебных крошек» в качестве основной навигации

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

Использование «хлебных крошек», когда страницы имеют несколько категорий

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

Не делайте на странице ссылку на эту же страницу (последний шаг в «хлебных крошках» должен быть без ссылки)

Дизайн «хлебных крошек»

При разработке цепочек навигации, могут возникнуть некоторые вопросы. Например:

Какой символ нужно использовать для отделения ссылок?

Общепринятым и наиболее узнаваемым символ для разделения гиперссылок в «хлебных крошках» является символ «больше, чем»  — (>).

Также можно использовать кавычки, указывающие на правый угол (») и косую черту (/).

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

Какими они должны быть?

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

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

Где должны быть расположены «хлебные крошки»?

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

Статистика

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

Ориентация цепочек

95% — горизонтальная

5% Вертикальная

Разделитель между элементами (для горизонтальных цепочек)

Примеры использования breadcrumbs в web-дизайне

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

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

NASA

Nestle

Marchand de Trucs

Bridge 55 

Overstock.com

TechRadar UK

Apple Store

Использование других символов

BP

Martique

PSDTUTS

Mouse to Minx

Boden

Другие альтернативы 

Coolspotters

Cranfield

Lonelyplanet

Booreiland

По материалам — Jacob Gube

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

Перевод — Дежурка

Хлебные крошки на сайте: что это и как работает? | 1PS.RU

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

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

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

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

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

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

Где используют хлебные крошки?

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

А вот в интернет-магазинах и форумах без хлебных крошек никуда.

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

Основные функции хлебных крошек

Улучшение юзабилити

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

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

Красивое представление сниппета в поиске

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

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

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

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

Каждый раздел строки – это отдельная ссылка, которая влияет на статический вес других разделов.

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

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

Ставим юзабилити выше. Главная> Заказать пиццу. Так лучше? Конечно! Гораздо симпатичнее, да и сама фраза не выбивается из вида.

На скриншоте показано, как надо прописывать ключи и как не надо.

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

Например, без наименования «Игра Switch на картридже» можно было спокойно обойтись.

Рекомендации по хлебным крошкам

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

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

Чтобы поисковый робот понимал каждый элемент на сайте и красиво показывал его в сниппете.

У нас в блоге микроразметка настроена с помощью Microdata (словарь Shema.org), вот таким образом:

На странице валидатора микроразметки от Google получаем результат:

Где type – Breadcrumblist (хлебные крошки)

itemListElement – Каждый пункт списка

name – тег с названием Хлебной крошки

item – разметка ссылки

Также пример микроразметки с помощью JSON-LD (рекомендован Google как основной способ микроразметки):

Очевидный плюс – это меньше кода.

В валидаторе получаем:

Не использовать на главной

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

Лучше располагать хлебные крошки сверху на видном месте

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

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

Использовать символ > между названиями разделов (уровней)

Данный символ наглядно показывает последовательность движения между разделами.

Выделяйте последний элемент жирным шрифтом

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

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

Под стиль сайту

Важно запомнить, что крошки должны соответствовать стилистике и не выбиваться из общего оформления.

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

Послесловие

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

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

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

Хлебные крошки на сайте: что это, какими бывают и как влияют на SEO? Как создать микроразметку на ресурсе и какими сервисами воспользоваться? Для чего нужна микроразметка хлебных крошек?

Использовать хлебные крошки (breadcrumbs) на сайтах впервые предложил Google. Это своеобразная цепочка, отражающая иерархию разделов от главной страницы до той, на которой находится пользователь в данный момент. Такое название, видимо, отсылка к сказке братьев Гримм — «Гензель и Гретель». Дети рассыпали крошки, чтобы вернуться домой. Микроразметка решает похожую задачу: breadcrumbs помогают посетителям ориентироваться на сайте, что особенно полезно при большом количестве страниц, как, например, в онлайн-магазинах.

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

Breadcrumbs отображаются и в сниппете в SERP. Последовательная цепочка слов выглядит приятнее, чем ссылка, посетителю легче понять, что он найдет на странице и что еще есть на сайте. Также breadcrumbs заменяют ссылки на разделы и подразделы.

Материал по теме: Особенности продвижения сайта в поисковой выдаче Google

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

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

Влияние хлебных крошек на SEO

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

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

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

Теперь рассмотрим на примере, как НЕ нужно прописывать ключи в Breadcrumbs:

Как сделать хлебные крошки на сайте: подробная инструкция

Разметка предполагает применение микроданных или RDFa. То есть, чтобы создать хлебные крошки вручную, необходимо внести изменения в html-код.

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

А вот так, если использовать RDFa:

Некоторые SEO-оптимизаторы видят дополнительный потенциал в первой ссылке в хлебных крошках. То есть по возможности стоит заменить слово «Главная» на ключ: название бренда, вида продукции или подобное.

Первоначальный вариант: Главная > Услуги > Омолаживающие процедуры > Пилинг anti-age.

Корректная разметка: Косметология > Омолаживающие процедуры > Пилинг anti-age.

Материал по теме: Как продвигать сайт в поиске в 2021 году — 21 полезный совет по SEO

Проверяется микроразметка с помощью сервисов поисковиков. В последней версии Google Search Console есть отчет о хлебных крошках — «Breadcrumbs». Инструмент показывает, где ошибка, и дает рекомендации, как её исправить. Для этого оптимизаторам надо зайти во вкладку «Улучшения» или «Enhancements».

Плагины CMS для хлебных крошек

1. WordPress

Для создания микроразметки под этот движок лучше использовать плагин Breadcrumb NavXT. С помощью инструмента добавляете код для разметки на страницы, затем открываете меню Breadcrumb NavXT и настраиваете breadcrumbs: применяйте знак разделения «>» и добавляйте URL-адреса на другие разделы и подразделы.

Помимо этого инструмента, можно использовать такие сервисы, как Flexy Breadcrumb, breadcrumb simple, Instant Breadcrumbs.

2. Joomla

Для добавления разметки используется модуль Joomla «Навигатор сайта». Пользователю нужно выбрать — «mod_breadcrumbs». Найти опцию можно в панели управления, кликнув по вкладке «Расширения», а затем открыв «Менеджер модулей».

Модуль настраивается под каждую площадку. Оптимизатору необходимо указать:

• позицию, в которой модуль будет выведен на страницу. Алгоритм действий следующий: открываете вкладку «Расширения», переходите в «Менеджер шаблонов» и «Настройки», а после кликаете по опции «Просмотр позиции» и «Включить»;
• название главной страницы;
• разделитель для ссылок в навигации. Используйте символ «/».

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

3. Opencart

Для Opencart 3.0 используется модуль «Умные хлебные крошки», а для 2.x — «Правильные хлебные крошки». Также разработчики предлагают бесплатный модификатор, который делает неактивной ссылку на текущую страницу в микроразметке.

4. Webasyst

У Webasyst для онлайн-магазинов есть только платные плагины: «Навигация в хлебных крошках» и «Динамические хлебные крошки». Меню с настройками интуитивно понятное, можно создать микроразметку за считанные минуты.

5. 1С Битрикс

У движка Вitrix управление хлебными крошками доступно в наборе сервисов для оптимизации. Также есть и другой плагин — «Умные хлебные крошки». Инструмент используется для каталогов онлайн-магазинов или для сайтов с многоуровневыми разделами.

6. Moguta

Разработчики создали для этой CMS бесплатный инструмент для микроразметки — «Хлебные крошки». Чтобы установить плагин, нужно открыть панель управления и выбрать опцию «Маркетплейс», там в перечне инструментов выбираете нужный вариант и следуете инструкции.

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

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

Джон Мюллер, главный аналитик Гугл, прокомментировал использование эмодзи:

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

Рекомендуем тестировать сниппеты с эмодзи и без. Главное — не переборщить с количеством смайлов, чтобы ссылка не выглядела слишком несерьезно. Лучше использовать тематические эмодзи — сниппет будет смотреться органично и сработает в плюс конверсии.

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

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

Рекомендации, как улучшить микроразметку крошек на сайте

• Не используйте для главной страницы.

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

• Располагайте хлебные крошки сверху — на видном месте.

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

• Выделите жирным последний элемент в микроразметке.

Последним в хлебных крошках идет название текущей страницы. Жирный шрифт делает его заметнее.

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

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

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

Автор: Exiterra.com Digital Agency

почему они так важны для SEO?

Вас это может удивить, но хлебные крошки (англ. — breadcrumbs) на сайтах приносят пользу как посетителям, так и бизнесу — поэтому при разработке сайтов в Direct Line Digital мы всегда используем их. 

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

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

Хлебные крошки на сайте: что это такое и какова их роль

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

С точки зрения SEO, хлебные крошки рассматриваются как еще одна возможность не только улучшить usability сайта, но и повысить его рейтинг в глазах поисковых систем. Дело в том, что микроразметка хлебных крошек помогает поисковым системам (Яндексу и Google) понять содержание и структуру сайта. Это значительно улучшает позиции сайта в результатах поиска. Проще говоря, у сайта с правильной настройкой хлебных крошек больше шансов выйти в ТОП Яндекс и Google. 

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

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

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

Атрибутивные хлебные крошки

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

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

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

Хронологические, или динамические хлебные крошки

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

3 причины использовать хлебные крошки в SEO

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

Они повышают позиции сайта в поиске

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

Они улучшают поведенческие факторы

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

Они помогают ориентироваться на сайте

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

Как добавить хлебные крошки: HTML код и плагины

Чтобы добавить микроразметку хлебных крошек, вы можете модифицировать HTML код или изменить навигационные настройки шаблона, если ваш сайт создан например базе конструктора или CMS WordPress.

WordPress

Стандартная навигация сайтов на WordPress не предусматривает отображение хлебных крошек. Чтобы добавить их в дизайн страниц сайта, вам необходимо подключить эту опцию через меню SEO » Search Appearance » Breadcrumbs page. Система предложит вам несколько вариантов оформления на выбор.

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

WooCommerce

Если вы хотите изменить настройки хлебных крошек в интернет-магазине на WordPress, вы можете воспользоваться плагином WooCommerce Breadcrumbs — с его помощью вы внесете необходимые изменения в программный код. Этот плагин хлебных крошек позволяет изменить их внешний вид, сделав его более подходящим для вашего магазина. 

ВАЖНО: если ваш сайт разработан на основе WooTheme, использовать плагин WooCommerce Breadcrumbs вы не сможете — вместо него есть WooFramework Breadcrumbs, но параметров настройки хлебных крошек у него меньше. 

Несколько советов по добавлению хлебных крошек страниц

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

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

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

Теперь вы знаете все о хлебных крошках

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

Если у вас появились вопросы касательно хлебных крошек или любого другого аспекта успешной поисковой оптимизации для развития вашего бизнеса — обращайтесь в Direct Line Digital. 

Хлебные крошки на сайте: что это такое

Что такое хлебные крошки (Breadcrumb)?

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

Вспомните сказку «Гензель и Гретель», а именно эпизод, когда дети пошли в лес, за собой они выкладывали путь из хлебных крошек. Вот и сайтом так же. Замечали, что когда заходите на какой-либо сайт или интернет-магазин, каждый раз совершая действие, он, так сказать, запоминает и «прокладывает» дорогу Ваших действий, дабы Вы смогли вернутся обратно. Это как своеобразный навигатор на сайте.

Для чего нужны хлебные крошки

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

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

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

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

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

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

Полное руководство по использованию хлебных крошек на веб-сайтах + примеры

Первоначально этот пост был опубликован на babich.biz, автор — Ник Бабич. Ник — разработчик программного обеспечения, увлеченный пользовательским интерфейсом.

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

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

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

Навигация по хлебным крошкам

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

• Где я? «Хлебные крошки» информируют посетителей об их местонахождении по отношению ко всей иерархии сайта.
• Куда мне пойти? «Хлебные крошки» улучшают поиск разделов и страниц сайта. Структуру сайта легче понять, когда она размещена в виде хлебных крошек, чем если она помещена в меню.
• Мне туда пойти? «Хлебные крошки» сообщают о ценности контента и поощряют просмотр (например, посетитель сайта электронной коммерции может попасть на страницу продукта, продукт может не подходить, но посетитель может захотеть просмотреть другие продукты из той же категории). Это, в свою очередь, снижает общий показатель отказов сайта.

Уменьшает количество действий

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

Занять минимум места

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

Ни у одного пользователя нет проблем из-за панировочных сухарей

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

Когда следует использовать панировочные сухари?

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

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

Виды панировочных сухарей

Панировочные сухари могут быть на основе: местоположения, пути и атрибута.

Расположение на основе

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

В приведенном ниже примере (от BestBuy) каждая текстовая ссылка предназначена для страницы, которая на один уровень выше, чем правая.

На основе пути

Навигационные цепочки на основе пути (также известные как «исторический след») показывают весь путь, пройденный пользователем на определенной странице.Этот тип хлебных крошек обычно создается динамически. Иногда хлебные крошки на основе пути могут быть полезны, но чаще всего они сбивают с толку — посетители часто просматривают страницы очень быстро, перепрыгивая с одной страницы на другую. Такой извилистый путь не очень полезен для пользователя и может быть легко заменен кнопкой « Назад » в браузере. Наконец, исторический след бесполезен для посетителей, которые попадают прямо на страницу в глубине сайта.

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

Attribute Based

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

Например, в TM Lewin цепочки навигации показывают атрибуты элементов, отображаемых на определенной странице:

Иерархия или история?

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

Лучшие методы навигации по хлебным крошкам

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

Панировочные сухари как дополнительная навигация

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

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

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

Используйте разделители

Самый узнаваемый символ для разделения ссылок в цепочках навигации — это символ «больше чем» (>). Обычно знак > используется для обозначения иерархии, как в формате Родительская категория> Дочерняя категория. Другие используемые символы: стрелки, указывающие вправо (→), прямые угловые кавычки (») и косые черты (/). Выбор зависит от эстетики сайта и типа используемой хлебной крошки:

Выберите размер и набивку

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

Не делайте это центральным элементом дизайна

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

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

Заключение

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

Что такое хлебные крошки и как оно упрощает навигацию? (Примеры)

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

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

Внезапно вы знаете, где находитесь и где находятся вход и выход, в зависимости от вашего местоположения. Паника уходит! И пошли гав гав!

В навигации по сайту «хлебные крошки» делают нечто подобное.

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

Вот что вы узнаете из этого сообщения:

• Что такое навигация по хлебным крошкам?
• Наша эволюционная потребность в навигации по хлебным крошкам
• Типы панировочных сухарей для веб-сайтов
• 5 преимуществ панировочных сухарей
• 10 лучших практик использования панировочных сухарей
• Проблема с навигацией по хлебным крошкам
• Последнее слово о сухарях

«Хлебные крошки» — это вспомогательное средство навигации, которое помогает пользователям легко понять взаимосвязь между их местоположением на странице (например, страница продукта) и страницами более высокого уровня (например, страница категории).Этот термин заимствован из сказки о Гензеле и Гретель, где дети бросают след из панировочных сухарей, чтобы проследить свой путь назад.

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

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

Питер Пиролли обнаружил интересные параллели между тем, как животные добывают себе пищу, и тем, как люди ищут полезную информацию. По сути, все мы живем по эвристическому правилу — не тратьте больше энергии на поиски пищи, чем то, что она дает.Рассмотрим, как мы ищем информацию в Интернете: мы что-то ищем, поисковая система выдает много результатов. Мы сканируем ссылки и не переходим по ним, если не улавливаем подсказки (заголовок SEO, мета и т. Д.) О том, что ссылка предоставит нам нужную информацию. Это мало чем отличается от зверя, охотящегося за добычей в саванне; зверь будет заряжаться только тогда, когда ароматный след достаточно силен, чтобы оправдать энергию, которая должна быть потрачена на преследование.

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

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

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

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

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

Однако наиболее распространенным применением хлебных крошек на основе истории является использование ссылки «Назад к результатам».

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

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

Если пользователь достигает страницы продукта, которая ему не интересна, он либо откажется от нее, либо вернется на страницу категории, чтобы начать все сначала.Хлебные крошки побуждают пользователя начать все сначала и пока не откажутся. В исследовании, проведенном Hull, S.S. (2004) ^[1] , было обнаружено, что пользователи, получившие инструкции по использованию хлебных крошек, выполняли задачи намного быстрее, чем пользователи, которые не использовали хлебные крошки. Для пользователей, которые ежедневно пользуются Интернетом (даже в интрасетях, таких как корпоративные), использование хлебных крошек может значительно повысить производительность и сэкономить время.

Связанное сообщение : 14 способов уменьшить отказы и повысить вовлеченность на вашем сайте электронной коммерции

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

Связанное сообщение : 15 основных элементов эффективного продукта электронной коммерции Страница

Google объявил ^[2] , что они заменяют URL в своих результатах поиска на имя сайта и путь навигации хлебных крошек. Это происходит сейчас и для мобильных устройств, а в ближайшие дни может появиться и для настольных компьютеров.Google считает, что использование реального имени веб-сайта поможет улучшить удобство использования, а ссылки на хлебные крошки покажут пользователям, куда они будут перенаправлены при нажатии на результат поиска.

Веб-мастера могут использовать разметку схемы для Breadcrumbs ^[3] для более эффективного взаимодействия с поисковой системой. Панировочные сухари становятся для вас дополнительным способом лучше объяснить поисковым системам, о чем ваши страницы, и получить это небольшое дополнительное преимущество для SEO.Они также действуют как дополнительные ссылки в результатах поиска, чтобы дать вам больше шансов для перехода по ссылке.

Якоб Нильсен говорит, что рекомендует панировочные сухари с 1995 года ^[4] . Причины просты.

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

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

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

«Хлебные крошки» могут уменьшить беспокойство пользователей о том, чего ожидать, показывая им весь след процесса. Например, настройка учетной записи на VWO состоит из нескольких шагов. Используя хлебные крошки, мы можем точно сказать пользователю, сколько шагов задействовано в процессе, и позволить ему вернуться к любому из предыдущих шагов в любой момент.Это дает пользователю представление об обязательствах (времени и усилиях), требуемых от него для настройки процесса. Когда кто-то инициирует попытку, такие визуальные подсказки могут послужить сильным мотиватором для завершения процесса.

Споры изобилуют ^[5] о том, следует ли называть эту функцию «индикатором выполнения» или «навигационной цепочкой». Но народная мудрость подсказывает, что, если след позволяет пользователям вернуться к предыдущему шагу, это все равно, что быть хлебной крошкой.

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

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

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

Используйте «>» в ​​качестве разделителя между уровнями. : Работает, потому что всегда работало. Значок «>» быстро показывает взаимосвязь между страницами более высокого уровня и страницами более низкого уровня. Якоб Нильсен изначально рекомендовал использовать двоеточие ^[6] (:) в панели навигации по хлебным крошкам. После пользовательского тестирования он изменил свою рекомендацию на использование «>», потому что оно легко представляет связь между страницами более высокого уровня и страницами более низкого уровня.

Поместите крошки наверх : панели навигации обычно размещаются в самом верху веб-сайта.Поскольку хлебные крошки работают как вспомогательное средство навигации, их следует размещать над содержимым. Группа Nielsen Norman провела пользовательские тесты и обнаружила, что пользователи ожидают появления хлебных крошек наверху ^[7] страницы. Хорошее место для панировочных сухарей — под основной панелью навигации и над заголовком страницы.

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

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

Жирным шрифтом последний элемент : Жирным шрифтом последний элемент (текущая страница) выделяет его и сообщает пользователю: «Это то место, где вы сейчас находитесь».

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

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

Использовать полные заголовки страниц в хлебных крошках : имеет смысл включать полные заголовки страниц в хлебные крошки, чтобы пользователи точно знали, куда ведет каждая из гиперссылок. Но из-за длинных заголовков страниц или по другим причинам некоторые предпочитают обрезать заголовки страниц с помощью многоточия (см. Изображение ниже).В таких случаях лучше опускать такие фразы, как «Вы здесь», чтобы освободить место для наиболее важных элементов, которыми являются сами заголовки страниц.

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

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

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

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

1. Люди до сих пор не уверены, стоит ли это затраченных усилий: это не функциональность, которую нужно исправить или сломать. Здесь нет споров.

2. Бытует мнение, что хлебные крошки «необходимы» только в том случае, если ваша информационная архитектура находится в упадке. Если пользователи могут легко перемещаться по вашему веб-сайту, они будут знать, где они находятся, даже если вы их не показываете. По сути, эта школа мысли считает, что хлебные крошки — это запасной вариант, когда ваша архитектура испорчена. Поэтому они спрашивают: если вы собираетесь тратить время и силы, почему бы не улучшить вашу информационную иерархию, чем инвестировать в хлебные крошки?

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

Панировочные сухари на основе истории просто дублируют функциональность кнопки «Назад».

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

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

Compounds Error : Для людей, которые попадают на страницу методом проб и ошибок, будет бессмысленно иметь неоптимальную историю навигации в виде хлебных крошек.

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

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

Дом> Меблировка> Гостиная> Стулья> Одноместные> Сумка-мешок «The Dude Abides»

или

Для дома> Меблировка> Гостиная> Стулья> Повседневные> Сумка-мешок «The Dude Abides»

Что вы выберете для отображения?

Давайте рассмотрим сначала страницу продукта .

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

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

Вернуться к результатам | На главную> Мебель> Гостиная> Бин-мешки> Бин-сумка «The Dude Abides»

Теперь поговорим о странице категории .

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

Начало> Меблировка> Стулья | Одноместный *

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

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

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

Часто задаваемые вопросы о панировочных сухарях

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

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

Продолжить чтение

9 советов по упрощению навигации по сайту [+ примеры]

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

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

Что такое навигация по хлебным крошкам?

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

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

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

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

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

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

2. Не делайте навигацию слишком большой.

Навигация в виде хлебных крошек является второстепенным инструментом по сравнению с основной панелью навигации, поэтому она не должна быть слишком большой или заметной на странице. Например, на веб-сайте DHL их основная панель навигации большая и узнаваемая, с такими столбцами, как «Экспресс», «Посылка и электронная коммерция», «Логистика» и т. Д. Их навигационная цепочка — это меньший раздел ниже, который гласит: «DHL Global |> Логистика» |> Грузовые перевозки ».Вы же не хотите, чтобы пользователи ошибочно принимали вашу навигацию по хлебным крошкам за основную панель навигации.

3. Включите полный навигационный путь в свою навигационную цепочку.

Я погуглил «Неграждане Университета Илона», чтобы попасть на эту целевую страницу, но Илон умен, чтобы включить полный путь навигации, включая «Домой» и «Приемные комиссии». Если вы пропустите определенные уровни, вы запутаете пользователей, и навигационная цепочка не покажется вам полезной. Даже если пользователи не начинали с домашней страницы, вы хотите дать им простой способ изучить ваш сайт с самого начала.

4. Переход от высшего уровня к низшему.

Важно, чтобы ваша навигационная цепочка читалась слева направо, при этом ближайшая ссылка слева — это ваша домашняя страница, а ближайшая ссылка справа — текущая страница пользователя. Исследование, проведенное Nielsen Norman Group, показало, что пользователи проводят 80% своего времени, просматривая левую половину страницы, а 20% — правую, что является веским аргументом в пользу дизайна слева направо. Кроме того, ближайшая слева ссылка будет отображаться как начало цепочки, поэтому вы хотите, чтобы это была ваша страница самого высокого уровня.

5. Следите, чтобы заголовки хлебных крошек соответствовали заголовкам страниц.

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

Nestle также хорошо отличает ссылки от несвязанных с разными цветами — ссылки синего цвета, а ссылки, не являющиеся ссылками, остаются серыми.

6. Проявите творческий подход к дизайну.

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

Например, Target использует навигацию с помощью хлебных крошек на страницах своих продуктов (потому что, кто бы не заблудился в разделе виртуальной обуви?), Но использует символы «/» и простой черно-серый текст.В этом случае тонкая вариация дизайна имеет смысл с точки зрения эстетики их сайта.

7. Держите его в чистоте и не загромождайте.

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

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

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

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

Bed Bath & Beyond использует навигацию на основе атрибутов, чтобы показать пользователям, к какой категории относится их страница продукта, поэтому пользователи могут вернуться к «Кухня» или «Маленькая бытовая техника», чтобы просмотреть похожие товары.Этот тип навигации наиболее эффективен для клиентов Bed Bath & Beyond. Создавая навигацию с помощью хлебных крошек, подумайте, что наиболее полезно для посетителей вашего сайта.

9. Знайте свою аудиторию.

Лучшие практики в области навигации по хлебным крошкам побуждают веб-дизайнеров размещать элементы навигации вверху страницы, но Apple, одна из самых ценных компаний всех времен, бросает вызов этой логике, размещая элементы навигации в нижней части своего сайта. В конце концов, очень важно знать свою аудиторию.Клиенты Apple, как правило, технически подкованы и, вероятно, найдут навигацию, если они им понадобятся. Учитывайте потребности клиентов и проводите A / B-тестирование, если вы не уверены.

Навигация по хлебным крошкам в HTML и CSS

Панировочные сухари не только полезны — их также легко добавить на ваш сайт с помощью небольшого кода HTML и CSS.

Начнем с HTML, который мы будем использовать для создания самих ссылок. Самый простой способ сделать это — организовать ваши ссылки в элементе неупорядоченного списка (

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

  Вот HTML-шаблон для хлебных крошек, который вы можете использовать:

  Обратите внимание, что я также заключил неупорядоченный список в элемент HTML