Для чего нужны хлебные крошки на сайте
Какие «хлебные крошки» нужны интернет-магазинам (68% сайтов допускают ошибки)?
От переводчика
Юзабилити интернет-магазина — это конструктор, состоящий из множества разных деталей. Одна из шестерёнок этого конструктора — это «хлебные крошки». О них и пойдёт речь в статье. Это мой перевод статьи: http://baymard.com/blog/ecommerce-breadcrumbs. Неточности или ошибки перевода (если Вы такие найдёте) прошу отправлять в личные сообщения — я оперативно внесу необходимые правки. Если статья будет интересна — обязательно переведу и другие материалы подобной тематики.
Введение
«Хлебные крошки» часто считаются не самым интересным компонентом сайта. Однако, последние исследования показали, что они играют далеко не последнюю роль. Что еще более интересно, благодаря данному исследованию удалось обнаружить, что интернет-магазины должны предлагать посетителю два варианта «хлебных крошек» одновременно. Один из них отражает структуру сайта, другой – историю просмотров.
Сопоставляя различные показатели 40 крупнейших сайтов e-commerce, исследователи обнаружили, что 68% интернет-магазинов испытывают трудности с внедрением этого компонента: 45% сайтов располагают лишь одним вариантом «крошек», а у 23% сайтов «хлебные крошки» вообще отсутствуют.
Некоторые из 68% самых успешных интернет-магазинов, слабым местом которых являются «хлебные крошки»
В этой статье мы подробно рассмотрим результаты данного исследования, постараемся определить характерные черты различных вариантов «хлебных крошек» и объяснить, почему интернет-магазинам необходимо использовать оба типа «крошек».
Принципы использования «хлебных крошек»
Если на странице товара отсутствуют «хлебные крошки», для пользователя будет проблематичным просмотреть, к примеру, коллекцию целиком, поскольку отсутствует опция «на шаг вперед» или же нет возможности вернуться к предыдущему разделу. Это вынуждает пользователей предпринимать «радикальные» меры (например, выбирать категорию верхнего уровня, выполнять поиск и т.д.) или пытаться перейти на страницу со всеми товарами. С помощью «крошек» любой пользователь, который не нашел подходящий товар для сравнения или просто хочет посмотреть другие товары, может легко перемещаться по структуре веб-сайта и продолжать последовательно просматривать продукты вместо того, чтобы тратить время на лишние действия.
Вариант «хлебных крошек», основанный на структуре сайта, позволяет пользователям легко переходить к категориям товаров, чтобы подробнее узнать о других товарах в категории. Участник исследований, не уверенный на 100% в выборе куртки, легко перешел к категории «Куртки и пальто» на странице товаров H&M, используя структурный вариант «крошек».
Во время исследования «хлебные крошки» наиболее часто использовались для возврата к категории, в которой находился интересующий товар. Это подобно использованию кнопки «Назад» в интернет-браузере, только с тем различием, что это часть интерфейса веб-сайта. Однако кнопка «Назад» основана на истории переходов по страницам сайта, а «хлебные крошки» чаще всего базируются на его структуре. Для того, чтобы во время просмотра сайта у пользователя не возникало проблем с постоянной очисткой фильтра поиска, рекомендуется использовать «хлебные крошки», в основе которых лежит именно история. С их помощью пользователь переходит на предыдущую страницу, которая зачастую является не просто списком категорий. Например, пользователь мог поставить на этой странице фильтр по какому-либо свойству товара или изменить направление сортировки, или даже войти на страницу товаров путем поискового запроса или рекламы.
На сайте Nordstrom кнопка «Обратно к результатам» позволяем пользователю вернуться к списку товаров с сохранением всех включенных фильтров и настроек сортировки (это относится и к поиску). Однако отсутствие традиционного структурного пути, усложняет процесс возврата к товарам по иерархии (структуре) каталога для пользователей, пришедших из внешних источников.
Некоторые сайты используют «хлебные крошки», которые основаны исключительно на навигационном пути пользователя (истории просмотра страниц). Они эффективно функционируют в качестве каналов «Назад», однако, это ограничивает способность пользователя познакомиться со всем объемом товаров, которые представлены на сайте.
Почему нужно использовать оба типа «хлебных крошек»
Пользователи, которые попадают на страницу товаров нелинейно (например, при помощи внутреннего или внешнего поиска или при нажатии на рекламный баннер), будут часто пользоваться «крошками», чтобы увидеть другие продукты в той же подкатегории. В сущности, это способ найти сопутствующие товары, несмотря на изначальное получение доступа к странице товара совсем из другой части сайта или даже с совершенно другого веб-сайта. Таким образом, структурные «хлебные крошки» невероятно важны для поискового, рекламного и других нелинейных путей входа на сайт, поскольку они позволяют пользователю легко переключаться на линейный просмотр продуктов, когда это возможно.
На сайте Best Buy участник исследования перешел на страницу с переходником для ноутбука Targus из списка «Лидеры продаж» среди аксессуаров. Однако, будучи не уверенным на все 100%, он захотел посмотреть другие адаптеры для ноутбука. К счастью, ему ничего не помешало: структурные «хлебные крошки» перенаправили его, непосредственно к категории «Зарядные устройства и адаптеры для ноутбуков».
Тем не менее, такое положение вещей не всегда удовлетворяет потребностям пользователей, которые получили доступ к странице товара линейным путем. Если пользователь применил несколько фильтров на странице категорий и затем открыл какой-либо страницу определенного продукта, вернувшись обратно в категорию, он чаще всего обнаруживает, что выставленные ранее фильтры не сохранились. Все потому, что это всего лишь ссылка на страницу категории, и она не привязана к истории просмотров пользователя. Проблема решается легко, путем внедрения «хлебных крошек», в основе которых лежит именно история.
Очевидно, оба варианта имеют свои преимущества. Какой из них нужен вам? Оба. Элегантное и достаточно простое решение – установить структурные «хлебные крошки», а затем подключить опцию «Обратно к результатам». Это будет иметь двойное преимущество для пользователя: доступ к категориям, а также возможность вернуться к предыдущей странице с сохранением фильтров, сортировкой и/или поисковым запросом.
Веб-сайты Sears и Macy’s решили противостояние «история vs. структура», внедрив оба варианта. Основанная на истории опция «Обратно к результатам», которая направляет пользователей обратно к предыдущему разделу со всеми сохраненными фильтрами, дополняет структурные «хлебные крошки».
Это хороший пример, казалось бы, обычного компонента сайта, который значительно влияет на удобство пользователя при просмотре каталога товаров. Объединение двух типов «хлебных крошек» позволяет пользователям менять стратегию просмотра товаров и без малейших затруднений перемещаться по страницам товаров.
Что такое хлебные крошки, и как их внедрить на сайте
Поделиться этим постом
Герои сказки братьев Гримм «Гензель и Гретель» разбрасывали хлебные крошки по лесу, чтобы не заблудиться и найти обратную дорогу. Поэтому один из самых популярных элементов навигации и обрёл такое название. Виртуальные «крошки» помогают пользователям перейти в нужный радел, вернуться в предыдущий или перейти на главную страницу. И это не все плюсы использования навигационной цепочки. В посте я подробнее расскажу о них и рассмотрю разные способы внедрения на сайт.
1. Что такое хлебные крошки
Переход по внутренним разделам создает виртуальную траекторию движения посетителя сайта. Чем больше переходов, тем выше вероятность заблудиться. И если это произошло, пользователь, скорее всего, закроет сайт и будет искать ресурс с удобной и понятной навигацией.
Одним из самых популярных и полезных элементов навигации являются хлебные крошки на сайте. Чаще всего их размещают в верхней части / шапке сайта.
Рассмотрим плюсы использования хлебных крошек для пользователя:
Хлебные крошки рекомендуется внедрять сайтам с уровнем вложенности страниц больше двух.
2. Виды хлебных крошек
Выбор типа отображения навигационной цепочки зависит от уровня вложенности страниц, длины названий разделов и тематики ресурса. Условно хлебные крошки делятся на четыре вида:
3. Как хлебные крошки влияют на SEO
В продвижении SEO хлебные крошки играют важную роль:
4. Что нужно знать при создании хлебных крошек
В процессе внедрения навигационной цепочки на сайт важно учесть несколько правил:
Используйте популярный словарь разметки — Schema.org. Его поддерживают все поисковые системы. В WordPress для создания микроразметки хлебных крошек добавьте участок кода в нижнюю часть раздела functions.php. Пример кода:
В данном случае itemscope указывает на тип объекта, а itemprop описывает раздел, который нужно указать в цепочке хлебных крошек.
Google рекомендует использовать форматы Microdata, RDF и JSON-LD для создания хлебных крошек. Пример кода Microdata с использованием словаря schema.org:
5. Как создать хлебные крошки на сайте
Быстрый способ создать хлебные крошки — подключить плагин CMS. Для WordPress используйте популярные плагины Breadcrumb NavXT или SEO Yoast. Рассмотрим пример с Breadcrumb. Для отображения навигационной цепочки нужно скачать плагин и добавить код в header.php, если хлебные крошки нужны на каждой странице. Пример кода:
Редактируйте настройки отображения цепочки в соответствующем разделе плагина:
После сохранения настроек хлебные крошки появятся на сайте:
В Joomla подключение хлебных крошек доступно в разделе «Менеджер модулей» панели управления:
Настройка навигационной цепочки также возможна и вручуную. Пропишите код и добавьте его в место будущего отображения хлебных крошек в HTML. Если они нужны на всех страницах — добавьте код в раздел header.php либо добавьте в раздел functions.php. Пример:
Подводим итоги
Навигационная цепочка на сайте улучшает юзабилити и помогает посетителю сориентироваться в разделах и смежных страницах. Не последнюю роль играют хлебные крошки в SEO: с их помощью формируется привлекательный сниппет, создается перелинковка между страницами и равномерно распределяется вес. Для успешной поисковой оптимизации рекомендуется использовать навигационную цепочку на всех страницах сайта независимо от его тематики.
Навигационная цепочка или хлебные крошки
Что такое «хлебные крошки» на сайте и зачем они нужны
Не знаете зачем нужны «хлебные крошки» на сайте? Вообще не понимаете о чем идет речь? Вроде зашел/зашла почитать о продвижении сайтов, а тут про какие-то остатки продуктов питания рассказывают.
Нет, не уходите! Вы правильно зашли! Сейчас Вы во всем подробно разберетесь.
Итак, «хлебные крошки» на сайте – что же это такое?
Это необычное название носит навигационная цепочка, которая должна присутствовать на любом сайте для повышения его юзабилити.
Этот элемент дает возможность пользователю веб-ресурса понять, на каком уровне вложенности он располагается (от главной страницы и до текущей).
Также при этом присутствует возможность быстрого перемещения на стоящие выше по иерархии структуры сайта уровни.
Ну что, это Вам знакомо? Вы ведь неоднократно использовали «хлебные крошки», гуляя по всевозможным сайтам на просторах интернета. Просто Вы не знали, что этот элемент навигации имеет такое неожиданное название.
Кстати, догадываетесь откуда оно произошло? Да, все верно. Из той самой немецкой сказки про Гензеля и Гретель, использовавших «хлебные крошки», чтобы обозначить свой обратный путь домой. Правда, с ними произошла неприятность – птицы склевали оставленную ими навигационную цепочку.
На сайте же такого быть не может и этот элемент навигации (при его наличии) всегда будет указывать Вам верный путь на главную страничку.
Вот наглядный пример навигационной цепочки «хлебные крошки»:
Нюансы и особенности, о которых нужно знать
Так вот, каждый элемент подобной цепочки должен быть ссылкой на определенный уровень вложенности. И только самая последняя «крошка» должна быть неактивной. Иначе она станет классическим примером циклической ссылки, которых на Вашем веб-ресурсе быть не должно.
Что нужно уяснить
Если Вашей целью является не просто продвинуть свой сайт в ТОП поисковой выдачи, но и создать действительно качественный ресурс, который будет полезен и главное удобен для веб-пользователя, позаботьтесь о том, чтобы «хлебные крошки» присутствовали на всех страничках и указывали ему правильный путь.
Хотите побеседовать на тему статьи? Милости просим в комментарии
Хлебные крошки
Хлебные крошки (навигационная цепочка) — элемент навигации сайта, показывающий путь в структуре ресурса от главной страницы к текущей, на которой в данный момент находится пользователь.
Хлебные крошки выполняют ряд важных функций:
Наличие хлебных крошек уместно на любом сайте, но есть ряд требований, которые необходимо соблюдать для их корректного функционирования.
Микроразметка осуществляется путем добавления специальных HTML-тегов, которые сообщают поисковым роботам к какому типу контента относится элемент.
Поддерживаемые Google форматы микроразметки:
Пример микроразметки хлебных крошек в формате Microdata для страницы «Кружки», которая имеет навигационную цепочку из ссылок «Главная > Каталог > Столовая > Чай и кофе»:
itemscope itemtype=http://schema.org/BreadcrumbList говорит о том, что элемент относится к хлебным крошкам и состоит из цепочки связанных веб страниц.
Далее каждому элементу навигации добавляем следующие атрибуты:
Существует известная проблема в том, что валидатор микроразметки выдает предупреждение, когда в коде нет атрибута itemprop=»item» у последнего элемента хлебной крошки. Это возникает из-за отсутствия у элемента ссылки.
Но это не мешает поисковой системе Google корректно выстраивать цепочку ссылок в сниппете.
Если же вас смущает это предупреждение, то можно не размечать последний элемент (как у нас в примере), либо же использовать другие способы микроразметки.
Ждите новые заметки в блоге или ищите на нашем сайте.
Поколение ЕГЭ. «Гензель и Гретель» братьев Гримм
Да, сказки как-то пропустил, сразу на книжки без картинок перешел, кстати, рекомендую.
У меня был томик без картинок. Так что рекомендую)
Комментарий удален по просьбе пользователя
Редактору понравилась статья
Это вся статья? Ожидал большего.
согласен, главное ссылку впендюрить)
Ну конечно хорошо, что автор пояснил про микрорпзметку(многие это упускают), но лучше было бы если привели пример скрипта, который в автоматическом порядке делает эту разметку. Так как данный скрипт не так уж и просто найти на просторах интернета. И приходится его писать самим.
P.S Если кому нужно, напишу пост в котором разбирается скрипт для автоматической разметки хлебных крошек, на примере фреймворка yii2.
Если возникает проблема с такими примитивным скриптом, но вероятно, лучше вообще не лезть в код.
Как раз у вас в разделе ссылка последняя ведет на раздел в котором находишься 😂
Так только в категориях и это правильно, так как человек может быть не на первой странице, пример:
https://avtogsm.ru/telephone-smartfone-c549.html?offset=40
Нужно брать в учёт то, что данную статью могут читать не только программисты, но и просто владельцы сайтов, которые чаще всего с кодом на вы. Второе, у джунов, я более чем уверен, возникнут трудности
Бедолаги, их еще и в гугле наверное забанили.
Хлебные крошки на сайте: что это такое и как они влияют на SEO
Это выражение – дословный перевод английского термина Breadcrumbs. Считают, что это отсылка к сказке братьев Гримм «Гензель и Гретель». Когда дети отправились в лес, они оставляли за собой дорожку из хлебных крошек, чтобы не потеряться и найти обратный путь. На сайте пользователь тоже совершает определенный маршрут, и с помощью навигационной цепочки может вернуться обратно на один или несколько шагов.
Для чего нужны хлебные крошки на сайте
Чтобы пользователь не заблудился на сайте, ему важно знать, в каком разделе вашего сайта он находится и как вернуться назад. Поэтому навигационная цепочка необходима практически любому информационному или корпоративному сайту, а также интернет магазинам. Мы уже писали о том, как фасетная навигация влияет на ваш ресурс. Теперь поговорим о другом типе навигации – дублирующей, или тех самых Breadcrumbs – хлебных крошках.
У дублирующей навигации есть две основные функции, а именно:
Улучшение юзабилити сайта
Положительное влияние на SEO
Хлебные крошки: какими они бывают
Навигационная цепочка может быть оформлена по-разному. Вот самые распространенные разновидности:
Линейная
Показывает весь путь посетителя сайта от главной страницы до текущей. Если структура слишком сложная и длинная, навигационная цепочка укорачивается. В некоторых случаях главная страница сайта не является начальным звеном. Пример – хлебные крошки на сайте Amazon:
Навигация здесь начинается с одного из разделов каталога, а не с главной страницы.
Система «Назад»
На сайте устанавливается кнопка «Назад к каталогу», «Назад к главной» и т.п. Практически то же самое, что кнопка «Назад» в браузере. Неудобный тип навигации, если на сайте нет поиска.
Линейная + кнопка «Назад»
Объединяет два варианта. В этом случае доступна и линейная навигационная цепочка, и кнопка «Назад».
Хорошо, если кнопка «Назад» присутствует только на тех страницах, на которые пользователи попадают из внутреннего поиска на сайте. Ставить такую комбинацию на всех страницах не имеет смысла.
Как правильно создать хлебные крошки на сайте
Навигационная цепочка пригодится любому ресурсу. При ее создании учитывайте эти несложные правила: