На сайте как сделать хлебные крошки: Хлебные крошки | WebReference

Как сделать хлебные крошки в REG.Site

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

Пример хлебных крошек на сайте REG.RU:

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

Как добавить модуль на сайт

1. 1.

   Войдите в режим редактирования сайта.

2. 2.

   Выберите строку, в которую хотите добавить модуль.

3. org/HowToStep»> 3.

   Нажмите на серый плюс.

4. 4.

   Выберите нужный модуль:

Готово, теперь можете переходить к настройкам внешнего вида текста.

Работа с модулем «Хлебные крошки»

Настройка внешнего вида модуля разделена на три вкладки «Контент», «Дизайн», «Дополнительно».

Контент

В блоке «Хлебные крошки» настраивается:

• Название главной страницы. Чтобы его настроить, в параметре Показывать собственный элемент главная переведите переключатель в положение ДА. В появившемся поле введите название, которым должна обозначаться главная страница.

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

  ДА. Выберите иконку из предложенного списка.

• Иконка разделителя. Чтобы её настроить, в параметре Иконка собственного разделителя переведите переключатель в положение ДА. Выберите иконку из предложенного списка.

В этой же вкладке можно настроить фон (однотонный или градиент) для всего модуля.

Дизайн

В блоке «Выравнивание» настраивается положение модуля на странице: слева, по центру или справа.

В блоке «Элементы» настраивается внешний вид ссылки на домашнюю страницу. Здесь настраивается:

• цвет и размер фона вокруг элемента,
• шрифт, цвет, размер, межбуквенный интервал, тень текста,
• цвет, размер рамки элемента.

В блоке «На домашнюю иконка» настраивается цвет и размер иконки рядом со ссылкой на главную страницу:

В блоке «Разделители» настраивается внешний вид разделителя/стрелки, а именно:

• цвет и размер фона вокруг элемента,
• цвет, положение и размер иконки,
• цвет, размер рамки элемента.

В блоке «Текущая» настраивается внешний вид ссылки на текущую страницу. Можно настроить:

• цвет и размер фона вокруг текста,
• шрифт, цвет, размер, межбуквенный интервал, тень текста,
• цвет, размер рамки элемента.

С помощью блоков «Размеры» и ​​«Отступы» настраивается размер всего модуля и его положение на странице. В блоке «Границы» можно настроить рамку для всего модуля. В блоке «Анимация» настраиваются параметры появления модуля на странице (с затемнением, отскок, слайдер и др.).

Дополнительно

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

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

Помогла ли вам статья?

Да

раз уже помогла

Правильные хлебные крошки на сайте — что это, пример

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

Например: Главная>Услуги>Создание сайтов>Создание лендинга

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

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

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

Виды хлебных крошек:
• Линейные. Показывают пользователю, в каком месте иерархической структуры сайта он находится.
• Обратные. Используются в основном в онлайн-магазинах. Вместо полной цепочки в «крошках» отображается только кнопка «Назад». В отличие от аналогичной кнопки браузера, эта кнопка сохраняет пользовательские фильтры и настройки.
• Атрибутивные. Формируются на основе параметров и фильтров, которые задает пользователь при поиске той ли иной страницы. Чаще всего такой тип навигации используется в интернет-магазинах, когда посетитель задает фильтрацию каталога по определенным критериям вроде цвета, размера, бренда и т.д. В этом случае хлебные крошки содержат не только ссылки на разделы сайта, но и заданные свойства.
• Хронологические. «Крошки» показывают историю переходов пользователя на сайте.

Зачем нужны хлебные крошки на сайте

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

Хлебные крошки выполняют следующие функции:

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

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

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

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

5 Участие в перелинковке. Хлебные крошки участвуют в перелинковке страниц — в связывании страниц ссылками. Чем больше ссылок на страницу, тем выше её вес «в глазах» поисковых роботов.

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

Хлебные крошки создаются с помощью плагинов на CMS, на PHP, JavaScript, CSS. Правильные хлебные крошки должны соответствовать следующим рекомендациям:
• Их не должно быть на главной странице сайта.
• Последний пункт хлебных крошек не должен быть ссылкой, так как страница не может ссылаться сама на себя.
• Ссылки в «крошках» должны быть читаемыми, но не кричащими и не выбиваться из общего стиля оформления страницы.
• «Крошки» должны содержать микроразметку. Микроразметка — это дополнительные теги и атрибуты в HTML, которые помогают поисковым роботам понять смысл содержимого страницы, отдельного элемента или сайта в целом. Это подсказки, которые добавляют в код, чтобы улучшить распознавание контента страницы поисковиками. Если в хлебные крошки добавлена микроразметка, то они отображаются в сниппете Google. Яндекс пока их не распознает.
• Путь в хлебных крошках должны прописываться так, чтобы включать конечную страницу. Если взять для примера интернет-магазин, то цепочка ссылок должна заканчиваться названием страницы товара, а не ссылкой на раздел каталога, в котором этот товар находится.

Нужен настоящий SEO-сайт и интернет-реклама? Пишите, звоните:

Наша почта:
Единая справочная: 8 (843) 2-588-132
WhatsApp: +7 (960) 048 81 32
Оставить заявку

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

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

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

Что такое навигационная цепочка?

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

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

Типы навигационных цепочек

Навигация на основе местоположения или иерархии

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

Вот пример навигационных цепочек иерархии из базы знаний HubSpot:

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

Хлебные крошки на основе пути или истории

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

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

Хлебные крошки на основе атрибутов

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

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

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

Советы и примеры навигации по цепочкам

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

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

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

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

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

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

Источник изображения

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

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

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

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

Источник изображения

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

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

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

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

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

Источник изображения

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

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

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

Источник изображения

7. Содержите его в чистоте и порядке.

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

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

Источник изображения

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

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

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

Источник изображения

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

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

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

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

Источник изображения

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

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

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

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

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

  См. хлебные крошки Pen в HTML и CSS от HubSpot (@hubspot) на CodePen.

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