TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Все, что вам нужно знать о breadcrumbs

59

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

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

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

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

Все, что вам нужно знать о breadcrumbsВсе, что вам нужно знать о breadcrumbs

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

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

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

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

Все, что вам нужно знать о breadcrumbs

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

Все, что вам нужно знать о breadcrumbs

Панировочные сухари 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

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

Источник записи: www.webnots.com
Leave A Reply

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