Все, что вам нужно знать о панировочных сухарях

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

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

Важность панировочных сухарей

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

Отображение хлебных крошек в поиске Bing

Как добавить панировочные сухари?

Самый простой способ добавить хлебные крошки на ваш сайт – использовать тему, предлагающую эту функцию по умолчанию. Системы управления контентом, такие как автономный WordPress, предлагают плагины для вставки настраиваемой строки навигации над заголовком статьи. Если ваш конструктор сайтов не предлагает такую ​​функцию, вам необходимо добавить ее вручную на каждую страницу с помощью тега привязки HTML. Например, инструменты для создания сайтов, такие как Weebly, не предлагают темы с хлебными крошками по умолчанию. Следовательно, вам нужно добавить его на каждую страницу отдельно с помощью собственного HTML / CSS.

Примеры панировочных сухарей

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

Примеры панировочных сухарей

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

Панировочные сухари Yoast SEO

Панировочные сухари Yoast SEO

Навигационная цепочка Yoast SEO будет простой текстовой, и вы можете добавить поле и тень, используя приведенный ниже CSS:

#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px;
font-size: 16px;
}

Пользовательские хлебные крошки CSS

Вы можете добавить собственные хлебные крошки CSS, особенно если на вашем сайте меньше страниц. Ниже представлены горизонтальные хлебные крошки CSS, которые можно добавить на свой сайт. Ознакомьтесь с нашей статьей о том, как добавить эти хлебные крошки на свой сайт Weebly.

CSS Breadcrumb Style 1

CSS Breadcrumb Style 2

CSS Breadcrumb Style 3

CSS Breadcrumb Style 4

CSS Breadcrumb Style 5

Бонусный стиль CSS Breadcrumb 6

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

0

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *