Меню хлебные крошки на сайте: как улучшить пользовательский опыт и видимость в поиске

Хлебные крошки — это иерархическая цепочка ссылок, отображаемая, как правило, вверху страницы. Название меню — отсылка к сказке, где персонажи бросали за собой хлебные крошки, чтобы потом по ним найти путь обратно. Они важны как для пользовательской навигации, так и для SEO-оптимизации сайта. Александр Шестаков, руководитель платформы LinksSape, рассказал, как создать и оптимизировать такое меню для улучшения видимости в поиске.

Что дает навигационное меню

1. Улучшение пользовательского опыта

Вот пример, как меню реализовано на сайте OZON:

Для ресурсов такого типа хлебные крошки важнее всего — когда страниц много, уровней вложенности много, а типичный пользователь изучает больше 1 страницы за посещение. Впрочем, речь не только о маркетплейсах. Интернет-магазины, большие услуговые сайты, информационные и новостные порталы, форумы, блоги — для всех этих категорий хлебные крошки если не критически важны, то как минимум очень полезны.

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

2. Улучшение индексации страниц

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

3. Положительное влияние на ранжирование

У корректно реализованных хлебных крошек нет минусов с точки зрения SEO. А вот плюсы есть, и не один:

• Внутренняя перелинковка через меню помогает поисковым системам определить иерархию страниц.
• Улучшение внутренней структуры сайта — позитивный сигнал и для Яндекса, и для Google.
• Как правило, наличие навигационных элементов улучшает поведенческие факторы, что также положительно сказывается на ранжировании сайта.

Типы хлебных крошек

1. По принципу построения структуры — линейные и динамические

Линейные хлебные крошки — самый распространенный вариант: когда указаны поочередно (по уровню вложенности) все страницы, начиная от главной до текущей. Именно он реализован, к примеру, на сайте уже упомянутого OZON.

В динамическом меню очередность ссылок формируется исходя из страниц, ранее посещенных пользователем, и она не зависит от иерархии сайта. Этот тип меню подходит для онлайн-магазинов и сайтов с переменной структурой. Так сделано на сайте O´STIN:

2. По сложности реализации — простые и с дополнительными элементами

Под простыми меню здесь понимаются хлебные крошки, которые представляют собой просто набор ссылок. Однако иногда их дополняют и другим функционалом:

• Кнопка «Назад». По сути — аналог одноименной кнопки браузера, который может быть удобен для очень больших ресурсов с высокими уровнями вложенности страниц, где пользователи часто возвращаются на ранее простротренные веб-документы. Например, так сделано на сайте Wildberries.

• Выпадающее меню. Это улучшение любого из упомянутых выше видов хлебных крошек. Суть в том, что при наведении на один из уровней пользователь видит другие категории того же уровня и может на них перейти. Этот тип хлебных крошек особенно полезен для сайтов со множеством подразделов. Пример — сайт Onlinetrade.

Настройка хлебных крошек

Для создания этого меню можно применять универсальный алгоритм из 5 шагов. Различия — только в инструментах, некоторые из которых перечислим далее:

1. Подготовьте структуру сайта. Убедитесь, что структура сайта может быть описана как четкая иерархия — чтобы можно было построить путь от каждой внутренней страницы до главной.
2. Выберите тип хлебных крошек. Решите, какой тип хлебных крошек подходит для вашего сайта и какой стиль оформления соответствует вашему дизайну.
3. Добавьте код хлебных крошек. Внедрите код хлебных крошек на вашем сайте. Это может потребовать навыков разработки. Код обычно вставляется в HTML-шаблон или файлы страниц.
4. Настройте хлебные крошки. Определите, какие страницы и разделы будут включены в хлебные крошки, и как будет формироваться навигационная цепочка.
5. Стилизуйте хлебные крошки. Примените стилизацию к хлебным крошкам, чтобы они соответствовали общему дизайну вашего сайта и были хорошо видимы для пользователей.

Инструменты и плагины для создания хлебных крошек:

• Yoast SEO (для WordPress). Если ваш сайт работает на WordPress, плагин Yoast SEO предоставляет базовую функциональность хлебных крошек и позволяет легко настраивать их.
• Breadcrumb NavXT (для WordPress). Этот плагин предоставляет расширенные возможности настройки хлебных крошек для WordPress.
• Schema.org. Добавление микроразметки с использованием схемы Schema.org может помочь поисковым системам лучше понять вашу иерархию страниц и отобразить хлебные крошки в результатах поиска.
• Bootstrap Breadcrumbs. Если вы используете фреймворк Bootstrap, вы можете легко создать стилизованные хлебные крошки с помощью его компонента Breadcrumbs.
• CSS. Если у вас нет доступа к готовым плагинам или вы хотите создать уникальные хлебные крошки, вы можете использовать CSS для их реализации. В этом случае вам может потребоваться помощь разработчика.

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

Оптимизация хлебных крошек для улучшения видимости в поисковых результатах

• Добавьте микроразметку. Это поможет поисковым системам лучше понять их структуру и отобразить хлебные крошки в результатах поиска.
• Создайте читаемую и информативную иерархию. Хлебные крошки должны быть легко читаемыми и отражать реальную иерархию страниц на вашем сайте.
• Оптимизируйте ключевые слова. Если это уместно, включите ключевые слова в хлебных крошках — например, названия товарной категории и самого товара.
• Проверьте, что хлебные крошки ведут на структурно важные страницы вашего сайта, такие как главная страница, категории или разделы с ключевым контентом.
• Убедитесь, что хлебные крошки действительно улучшают навигацию и опыт пользователей на вашем сайте. Мониторьте показатели и оптимизируйте их при необходимости.

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

Итоги

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