Какие «хлебные крошки» нужны интернет-магазинам (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: с их помощью формируется привлекательный сниппет, создается перелинковка между страницами и равномерно распределяется вес. Для успешной поисковой оптимизации рекомендуется использовать навигационную цепочку на всех страницах сайта независимо от его тематики.
Хлебные крошки на сайте: что это такое
Что такое хлебные крошки (Breadcrumb)?
Понятие, хлебные крошки – это маршрут пользователя на сайте, начиная со страницы, на которой он оказался в результате перехода по ссылке, заканчивая страницей, где он остановился, после чего покинул сайт. Услышав этот термин, трудно поверить, что это понятие как-то связано с SEO продвижением и оптимизацией сайта, но его происхождение имеет в себе логическое объяснение.
Вспомните сказку «Гензель и Гретель», а именно эпизод, когда дети пошли в лес, за собой они выкладывали путь из хлебных крошек. Вот и сайтом так же. Замечали, что когда заходите на какой-либо сайт или интернет-магазин, каждый раз совершая действие, он, так сказать, запоминает и «прокладывает» дорогу Ваших действий, дабы Вы смогли вернутся обратно. Это как своеобразный навигатор на сайте.
Для чего нужны хлебные крошки
Хлебные крошки для того и нужны, дабы пользователь не заблудился на сайте, особенно если это сайт агентства продвижения сайта в топ Яндекса, где большое количество различных вкладок с услугами и прайс-листами. Чтобы люди, посетившие сайт могли видеть где они находятся и как вернуться на предыдущий раздел, или же на главную страницу.
Так же, за счёт внедрения хлебных крошек у сайта повышается юзабилити, что приносит дополнительное преимущество и поисковые системы больше помогают продвинуться таким, удобным для пользователя сайтам, порой, не обращаясь к услугам SMM таргетолога или специалистов по настройке различных рекламных компаний.
Улучшение юзабилити сайта, как известно, положительно влияет на SEO-продвижение сайта, тем, что с помощью хлебных крошек можно делать перелинковку ссылок на отдельные страницы или товары и услуги, как это делаем мы в своих статьях, вставляя ссылки в текст.
Ещё одно большое преимущество хлебных крошек, о котором мы уже говорили – удобство на сайте, за счёт которого увеличивается глубина просмотра сайта пользователем и переход внутри сайта, что так же улучшает рейтинг сайта и поднимает его всё выше и выше к топу, а то и вообще в топ, только за счёт правильного формирования хлебных крошек.
Вообще, хлебные крошки могут иметь абсолютно разный вид: числовой, текстовый, разноязыковой и даже с помощью эмоджи. Если мы говорим об интернет-магазинах, то здесь путь будет виден к каждому товару, как правило это выглядит так: каталог – название товара. И при переходе от одного товара к другому открываются всё новые и новые вкладки.
Но не нужно этим злоупотреблять, дабы не запутать пользователя и не раздражать его. Представьте, Вам одновременно интересны несколько единиц, а то и десятков товаров, особенно если речь идёт об оптовых закупках и с каждый открытием карточки товара появляются всё новые и новые вкладки – это не только может запутать, но и раздражать, так как чем больше вкладок, тем меньше названия вкладки «TITLE» видно пользователю.
«Погоди, Гретель, вот скоро луна взойдет, и станут видны хлебные крошки, что я разбросал по дороге, они укажут нам дорогу домой.»
В сказке братьев Гримм Гензель и Гретель так и не смогли вернуться домой по хлебным крошкам, так как их склевали птицы. У нас, в SEO, такого не случается.
Хлебные крошки на сайте (от англ. Breadcrumbs) — это цепочки навигации, которые отображают путь пользователя от корня сайта до текущей страницы.
Когда на сайте есть хлебные крошки, пользователю не составит труда понять, в каком разделе он сейчас находится.
Как видим на скриншоте выше, в цепочке указан путь: основная категория => подкатегория => страница, на которой в данный момент находится пользователь.
Следовательно, если пользователю нужно выбрать схожую категорию, то ему не придется возвращаться на главную страницу и снова проходить весь путь – достаточно кликнуть на нужный раздел.
Кратко о навигации по хлебным крошкам
Навигация – это важно. В интернете напоминает реальную навигацию в крупных магазинах. Когда мы заходим в гипермаркет с конкретной целью, например, купить морепродукты, мы всегда поднимаем голову, чтобы увидеть направление в определенный отдел.
Если мы сумели сориентироваться и найти по навигации морепродукты, мы довольные идем с ними на кассу и едем домой. Если же навигация не помогла, мы можем долго бродить по гипермаркету и ничего не найти. Ну или все-таки найти, потратив на это большее количество времени, нежели бы нам помогла навигация.
Так же и в интернете: если мы заходим на сайт с конкретной целью что-то найти, то в первую очередь либо воспользуемся поиском по сайту, либо будем искать нужную нам категорию. Но на сайтах не всегда интуитивно расположено меню навигации, и это может стать основным поводом покинуть сайт и уйти к конкурентам.
Поэтому важно, чтобы навигация помогала людям найти нужное, а не отпугивала пользователей своей сложностью и нелогичностью.
Где используют хлебные крошки?
Не на всех сайтах используются хлебные крошки. Владельцы ресурсов с небольшим количеством страниц зачастую не хотят заморачиваться, ведь с главной страницы можно попасть в любой раздел сайта. Конечно же, эти сайты должны иметь хорошо структурированное меню навигации.
А вот в интернет-магазинах и форумах без хлебных крошек никуда.
На форумах структура постоянно меняется из-за заслонения старых тем новыми, а в интернет-магазинах не всегда правильно настроена навигация. Часто бывает так, что некоторые товары даже не находятся в нужном разделе, поэтому, не найдя что-то в поиске, можно ошибочно подумать, что других товаров и услуг в этой подкатегории нет. К этой же категории относятся онлайн-библиотеки, интернет-кинотеатры, а также ресурсы с большим количеством информации. Без хлебных крошек пользователь, скорее всего, заблудится на сайте и просто закроет его.
Какие бывают хлебные крошки?
Динамические хлебные крошки
Если, например, увидеть на главной странице раздел с акциями, а далее оттуда перейти к товару, в карточке товара в хлебных крошках отобразится путь именно от страницы с акциями. А если в поиске найти этот же товар, то на странице в хлебных крошках отобразится путь от главной страницы к подразделу, к которому этот товар относится (либо к его бренду). Это и называется динамическими хлебными крошками – те есть сам путь, по которому прошел пользователь, а не по иерархии страниц.
Хлебные крошки с выпадающим списком
Такие хлебные крошки отличаются большей функциональностью, ведь, если навести курсор на подраздел, отображается список с другими подразделами сайта. Прежде всего это удобно для пользователя, ведь ему нет необходимости переходить на главную страницу или на подраздел выше, чтобы выбрать другую категорию.
Пример ниже показывает работу хлебных крошек с выпадающим списком.
Обратные хлебные крошки
Это значит, что на странице товара есть только кнопка «назад». Но она более вариативная: к примеру, если на странице поиска пользователь применил фильтры, то при нажатии кнопки «назад» они не сбросятся, в отличие от использования стандартных кнопок навигации в браузере.
Основные функции хлебных крошек
Улучшение юзабилити
Пользователю всегда комфортно находиться на ресурсе, если он понимает, где находится. Также если есть возможность, находясь на странице, попасть сразу в раздел и подраздел, не возвращаясь в меню.
Кроме того, если конкретная модель не понравилась, пользователь всегда может с легкостью перейти на страницу с другими моделями от этого же производителя.
Красивое представление сниппета в поиске
Про сниппеты мы уже писали ранее. И упоминали о том, как важно, когда сниппет представлен в лучшем виде. Во-первых, это красиво, во-вторых – информативно. Потенциальный клиент сразу видит нужную информацию. Так вот, хлебные крошки позволяют сниппетам быть ещё красивее, и пользователь, ещё даже не заходя на ресурс, уже видит грамотно составленную навигационную цепочку.
SEO и хлебные крошки
Хлебные крошки помогают в оптимизации сайта влиянием на поведенческие факторы, грамотную перелинковку, а также конверсию.
Если правильно настроить и расположить их, то люди захотят возвращаться на сайт и пользоваться услугами, который он предлагает.
Каждый раздел строки – это отдельная ссылка, которая влияет на статический вес других разделов.
Улучшение позиций отдельных категорий можно добиться использованием ключевых слов в названиях этих категорий, но только не стоит переусердствовать.
Не стоит использовать анкорный текст, где преимущественно ключевые слова. Например, «заказать пиццу в иркутске сейчас». Это выглядит некрасиво и читается нелепо.
Ставим юзабилити выше. Главная> Заказать пиццу. Так лучше? Конечно! Гораздо симпатичнее, да и сама фраза не выбивается из вида.
На скриншоте показано, как надо прописывать ключи и как не надо.
Теперь другой пример. Один известный маркетплейс использует обратные хлебные крошки, но ошибка в следующем: в названии товара вписано все, что можно – не хватает только списка доступных языков и размера коробки.
Например, без наименования «Игра Switch на картридже» можно было спокойно обойтись.
Как добавить хлебные крошки на сайт на примере WordPress
Покажем на примере WordPress.
С плагином
Добавляем код хлебных крошек в следующие страницы:
Далее заходим в меню плагина и настраиваем отображение. Ставим разделитель “>” и добавляем ссылки.
Без плагина
В файл functions.php добавляем функцию get_breadcrumb().
Далее в single.php (макет отображение постов) вызываем эту функцию:
Если кажется сложным, можете доверить это нам.
Для Bitrix
В файле header.php шаблона сайта размещаем код вызова компонента bitrix.breadcrumb:
Для Joomla
Определяемся с позицией, в которой модуль хлебных крошек будет выводиться. Отключаем просмотр позиций модулей Joomla.
В менеджере модулей Joomla создаем модуль с названием «Навигатор сайта». Далее отрывается окно настроек => Указываем позицию модуля, название главной страницы, указываем разделитель текста => Сохраняем.
Рекомендации по хлебным крошкам
Существует несколько рекомендаций по размещению хлебных крошек.
Микроразметка хлебных крошек
Чтобы поисковый робот понимал каждый элемент на сайте и красиво показывал его в сниппете.
У нас в блоге микроразметка настроена с помощью Microdata (словарь Shema.org), вот таким образом:
На странице валидатора микроразметки от Google получаем результат:
Где type – Breadcrumblist (хлебные крошки)
itemListElement – Каждый пункт списка
name – тег с названием Хлебной крошки
item – разметка ссылки
Также пример микроразметки с помощью JSON-LD (рекомендован Google как основной способ микроразметки):
Очевидный плюс – это меньше кода.
В валидаторе получаем:
Не использовать на главной
С главной страницы начинается структура сайта. Если она будет ссылаться на саму себя, это будет грозить ухудшению ранжирования сайта.
Лучше располагать хлебные крошки сверху на видном месте
Человек, заходя на сайт, автоматически смотрит на верхнюю часть страницы: на навигационные элементы, меню сайта, а также на баннеры с новостями. Поэтому расположение хлебных крошек сверху точно зацепит глаз пользователя.
Посмотрите, как красиво крошки смотрятся на сайте Audiomania. Обратите внимание на стрелочку, которая ведет от каталога товаров – во-первых, это очень интуитивно, а, во-вторых, пользователь сразу видит, откуда он начал свой путь.
Использовать символ > между названиями разделов (уровней)
Данный символ наглядно показывает последовательность движения между разделами.
Выделяйте последний элемент жирным шрифтом
Последний элемент в списке должен содержать название текущей страницы, а с помощью выделения этого элемента жирным шрифтом можно обеспечить ему более отчетливое отображение. И так как это страница, на которой мы находимся, то последний элемент не может быть ссылкой, дабы избежать цикличности.
При поиске примеров я наткнулся на сайт со странной структурой: страница, где я сейчас нахожусь, содержит в хлебных крошках ссылку саму на себя. Так делать не надо.
Под стиль сайту
Важно запомнить, что крошки должны соответствовать стилистике и не выбиваться из общего оформления.
Ниже мы видим хороший пример, где хлебные крошки соответствуют стилистике сайта: не выбиваются из общего вида, названия подразделов максимально подробно написаны, ссылки ведут на абсолютно каждый подраздел, а не только на основной.
Послесловие
Хлебные крошки важны для сайта. Ведь с ними пользователь чувствует себя увереннее, зная, что не придется делать много дополнительных действий по переходу в подразделы, да и сайт не выглядит джунглями. Правильно настроенные крошки помогут повысить место в выдаче в поиске и доходчиво показать цепочку до товара или услуги в сниппете.
Если на вашем сайте до сих пор не настроены хлебные крошки, а пользователи блуждают по сайту, словно по лабиринту Минотавра, рекомендуем обратиться к профессионалам.