Содержание
зачем нужны и как сделать
Во время создания интернет-магазина важно позаботиться о простоте и удобстве использования сайта. Хлебные крошки — один из элементов, от которых это зависит. В этой статье мы расскажем, что это такое и как они помогают интернет-магазинам и их клиентам.
Что такое хлебные крошки
Хлебные крошки — это навигационная цепочка на сайте, которая показывает путь до страницы, на которой находится пользователь. Изначально они применялись в операционных системах, чтобы показывать маршрут до корневой папки, но уже давно перекочевали на веб-сайты.
Их название произошло от сказки о Гензеле и Гретель, которые кидали крошки в лесу, чтобы по ним найти дорогу домой. Так и в интернет-магазине — благодаря хлебным крошкам клиент всегда знает, в какой части сайта он находится.
Хлебные крошки должны быть у любого интернет-магазина, если на сайте больше двух уровней вложенности, независимо от размеров ассортимента.
Этот элемент, который вы часто видите на сайтах, и называется хлебными крошками
Для чего нужны хлебные крошки
Для улучшения пользовательского опыта
-
Хлебные крошки существенно упрощают навигацию по сайту и помогают находить товары по определенному признаку, например, категории или разделу.
Пользователи могут с легкостью перемещаться между категориями и подкатегориями -
Пользователям не нужно многократно кликать кнопку «Назад» в браузере, чтобы вернуться в нужный раздел. С хлебными крошками можно избежать лишних шагов и быстро перейти куда нужно.
-
Удобная навигация увеличивает время пребывания на сайте. Чем удобней сайт, тем меньше причин у посетителя его покидать. Пользователи смогут углубляться в разделы сайта, а потом возвращаться туда, откуда начали.
SEO-эффект
Хлебные крошки положительно влияют на оценку сайта поисковыми системами.
-
Это естественный способ перелинковки, который повышает авторитетность страниц для поисковика, а также ускоряет их индексацию. Все благодаря правильной иерархии страниц в цепочке, когда на главную ссылается каталог товаров, на каталог — категории, а на категории — страница товара.
-
Google учитывает поведенческие метрики при ранжировании страниц, а именно время пребывания на сайте и глубину просмотра страниц, которые как раз повышают хлебные крошки.
- Хлебные крошки делают сниппет поисковой выдачи более привлекательным. После внедрения необходимого типа микроразметки (BreadcrumbList), пользователи будут видеть хлебные крошки на странице выдачи, что поможет им сразу после клика сориентироваться на сайте. Также микроразметка помогает поисковым роботам разобраться в структуре сайта.
Хлебные крошки без микроразметки и с ней
Реализация на Хорошопе
Для интернет-магазинов на Хорошопе хлебные крошки формируются автоматически, никаких дополнительных настроек производить не требуется.
Создавайте интернет-магазин на платформе Хорошоп и тестируйте все возможности, функции и интеграции бесплатно 7 дней
Оставить заявку
Вы по желанию можете добавить или убрать в навигационной цепочке отображение последнего уровня вложенности, страницы «Каталог», а также бренда товара. Для этого, зайдите в админке в SEO — Дополнительные настройки и поставьте галочку напротив пункта «Отображать на странице товара ссылку на Бренд в хлебных крошках».
Включение отображения бренда в хлебных крошках
После клика на бренд, пользователь попадет в категорию товаров, которые будут по нему отфильтрованы. Это делает использование сайта более удобным, а также помогает ранжированию страниц в поисковой выдаче.
Фильтрация категории по бренду при помощи клика в хлебных крошках
Вывод
Хлебные крошки отыгрывают важную роль для юзабилити сайта и SEO, поэтому мы внедрили их на сайтах Хорошопа и дополнили особенностями вроде ссылки на бренд.
Использование навигационной цепочки привносит ряд положительных моментов для вашего интернет-магазина:
-
упрощает навигацию по сайту;
-
увеличивает длительность пребывания на сайте и глубину просмотра страницы;
-
влияет на ранжирование страниц в Google;
-
делает сниппет поисковой выдачи более привлекательным;
-
помогает в перелинковке сайта.
Чтобы убедиться в удобстве этой функции, оставляйте заявку и бесплатно тестируйте собственный интернет-магазин на Хорошопе на протяжении 14 дней!
Как хлебные крошки улучшают SEO и ошибки использования хлебных крошек
Хлебные крошки — это элемент навигации по сайту, который состоит из интерактивных ссылок. Они позволяют пользователю быстро перемещаться между страницами — сделать шаг назад, два или начать свой маршрут сначала. Термин позаимствован из сказки “Гензель и Гретель”, в которой дети находят дорогу домой по разбросанным хлебным крошкам.
Этот элемент помогает посетителям понять структуру сайта и упрощает пользование.
Виды хлебных крошек
На основе иерархии. Самый распространенный вид хлебных крошек. Путешествие по сайту с помощью подкатегорий.
Домашняя страница — Категория — Подкатегория — Товар
На основе атрибутов. Обычно используется на коммерческих сайтах. С их помощью можно направить пользователя к конкретному продукту, сортируя варианты по характеристикам.
Домашняя страницы — Продукт — Размер — Цвет
На основе истории. Хлебные крошки выстраиваются по страницам, которые пользователь уже посещал.
Чем хлебные крошки полезны SEO
-
Улучшение взаимодействия с пользователем. С помощью хлебных крошек пользователь может быстро перемещаться между разделами и создавать релевантные сеансы. Важно, чтобы посетители были сосредоточены на контенте, а не путались, куда нажимать дальше.
-
Снижение показателя отказов. Посетитель вряд ли покинет ваш сайт, если найдет то, что ищет. Хлебные крошки в результатах поиска могут быстро перенести пользователя на релевантную страницу. Это снижает показатель отказов. К тому же, из-за органического поиска посетители редко заходят на сайт с главной страницы. Хлебные крошки предлагают альтернативные варианты исследования сайта.
Ошибки в использовании хлебных крошек
1. Сайт не нуждается в крошках
Если у вас относительно простой сайт, нет смысла использовать хлебные крошки. Ограничьтесь навигацией.
2. Вы размещаете их в неправильном месте
Хлебные крошки — стандартный элемент сайта и пользователи уже привыкли наблюдать его в определенном месте. Как, правило, указатели находятся над содержанием страницы, под навигацией сайта.
3. Вы не используете полный путь
Если вы пропускаете какие-то страницы в цепочке, то рискуете запутать посетителей и лишиться полезного навигационного пути. Вам нужна полная цепочка с максимально возможным количеством полезных ссылок.
4. Вы делаете указатели слишком сложными
Хлебные крошки не нуждаются в вычурности и обилии графических элементов. Ссылки достаточно разграничить символом / или >. Задача хлебных крошек — помогать пользователю, а не отвлекать.
5. Крошки перестали быть крошками
Не размещайте ссылки в большом формате. Вспомогательный инструмент не должен выезжать на первый план. Но не впадайте в крайность — крошки должны быть видимыми.
6. Не хватает интерактивности
Хлебные крошки не всегда выглядят на сайте так, будто они интерактивны. Нет характерного подчеркивания или выделения цветом. Но пользователь должен сразу видеть, что он может использовать элемент сайта, а не просто на него смотреть. На такой простой вещи, вы рискуете потерять преимущество.
7. Вы увлеклись оптимизацией
Не используйте много ключевых слов в хлебных крошках. Чрезмерная оптимизация может привести к штрафам со стороны поисковых систем. Хлебные крошки — это полезное дополнение к основным функциям сайта. Так что не перегружайте их и не заменяйте ими навигацию.
Хлебные крошки — простой способ навигации по сайту
Хлебные крошки — это простое изменение, которое может помочь сайту выделиться в результатах поиска. Хоть они и не гарантируют значительного увеличения результатов поиска, но они полезны как для пользователей, так и для поисковых систем.
Элемент хлебных крошек — ThemeFusion | Avada Website Builder
Перейти к содержимому
Как мы можем вам помочь?
Поиск:
08.03.2021
Элемент Breadcrumbs появился в Avada 6.2 и предлагает вам способ добавлять Breadcrumbs в любом месте содержимого, а не только в строке заголовка страницы. Он прост в использовании и имеет ряд вариантов содержимого и стилей. Подробнее обо всех параметрах элемента читайте ниже или смотрите видео для визуального обзора.
Обзор
Элемент Breadcrumbs легко добавить в любое место содержимого. Следуйте этим простым шагам ниже.
Шаг 1. Убедитесь, что Avada Builder или Avada Live активны.
Шаг 2. Создайте или выберите столбец, в который вы хотите добавить элемент. Нажмите «Добавить новый элемент».
Шаг 3. Выберите Breadcrumbs из списка элементов.
Шаг 4. Существует ряд параметров, влияющих как на то, что будут отображаться хлебные крошки, так и на то, как они будут отображаться. Вы можете выбрать префикс, разделитель, размер шрифта, цвет текста и выравнивание. Вы также можете указать, следует ли отображать категории сообщений и архивы типов сообщений в пути хлебных крошек.
Шаг 5. Если вы хотите выполнить дальнейшую настройку, есть параметры для видимости элемента, а также поля для класса CSS и идентификатора CSS. Существует также вкладка «Дополнительно», если вы хотите настроить загрузку «хлебных крошек» на странице. После того, как вы завершили выбор параметров, нажмите «Сохранить».
Подробное описание всех опций элемента читайте ниже.
858 312 Предприятия доверяют Avada
Получить Avada
858 312 Предприятия доверяют Avada
Получить Avada
858,312 Компании доверяют Avada
Получить Avada
Параметры элемента
Местоположение: Экран редактирования в каждом элементе.
Вы можете развернуть столько отдельных элементов на страницах и в сообщениях, сколько вам нужно, ограничений нет. Внутри каждого из элементов вы увидите вкладку или вкладки, содержащие множество параметров, которые позволяют вам настраивать каждый элемент независимо и значительно повышают вашу гибкость и творческие возможности.
Примечание: На показанных ниже экранах параметров показаны ВСЕ доступные параметры для элемента. Если у вас включены сетевые зависимости параметров Avada, вы увидите только параметры, относящиеся к вашему выбору, поэтому экран параметров может выглядеть несколько иначе.
Вкладка «Общие»
-
Префикс — Управляет текстом перед навигационным меню. Можно установить глобально в параметрах темы ( Avada > параметры темы > хлебные крошки / панель поиска )
-
Разделитель — Управляет типом разделителя между каждой навигационной крошкой.
-
Показать категории сообщений – Включите, чтобы отображать категории сообщений в пути навигации.
-
Показать архивы типов сообщений — Включите, чтобы отображать архивы типов сообщений в пути навигационных крошек.
-
Видимость элемента — Позволяет управлять видимостью столбца. Выберите один или несколько из Малый экран, Средний экран, или Большой экран .
-
Элемент Sticky Visibility — (виден только в том случае, если для родительского контейнера установлено значение Sticky) Выберите отображение или скрытие элемента в зависимости от текущего режима (обычного или фиксированного) его родительского контейнера. Вы можете выбрать более одного за раз.
-
Класс CSS — Позволяет добавить класс для столбца.
-
Идентификатор CSS — Позволяет добавить идентификатор для столбца.
Просмотр экрана параметров
Вкладка «Дизайн»
-
Выравнивание — Выберите выравнивание хлебных крошек. Выберите из Text Flow, Left, Right или Center .
-
Размер шрифта — Управляет размером шрифта для текста хлебных крошек. Введите значение, включая единицу измерения CSS (px, em, rem), например: 10px.
-
Цвет текста – Управляет цветом текста шрифта хлебных крошек. Оставьте пустым для значения по умолчанию.
-
Цвет текста при наведении — Управляет цветом текста при наведении шрифта хлебных крошек. Оставьте пустым для значения по умолчанию.
-
Поля – Управляет полями вокруг элемента. В пикселях или процентах, например: 10px или 10%.
Просмотр экрана параметров
Вкладка «Дополнительно»
-
Тип анимации — Управляет типом анимации столбца. Выберите между Нет, Отражение, Затухание, Вспышка, Резиновая лента, Встряхивание, Скольжение, Масштабирование, Отразить по вертикали, Отразить по горизонтали, или Скорость света .
-
Направление анимации — Управляет направлением анимации столбца. Выберите между Сверху, Справа, Снизу, Слева, или Статика .
-
Скорость анимации – Управляет скоростью анимации столбца. Выберите между 0,1 до 5.
-
Смещение анимации – Управляет запуском анимации. Выберите между По умолчанию, Верх элемента попадает в нижнюю часть окна просмотра, Верх элемента попадает в середину окна просмотра, или Нижняя часть элемента входит в окно просмотра .
Просмотр экрана параметров
Глобальные параметры
Примечание: Настройка по умолчанию будет использовать глобальные параметры, назначенные для этого элемента в глобальных параметрах. У этого элемента нет глобальных параметров в разделе элемента Avada Builder, вместо этого он использует Breadcrumbs раздела Global Options для управления глобальными опциями для элемента.
858,312 Businesses Trust Avada
Get Avada
858,312 Businesses Trust Avada
Get Avada
858,312 Businesses Trust Avada
Get Avada
Submitting your vote…Thank you for your vote!
Ссылка для загрузки страницы
Перейти к началу
«Хлебные крошки» — Система Carbon Design
«Хлебные крошки» — это вторичный шаблон навигации, который помогает пользователю понять
иерархию между уровнями и перемещаться по ним назад.
Хлебные крошки показывают пользователям их текущее местоположение относительно информации
архитектуру и позволяют им быстро переходить на родительский уровень или предыдущий
шаг.
Панировочные сухари эффективны в продуктах и впечатлениях, которые имеют большое количество
контента, организованного в виде иерархии, состоящей из более чем двух уровней. Они занимают мало
пространство, но по-прежнему обеспечивают контекст для места пользователя в навигации
иерархия.
Хлебные крошки всегда рассматриваются как второстепенные и никогда не должны полностью заменять
основная навигация. Они не должны использоваться для продуктов, которые имеют одинарную
навигация по уровням, потому что они создают ненужный беспорядок.
Если вы проводите пользователей через многошаговый процесс, используйте
индикатор прогресса вместо этого.
Carbon поддерживает два типа панировочных сухарей. Оба типа имеют одинаковый стиль, но
методы заполнения навигационной цепочки различны. Панировочные сухари
используемый тип должен быть одинаковым для всего продукта.
Тип навигационной цепочки | Назначение |
---|---|
На основе местоположения | Они показывают иерархию сайта и показывают, где находится пользователь. |
На основе пути | Они показывают фактические шаги, предпринятые пользователем для перехода на текущую страницу, а не отражают информационную архитектуру сайта. Хлебные крошки на основе пути всегда генерируются динамически. |
Селектор тем
Селектор вариантов
Копия в буфер обмена
Живой редактор для компонента Breadcrumb
<Хлебная крошка>
<
<9000 HREF ="/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/"/">
.0003
Breadcrumb 2
Breadcrumb 3
- Прямые ссылки на страницы 3 пользователей
- страница родительского уровня.
- Разделитель: Четко различает каждую страницу.
Хлебные крошки размещаются в верхней левой части страницы. Они сидят под
заголовок и навигация, но над заголовком страницы.Основные элементы
Ссылка на страницу
- Каждая ссылка на страницу должна быть короткой и четко отражать ее местоположение или объект
ссылки на. - Начните с родительской страницы самого высокого уровня и углубитесь в информацию
архитектура по мере продвижения по хлебной крошке. - По умолчанию текущая страница не отображается в навигационной цепочке.
Содержимое переполнения
Когда пространство становится ограниченным, используйте
меню переполнения, чтобы обрезать хлебные крошки.
Должны отображаться первые и последние две ссылки на страницы, а остальные — «хлебные крошки».
между ними сжаты в дополнительное меню. Панировочные сухари никогда не должны заворачиваться
на вторую строку.Для получения дополнительной информации см.
рекомендации по содержанию.Все страницы в компоненте «хлебные крошки» должны быть интерактивными (кроме
текущую страницу) и ссылки на соответствующие страницы.Мышь
Пользователи могут активировать элемент, щелкнув ссылку на странице навигации.