Назад

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

Хлебные крошки

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

ПРИМЕР:

Главная > Категория > Подкатегория > Текущая страница

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

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

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

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

Типы хлебных крошек:

1. Иерархические (структурные)
Показывают путь от главной страницы до текущей.
Пример: Главная > Блог > Статьи > Как выбрать ноутбук.

2. Атрибутивные
Используются на сайтах с фильтрами, например, в интернет-магазинах.
Пример: Главная > Каталог > Ноутбуки > Бренд: Apple > Диагональ: 13 дюймов.

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

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

1. HTML-разметка  

   Используйте семантическую разметку для хлебных крошек. Например:

<nav aria-label=»Хлебные крошки»>
<ol itemscope itemtype=»https://schema.org/BreadcrumbList»>
<li itemprop=»itemListElement» itemscope itemtype=»https://schema.org/ListItem»>
<a itemprop=»item» href=»/»>
<span itemprop=»name»>Главная</span>
</a>
<meta itemprop=»position» content=»1″ />
</li>
<li itemprop=»itemListElement» itemscope itemtype=»https://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog»>
<span itemprop=»name»>Каталог</span>
</a>
<meta itemprop=»position» content=»2″ />
</li>
<li itemprop=»itemListElement» itemscope itemtype=»https://schema.org/ListItem»>
<span itemprop=»name»>Футболки</span>
<meta itemprop=»position» content=»3″ />
</li>
</ol>
</nav>

2. CSS для стилизации
Добавьте стили, чтобы хлебные крошки выглядели привлекательно:

nav ol {
list-style: none;
padding: 0;
display: flex;
gap: 8px;
}
nav ol li {
display: inline;
}
nav ol li:not(:last-child)::after {
content: «>»;
margin-left: 8px;
}
nav ol li a {
text-decoration: none;
color: #007BFF;
}
nav ol li a:hover {
text-decoration: underline;
}

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

4. CMS и фреймворки
В популярных CMS (например, WordPress, Joomla) и фреймворках (например, Laravel, Django) есть встроенные функции или плагины для автоматической генерации хлебных крошек.

А ЕСЛИ НУЖЕН САЙТ: ЛЕНДИНГ | САЙТ | ИНТЕРНЕТ-МАГАЗИНА