Хлебные крошки (breadcrumbs) — важный элемент навигации на сайте, который помогает пользователям и поисковикам понять структуру страниц и быстро перемещаться по разделам. В WordPress существует много готовых решений, но часто нужны уникальные хлебные крошки, идеально вписывающиеся в дизайн и логику сайта. В этой статье мы разберём, как создать собственную хлебную навигацию с учётом SEO, а также рассмотрим полезные плагины и примеры кода.
Что такое хлебные крошки и почему они важны для SEO
Хлебные крошки — это цепочка ссылок, обычно расположенная в верхней части страницы, которая показывает путь от главной страницы до текущей. Помимо удобства для пользователей, они помогают поисковым системам лучше индексировать структуру сайта, улучшая видимость в выдаче.
Основные преимущества:
- Улучшение юзабилити — пользователи легко ориентируются на сайте.
- Снижение показателя отказов — посетители быстрее находят нужную информацию.
- Улучшение внутренней перелинковки — поисковые боты проще обходят сайт.
При этом важно, чтобы хлебные крошки были разметкой Schema.org и корректно отображались в HTML, что повышает шансы на расширенный сниппет в поисковой выдаче.
Создание кастомных хлебных крошек в WordPress: структура и логика
Основные требования к коду
Прежде всего нужно понимать, что хлебные крошки должны:
- Отображать путь от главной страницы до текущей с учётом иерархии.
- Поддерживать разные типы страниц — записи, таксономии, страницы, вложенные страницы.
- Иметь корректную микроразметку Schema.org для SEO.
Пример функции wpbegin_get_breadcrumb()
Ниже пример функции, которую можно добавить в файл functions.php вашей темы, чтобы вывести хлебные крошки:
function wpbegin_get_breadcrumb() {
if (is_front_page()) {
return '';
}
$delimiter = ' » ';
$home = 'Главная';
$before = '<span class="current">';
$after = '</span>';
echo '<nav class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">';
echo '<ul>';
// Главная
echo '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">';
echo '<a href="' . home_url() . '" itemprop="item"><span itemprop="name">' . $home . '</span></a>';
echo '<meta itemprop="position" content="1" />';
echo '</li>';
$position = 2;
if (is_category() || is_single()) {
$categories = get_the_category();
if ($categories) {
$category = $categories[0];
$parents = get_ancestors($category->term_id, 'category');
$parents = array_reverse($parents);
foreach ($parents as $parent_id) {
$parent = get_category($parent_id);
echo '<li>' . $delimiter . '<a href="' . get_category_link($parent->term_id) . '">' . $parent->name . '</a></li>';
$position++;
}
echo '<li>' . $delimiter . $before . get_the_title() . $after . '</li>';
} else {
echo '<li>' . $delimiter . $before . get_the_title() . $after . '</li>';
}
} elseif (is_page()) {
global $post;
if ($post->post_parent) {
$parents = get_post_ancestors($post->ID);
$parents = array_reverse($parents);
foreach ($parents as $parent_id) {
$parent = get_post($parent_id);
echo '<li>' . $delimiter . '<a href="' . get_permalink($parent->ID) . '">' . get_the_title($parent->ID) . '</a></li>';
$position++;
}
}
echo '<li>' . $delimiter . $before . get_the_title() . $after . '</li>';
} elseif (is_tag()) {
echo '<li>' . $delimiter . 'Метка: ' . single_tag_title('', false) . '</li>';
} elseif (is_author()) {
echo '<li>' . $delimiter . 'Автор: ' . get_the_author() . '</li>';
} elseif (is_search()) {
echo '<li>' . $delimiter . 'Результаты поиска по запросу: ' . get_search_query() . '</li>';
} elseif (is_404()) {
echo '<li>' . $delimiter . 'Ошибка 404 - страница не найдена</li>';
}
echo '</ul>';
echo '</nav>';
}
Для вывода хлебных крошек в теме достаточно вызвать wpbegin_get_breadcrumb(); в нужном месте, например, в файле header.php или page.php.
Плагины для хлебных крошек и их преимущества
Если не хочется писать код, можно использовать плагины. Вот проверенные решения с поддержкой SEO:
1. Breadcrumb NavXT
Один из самых популярных плагинов для хлебных крошек. Позволяет гибко настраивать структуру, стили и микроразметку. Поддерживает WooCommerce, таксономии и пользовательские типы записей.
Установка:
- Перейдите в админку WordPress > Плагины > Добавить новый.
- Введите в поиске «Breadcrumb NavXT» и установите плагин.
- Активируйте и настройте через меню Настройки > Breadcrumb NavXT.
2. Yoast SEO (встроенные хлебные крошки)
Помимо SEO-оптимизации, Yoast SEO умеет выводить хлебные крошки с микроразметкой. Нужно активировать в настройках SEO > Внешний вид поиска > Хлебные крошки.
Для вывода нужно вставить в тему:
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
3. WPShop: использование плагина Clearfy Pro
Если у вас уже есть плагин Clearfy Pro, он позволяет гибко настраивать хлебные крошки и оптимизировать их для SEO без лишних плагинов, что ускоряет сайт.
Дополнительные советы по SEO хлебных крошек
Правильная микроразметка Schema.org
Для лучшего восприятия поисковыми системами используйте разметку BreadcrumbList и ListItem. Это позволяет Google показывать хлебные крошки в сниппетах.
Избегайте дублирования
Не выводите хлебные крошки на главной странице и страницах с дублирующимся контентом, чтобы избежать негативного влияния на SEO.
Оптимизация под мобильные устройства
Убедитесь, что хлебные крошки адаптивны и читаемы на мобильных — используйте CSS медиа-запросы и компактные символы-разделители.
Вывод
Создание уникальных хлебных крошек в WordPress — задача несложная, если понимать структуру сайта и требования SEO. Вы можете написать собственную функцию, использовать популярные плагины или воспользоваться функционалом Clearfy Pro от WPShop для оптимизации. Главное — уделить внимание микроразметке и удобству пользователей.