Каждый вебмастер и администратор старается сделать собственный ресурс максимально комфортным для пользователей, поэтому важно продумывать любую мелочь. Сюда как раз и относят хлебные крошки платформы WordPress, которые показывают путь пользователя и помогают ему не заблудиться. Ниже разберемся, что это такое, для чего нужно, как их вывести и убрать при необходимости.
Содержание
Какие бывают хлебные крошки
Хлебными крошками (или Breadcrumbs) называют цепочку ссылок с разделителями, по которой можно понять, где сейчас находится посетитель и как он туда попал. Обычно такая строчка есть у подавляющего количества вебсайтов и располагается выше заголовка страницы.
Основной признак качественных Breadcrumbs: полноценное соответствие дизайну ресурса и кликабельные названия каждой страницы, но не текущей.
Есть несколько видов хлебных крошек:
- Линейные. Выстраивают полноценный маршрут человека от основной страницы до текущих. Навигационная система входит в description. В результате становится понятно, какова структура у определенного ресурса. Это самые простые крошки, которые видел каждый.
- Обратные. В этом случае на странице создается кнопка «Назад». По факту происходит дупликация аналогичной функции браузера, притом она становится гораздо удобнее. Такие кнопки обычно используются в интернет-магазинах и аналогичных порталах.
- Атрибутивные. Формирование происходит с помощью группирования подразделов, категорий и тегов. Эти крошки используются в интернет-магазинах, где есть множество категорий товаров. Также встречаются на информационных сайтах.
- Комбинированные. Они приносят пользу потому, что выполняют определенные задачи. Например, одни крошки отвечают за историю просмотров, а другие — за структуру сайта. В результате навигация становится удобной.
- Сделанные на основе истории переходов. Такие крошки подойдут для длительного серфинга в пределах одного сайта. Единственное, что создает дискомфорт — неудобно переходить на определенную страницу из поисковых систем.
При создании хлебных крошек нужно знать ряд моментов:
- Текущее положение пользователя должно оставаться некликабельным. Иначе возникнет циклическая ссылка, плохо влияющая на дальнейшее продвижение.
- Не создавайте Breadcrumbs на главной странице. В противном случае навигационная цепочка станет включать единственное звено со ссылкой на основную страницу.
- Пользователи должны видеть Breadcrumbs. Людям привычно видеть навигацию под шапкой. Чтобы пользователям было удобно, продублируйте ее внизу страницы.
- Хлебные крошки хорошо сочетаются с микроразметкой. Поисковики предпочитают считывать размеченные данные об описываемом объекте.
Для чего нужны хлебные крошки на сайте
Хлебные крошки:
- повышают поведенческие факторы;
- улучшают юзабилити. Пользователю благодаря им становится проще ориентироваться на сайте. Человек понимает, где он находится на данный момент и куда нужно перейти, чтобы попасть в требующийся раздел.
- Создают дополнительную качественную перелинковку. Чем страница находится выше в иерархии, тем больше её важность. Поэтому разделы должны ссылаться на главную страницу.
- Прокачивает сниппет и улучшает рост позиций. Если хлебные крошки размечены на портале правильно, то в Google и Яндексе выйдет получить сниппеты с навигацией.
Наконец, Breadcrumbs просто удобны в использовании и не дают заблудиться.
Как сделать в Yoast SEO
В плагине Yoast SEO предусмотрен встроенный модуль, который добавляет хлебные крошки и дает возможность ими управлять. Перейдите во вкладку «Отображение» и найдите раздел «Хлебные крошки». Обратите внимание на ряд моментов:
- для включения функции необходимо установить переключатель в позицию «Включено»;
- разделитель заполняется по желанию;
- для разных страниц нужно задать префиксы.
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_170958.jpg)
- выведите жирным завершающий элемент;
- чтобы показывать подрубрики публикации, выставьте «Рубрику» в «Таксономии»;
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_171918.jpg)
Сохраните настройки. Изменений вы не увидите, поэтому необходимо через функцию указать, где отобразятся Breadcrumbs.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
Добавьте данный код в шаблон записей. По умолчанию этим документом является single.php. Обновите результат, перейдите в любую публикацию и посмотрите, что изменилось.
Чтобы привести всё в презентабельный вид, рекомендуется добавить элементы CSS.
Как сделать в Rank Math SEO
Инструкция:
- отправляйтесь в раздел с общими настройками;
- перейдите во вкладку «Хлебные крошки»;
- включите функцию Breadcrumbs;
- настройте изменения и сохраните их;
- код
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
используйте в файлах шаблона; - дальше вставьте код, как и в предыдущем варианте.
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_174532-1024x568.jpg)
Плагин Breadcrumb
Этот плагин прост в использовании и постоянно обновляется. Он устанавливается по классике из поисковой панели.
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_175459-1024x499.jpg)
После этого вы увидите одноименный пункт. Нужно зайти в него и заполнить каждое поле.
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_175959-1024x642.jpg)
Настройки должны происходить в разделе «Options». Внешний вид отображается в «Style». Все нужно скопировать в «shortcodes» и вставить в блог. Для этого необходимо воспользоваться PHP.
Можно воспользоваться улучшенным плагином Breadcrumb NavXT. У модуля отличная функциональность. Также здесь содержатся дополнительные функции.
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_175729-1024x499.jpg)
Плагин получится установить через панель администратора или скачать с официального репозитория. Если вы скачиваете версию от 5.2, то необходимо установить PHP5.3. Пройдите активацию, и соответствующий раздел появится в WordPress.
В параметрах есть 4 закладки. Рекомендуется изучить каждую и изучить все фишки. Например, тут можно поменять стиль, сделать другой текст и т.д.
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_180507-1024x490.jpg)
Дальше задайте вывод информации в шаблоне. Откройте соответствующий файл — разместите в нужном месте код вывода хлебных крошек.
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
Плагин SEO Breadcrumbs
SEO Breadcrumbs легкий в использовании плагин. Благодаря ему получится добавить 5 разных навигационных фишек по хлебным крошкам. Здесь можно использовать любые цветовые сочетания, добавляя всевозможные эффекты.
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_181632-1024x499.jpg)
При желании выйдет выбрать любой стиль панировочных сухарей. Стиль по умолчанию подойдет, если вы желаете реагировать на все устройства.
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_181737-1024x499.jpg)
В плагине поддерживается спецификация схемы для внушительной разметки сниппетов. Rich Snippets — это простые результаты поисковой выдачи Google. Тут отображаются параметры структурной разметки. Такие данные появляются из информации, которую получает поисковый робот из HTML-кода страницы.
Вывести строку навигации можно виджетом, шорткодом [seo-breadcrumbs]
.
Код для WooCommerce
В WooCommerce решили проявить заботу о пользователях и тоже создали собственные хлебные крошки. Чтобы это сделать, нужно взять активный шаблон и использовать следующий код:
add_action( 'название области для вставки', 'woocommerce breadcrumb', 5, 0 );
Определенную пометку нужно заменить на место показа Breadcrumb. Для этого воспользуйтесь специальным плагином Woo Visual Hook Guide. Установите его и пройдите активацию из панели администратора WordPress. На странице товара:
- кликните по Start visual hooks;
- выберите, куда будет вставлять Breadcrumb;
- вставьте код в самом низу в function.php и сохраните.
Если вы все сделали правильно, то увидите прямой путь до товара. Обязательно пропишите CSS.
Микроразметка хлебных крошек schema org
Если говорить о примерах, то лучше всего это иллюстрируют хлебные крошки на картинке ниже
![Настройка и вывод хлебных крошек в WordPress](https://wpnonstop.com/wp-content/uploads/2020/11/2020-11-13_183442-2-1024x200.jpg)
Далее нужно объяснить основные значения:
- itemscope — показывает поисковым роботам, что на странице описывается конкретный объект;
- itemtype находится в связке с itemscope, показывает поисковикам тип объекта;
- itemtype=https://schema.org/BreadcrumbList — показывает, к какому типу относится элемент;
- itemprop=»itemListElement» — говорит, что элемент — отдельный пункт списка;
- itemprop=»item» — для разметки URL;
- itemprop=»name» — как называется хлебная крошка;
- meta itemprop=»position» content=»%number%» — этот тег есть только в разметке, его добавляют в конце блока. Он способен определить позицию элемента в цепочке навигации.
Как убрать хлебные крошки
Эта задача точно такая же, как и установка, только наоборот. Для этого достаточно понять, откуда происходит загрузка Breadcrumb. В первую очередь:
- все дополнения по SEO оптимизации следует отключить по одному;
- отключите соответствующие модули;
- после проверьте, как отображаются в браузере страницы проекта.
Если эти действия не помогли, то найдите в файлах темы. Следует узнать, какой div с классом несет ответ за вывод. Делается это так:
- используйте инструмент разработчиков в Google Chrome. Правой кнопкой мышки нужно нажать и открыть «Просмотреть код».
- В новом окошке посмотрите, какой div оборачивает весь блок с URL.
Иногда бывает так, что разработчик решает добавить Breadcrumb на главную страницу. Их потребуется оттуда убрать. Это важно, так как эти хлебные крошки портят дизайн сайта и не несут полезной смысловой нагрузки.
Заключение
Теперь вы знаете, что такое хлебные крошки в WordPress и как их сделать. Этой информации хватит с головой. Перед установкой задумайтесь, нужен ли вам на самом деле этот блок.
Breadcrumbs WordPress будут полезными как для SEO, так и для пользовательского опыта людей на вашем портале. Они делают проще навигацию по сайту и улучшат его структуру.
В целом же, хлебные крошки являются небольшой, однако важной функцией, которая будет достойным дополнением к любому сайту WordPress. Стоит попробовать один раз и убедиться в этом самостоятельно! Полученным опытом обязательно поделитесь в комментариях.