Каждый вебмастер и администратор старается сделать собственный ресурс максимально комфортным для пользователей, поэтому важно продумывать любую мелочь. Сюда как раз и относят хлебные крошки платформы WordPress, которые показывают путь пользователя и помогают ему не заблудиться. Ниже разберемся, что это такое, для чего нужно, как их вывести и убрать при необходимости.
Содержание
Какие бывают хлебные крошки
Хлебными крошками (или Breadcrumbs) называют цепочку ссылок с разделителями, по которой можно понять, где сейчас находится посетитель и как он туда попал. Обычно такая строчка есть у подавляющего количества вебсайтов и располагается выше заголовка страницы.
Основной признак качественных Breadcrumbs: полноценное соответствие дизайну ресурса и кликабельные названия каждой страницы, но не текущей.
Есть несколько видов хлебных крошек:
- Линейные. Выстраивают полноценный маршрут человека от основной страницы до текущих. Навигационная система входит в description. В результате становится понятно, какова структура у определенного ресурса. Это самые простые крошки, которые видел каждый.
- Обратные. В этом случае на странице создается кнопка «Назад». По факту происходит дупликация аналогичной функции браузера, притом она становится гораздо удобнее. Такие кнопки обычно используются в интернет-магазинах и аналогичных порталах.
- Атрибутивные. Формирование происходит с помощью группирования подразделов, категорий и тегов. Эти крошки используются в интернет-магазинах, где есть множество категорий товаров. Также встречаются на информационных сайтах.
- Комбинированные. Они приносят пользу потому, что выполняют определенные задачи. Например, одни крошки отвечают за историю просмотров, а другие — за структуру сайта. В результате навигация становится удобной.
- Сделанные на основе истории переходов. Такие крошки подойдут для длительного серфинга в пределах одного сайта. Единственное, что создает дискомфорт — неудобно переходить на определенную страницу из поисковых систем.
При создании хлебных крошек нужно знать ряд моментов:
- Текущее положение пользователя должно оставаться некликабельным. Иначе возникнет циклическая ссылка, плохо влияющая на дальнейшее продвижение.
- Не создавайте Breadcrumbs на главной странице. В противном случае навигационная цепочка станет включать единственное звено со ссылкой на основную страницу.
- Пользователи должны видеть Breadcrumbs. Людям привычно видеть навигацию под шапкой. Чтобы пользователям было удобно, продублируйте ее внизу страницы.
- Хлебные крошки хорошо сочетаются с микроразметкой. Поисковики предпочитают считывать размеченные данные об описываемом объекте.
Для чего нужны хлебные крошки на сайте
Хлебные крошки:
- повышают поведенческие факторы;
- улучшают юзабилити. Пользователю благодаря им становится проще ориентироваться на сайте. Человек понимает, где он находится на данный момент и куда нужно перейти, чтобы попасть в требующийся раздел.
- Создают дополнительную качественную перелинковку. Чем страница находится выше в иерархии, тем больше её важность. Поэтому разделы должны ссылаться на главную страницу.
- Прокачивает сниппет и улучшает рост позиций. Если хлебные крошки размечены на портале правильно, то в Google и Яндексе выйдет получить сниппеты с навигацией.
Наконец, Breadcrumbs просто удобны в использовании и не дают заблудиться.
Как сделать в Yoast SEO
В плагине Yoast SEO предусмотрен встроенный модуль, который добавляет хлебные крошки и дает возможность ими управлять. Перейдите во вкладку «Отображение» и найдите раздел «Хлебные крошки». Обратите внимание на ряд моментов:
- для включения функции необходимо установить переключатель в позицию «Включено»;
- разделитель заполняется по желанию;
- для разных страниц нужно задать префиксы.
- выведите жирным завершающий элемент;
- чтобы показывать подрубрики публикации, выставьте «Рубрику» в «Таксономии»;
Сохраните настройки. Изменений вы не увидите, поэтому необходимо через функцию указать, где отобразятся 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(); ?>используйте в файлах шаблона; - дальше вставьте код, как и в предыдущем варианте.
Плагин Breadcrumb
Этот плагин прост в использовании и постоянно обновляется. Он устанавливается по классике из поисковой панели.
После этого вы увидите одноименный пункт. Нужно зайти в него и заполнить каждое поле.
Настройки должны происходить в разделе «Options». Внешний вид отображается в «Style». Все нужно скопировать в «shortcodes» и вставить в блог. Для этого необходимо воспользоваться PHP.
Можно воспользоваться улучшенным плагином Breadcrumb NavXT. У модуля отличная функциональность. Также здесь содержатся дополнительные функции.
Плагин получится установить через панель администратора или скачать с официального репозитория. Если вы скачиваете версию от 5.2, то необходимо установить PHP5.3. Пройдите активацию, и соответствующий раздел появится в WordPress.
В параметрах есть 4 закладки. Рекомендуется изучить каждую и изучить все фишки. Например, тут можно поменять стиль, сделать другой текст и т.д.
Дальше задайте вывод информации в шаблоне. Откройте соответствующий файл — разместите в нужном месте код вывода хлебных крошек.
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>Плагин SEO Breadcrumbs
SEO Breadcrumbs легкий в использовании плагин. Благодаря ему получится добавить 5 разных навигационных фишек по хлебным крошкам. Здесь можно использовать любые цветовые сочетания, добавляя всевозможные эффекты.
При желании выйдет выбрать любой стиль панировочных сухарей. Стиль по умолчанию подойдет, если вы желаете реагировать на все устройства.
В плагине поддерживается спецификация схемы для внушительной разметки сниппетов. 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
Если говорить о примерах, то лучше всего это иллюстрируют хлебные крошки на картинке ниже
Далее нужно объяснить основные значения:
- 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. Стоит попробовать один раз и убедиться в этом самостоятельно! Полученным опытом обязательно поделитесь в комментариях.
