В сказке братьев Гримм Гензель и Гретель так и не смогли вернуться домой по хлебным крошкам, так как их склевали птицы. У нас, в SEO, такого не случается.
Хлебные крошки на сайте (от англ. Breadcrumbs) — это цепочки навигации, которые отображают путь пользователя от корня сайта до текущей страницы.
Когда на сайте есть хлебные крошки, пользователю не составит труда понять, в каком разделе он сейчас находится.
Каким сайтам нужны хлебные крошки
Как вы уже поняли, хлебные крошки помогают с навигацией на сайтах со сложной структурой и множеством категорий. Обычно первыми на ум приходят большие интернет-магазины, но для информационных порталов, форумов, блогов, корпоративных ресурсов такая навигационная цепочка тоже нужна. Главный критерий — не вид ресурса, а вложенность его страниц.
Если на вашем сайте линейная структура с максимум двумя уровнями вложенности, в хлебных крошках нет потребности. Но если уровней вложенности больше двух, то без крошек не обойтись. Иначе пользователям будет сложно отследить свой путь до страницы и красивых сниппетов с навигацией вам тоже не видать. Ведь польза хлебных крошек не ограничивается только удобством для пользователей — давайте рассмотрим все плюшки, которые они дают.
3 причины полюбить хлебные крошки
Внедрение хлебных крошек занимает не так много времени, но польза от них действительно большая — улучшается юзабилити, внутренняя перелинковка и ранжирование сайта в выдаче.
1. Улучшение юзабилити
С хлебными крошками на сайте легче ориентироваться. Пользователям всегда видно, где они находятся, как им попасть обратно или на другой раздел ресурса. Особенно, если на страницу товара посетитель попал по ссылке или прямо из выдачи.
Рассмотрим пример. Вы ищите хлебопечку, но модель, которую вы искали, вам не понравилась. Что делать? Конечно же, посмотреть другие хлебопечки, а сделать это можно, воспользовавшись хлебными крошками на сайте.
Также с помощью хлебных крошек можно в один клик переместиться на более высокий уровень вложенности, не используя кнопку браузера «Назад». Ведь если пользователь сайта на какой-либо странице выставил на странице фильтры (например, по мощности товара или цене), то возвращаясь через браузер, он эти настройки может потерять.
Чтобы этого не произошло, интернет-магазины размещают кнопку «Назад». Последовательно нажимая на нее, посетитель может возвратиться на страницы, которые он ранее посещал, не потеряв при этом выбранные настройки фильтров.
2. Качественная внутренняя перелинковка
Так как хлебные крошки — один из видов навигационных меню, они полезны для внутренней перелинковки и участвуют в распределении веса ссылок.
Чем выше страница в иерархии, тем она важнее — на нее передают вес все подчиненные ей страницы. Таким образом, на главную должны ссылаться разделы, на разделы — подразделы, а на подразделы — страницы с товарами.
3. Прокачанный сниппет и рост позиций
Если на вашем сайте правильно размечены хлебные крошки, то в выдаче Гугла можно получить сниппеты с навигационными цепочками.
Как сделать правильные хлебные крошки
Здесь все просто — нужно соблюдать основные правила настройки хлебных крошек и проверить правильность микроразметки данных, прежде чем добавлять их на сайт. Обязательно учтите следующие нюансы:
- На главной странице хлебных крошек быть не должно, так как тогда страница будет ссылаться на саму себя, а это странно само по себе и плохо для оптимизации. По этой же причине навигационная цепочка не должна содержать ссылку на страницу, на которой находится посетитель. Все это можно учесть в настройках плагинов хлебных крошек.
- Хлебные крошки лучше размещать в видимом и привычном для посетителя месте. Стандартное местоположение — под структурным меню веб-ресурса. Но встречаются и такие примеры, когда хлебные крошки дублируются внизу страницы для удобства пользования (нажав много раз «Показать еще», пользователю может быть проблемно быстро вернуться вверх страницы).
- Чтобы ПС могли считать нужную информацию с вашего сайта и использовать ее для сниппетов, вы должны обозначить контент соответствующими HTML-тегами — то есть добавить микроразметку. Так поисковые роботы будут понимать, что на вашем сайте является логотипом, где указана цена, а какие элементы отвечают за хлебные крошки.
Как добавить хлебные крошки для WordPress
Можно использовать специальные плагины (Breadcrumb NavXT, SEO by Yoast) или настроить хлебные крошки самостоятельно.
С плагином
Давайте рассмотрим, как добавить хлебные крошки на сайт с помощью одного из наиболее популярных плагинов для хлебных крошек BreadcrumbNavXT.
Для этого скачиваем плагин (бесплатно, но должна быть версия не ниже WordPress 3.0 и хост должен поддерживать PHP5).
Добавить код хлебных крошек нужно в файл single.php (для всех записей), файл page.php (для статических страниц), category.php (для всех рубрик) или в файл header.php (чтобы показать везде).
Пример кода для добавления:
<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>После этого в меню BreadcrumbNavXT (заходим через административную панель WordPress) можно задать значок разделителя между крошками, настроить ссылки и отредактировать другие опции.
Без плагина
Программный код WordPress прост и добавить в него код хлебных крошек тоже не составит особого труда.
Для этого найдите файл functions.php и вставьте туда следующий код:
function the_breadcrumb() {
echo '<div id="breadcrumb"><ul><li><a href="/">Home</a></li><li>></li>';
if ( is_category() || is_single() ) {
$cats = get_the_category();
$cat = $cats[0];
echo '<li><a href="'.get_category_link($cat->term_id).'">'.$cat->name.'</a></li><li>></li>';
}
if(is_single()){
echo '<li>';
the_title();
echo '</li>';
}
if(is_page()){
echo '<li>';
the_title();
echo '</li>';
}
echo '</ul><div class="clear"></div></div>';
}Главное правило — не вставляйте эту функцию внутри другой функции, чтобы не было конфликта.
Теперь, чтобы хлебные крошки отображались на сайте, просто поместите код «вызова хлебных крошек” в те места, где они должны быть:
<?php the_breadcrumb(); ?>
В принципе, все готово. Для улучшения внешнего вида можно поиграться с дизайном хлебных крошек, отредактировав файл style.css в части идентификатора id=”breadcrumbs”.
Словом, экспериментируйте! И пусть вас согреет то, что отсутствие плагина хлебных крошек на сайте — это хорошо. В этом случае он будет загружаться быстрее.
