Хлебные крошки
Хлебные крошки (англ. 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) есть встроенные функции или плагины для автоматической генерации хлебных крошек.
А ЕСЛИ НУЖЕН САЙТ: ЛЕНДИНГ | САЙТ | ИНТЕРНЕТ-МАГАЗИНА