Хлебные крошки — что это такое?

Что такое хлебные крошки и как добавить их на сайт

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

Как влияют хлебные крошки на поисковую оптимизацию и как сделать их на сайте с WordPress. Именно об этом пойдет речь в сегодняшней статье. Забегая вперед, скажу, что breadcrumbs помогают вашим пользователям ориентироваться на сайте. Также они имеют положительное влияние на SEO.

Что означает термин

Хлебные крошки (на англ. breadcrumbs) – это подсказки на сайте, которые показывают пользователю, где он находится. Эдакая цепочка, которая создана для навигации.

Они кликабельные, это значит, что посетитель в любой момент может перейти на “уровень” выше – в подрубрику или рубрику. Как правило, breadcrumbs имеют такой вид: главная – рубрика – подрубрика – статья. Последний элемент очень часто удаляют, полагая, что это создает ненужное дублирование.

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

Как влияют на SEO

Использование навигационной ленты считается хорошим тоном в мире поисковой оптимизации.

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

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

Естественно, одна лишь навигационная панель не будет выводить ваш ресурс в топ. Это работает вместе с другими аспектами грамотной SEO-оптимизации.

Если подводить итог, то breadcrumbs помогают:

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

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

Виды хлебных крошек

Да-да, у них есть и разновидности. Их не так много, но все равно стоит учитывать этот момент.

Линейный

Обычная полоска, которая показывает путь от главной страницы к статье. Самый часто встречающийся тип хлебных крошек. В качестве примера можно взять iklife.ru. У нас как раз линейный тип навигационной панели.

Breadcrumbs на iklife

Кнопка “Назад”

Очень неудобный тип навигации, который очень часто встречается в интернет-магазинах. Как правило, пользователи не особо довольны этим и используют аналогичную кнопку в самом браузере. Для информационного сайта такой вариант практически бесполезен.

Гибрид

Этот вариант объединяет два предыдущих. То есть на ресурсе присутствует и линейная навигация и кнопка “Назад”. Можно сказать, что это компромисс, который помогает угодить всем. Но, как я и сказал выше, кнопкой “Назад” люди пользуются крайне редко, предпочитая ей кнопку в самом браузере – благо такие есть во всех современных приложениях.

Обычно навигационная панель расположена на всех страницах, кроме главной. В WordPress это рубрики, метки, статьи и прочие таксономии.

Как создать хлебные крошки на WordPress

Самый простой вариант создания навигационной ленты на WordPress и других сайтах – через html. Вернее, это будет гибрид html и php – иначе придется прописать каждую навигационную цепочку вручную, а это не очень-то приятное занятие.

С помощью шаблона

Разумно будет выбрать шаблон сразу с хлебными крошками. Если вы только продумываете дальнейший сайт и еще не приступили к его созданию – стоит заглянуть в какой-нибудь магазин шаблонов WordPress и поискать там тему с этой функцией (советую Root).

Это будет наиболее практичный вариант, потому как вам не придется устанавливать дополнительные плагины. При этом вам не придется вручную что-то дописывать или править, все будет работать, что называется, из коробки (сразу после установки).

Плагины

Вы можете установить навигационную ленту вместе с плагином. Но учитывайте, что каждый плагин может нагружать вашу CMS еще больше. Если плагинов и так много, то еще один новый может попросту все испортить, замедлив работу сайта.

Yoast SEO – подробная инструкция по настройке крошек

Если в качестве SEO-плагина вы используете Yoast SEO – у меня для вас отличные новости. Breadcrumbs присутствуют в функционале, поэтому вам остается лишь настроить их.

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

Итак, для того чтобы навигационная лента в Yoast SEO работала мы должны разместить в файлах нашего шаблона следующий PHP-код:

Обычно этот код вставляют в общие шаблоны страниц – single.php или page.php. Также некоторые пользователи вставляют этот код в header.php – в самый конец. Сработает ли это конкретно в вашем случае или нет – я не знаю, но вы можете попробовать.

Общие шаблоны страниц можно редактировать через встроенные инструменты WordPress. Идем во “Внешний вид” – “Редактор”, находим нужный файл в списке.

Редактор WordPress

Здесь представлен PHP-код и HTML-разметка. Неподготовленный пользователь может запутаться, но нужно собраться и попытаться понять что и где.

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

Лучше всего разместить breadcrumbs прямо под header – функция get_header(); – как раз служит для его вызова. Поэтому правильно будет расположить код из Yoast SEO прямо под ним.

Но учтите, что для кастомизации навигационной ленты, возможно, придется поработать с CSS-стилями. Они предусмотрены и самим плагином, но могут не подойти.

Вы можете использовать хлебные крошки даже в статьях. Вам нужно просто оставить в нужном месте такой шорткод: Главное меню » Что такое хлебные крошки и как добавить их на сайт .

Но ни код, ни шорткод не будут работать, если функция навигационной цепочки отключена в самом плагине. Чтобы включить ее, вы должны перейти в настройки плагина (вкладка “SEO”) – отображение в поисковой выдаче – хлебные крошки.

Включение хлебных крошек в Yoast SEO

Переключите ползунок на “Включено”, после чего прокрутите страницу вниз и нажмите “Сохранить изменения”. С этого момента хлебные крошки начнут работать.

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

Также вы можете выделять последнюю страницу (или название материала) жирным. Для этого переключите соответствующий ползунок.

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

Breadcrumb NavXT

Простой плагин, который может создать breadcrumbs для вашего проекта. На данный момент у него более 800 тысяч активных пользователей. Плагин имеет собственную панель управления и подходит для большинства сайтов на WordPress.

В Breadcrumb NavXT можно настроить почти все. Внешний вид, отображаемые элементы и их порядок. Тут намного больше возможностей, чем в том же Yoast SEO (именно относительно настройки навигационной цепочки).

Данное расширение можно установить абсолютно бесплатно из каталога WordPress. Найти его можно по ключевым словам.

Breadcrumb

Breadcrumb – расширение для WordPress

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

Плагин простой и легкий. Имеет красивый дизайн (см. скриншот), можно менять цвета. Для использования на небольших проектах его хватит с лихвой.

Есть и другие плагины. Они менее популярны, но вы все равно можете попробовать их. Просто зайдите в каталог плагинов и введите ключевое слово breadcrumbs. ВордПресс сразу выдаст вам несколько десятков подходящих вариантов.

Заключение

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

Практически все современные сайты стараются уделять этому внимание. Не отстают и веб-дизайнеры, сейчас отсутствие breadcrumbs в шаблоне считается очень весомым недостатком. Кто-то даже откажется покупать такой шаблон, только из-за этой, казалось бы, незначительной мелочи. Обязательно учитывайте этот факт и старайтесь делать свой сайт удобным для пользователей.

Если вы хотите узнать больше о создании информационных проектов под заработок, то я советую вам заглянуть на курс Василия Блинова “Как создать сайт”. Автор рассказывает о создании сайта на WordPress, грамотной технической и поисковой оптимизации, а самое главное – об актуальных способах монетизации.

Как сделать хлебные крошки на сайте 🍞 [Полное руководство + бонус]

В детской сказке «Гензель и Гретель» по пути в лес брат и сестра крошили хлеб, чтобы по крошкам найти дорогу домой. Отсюда свое название получили «хлебные крошки» на сайте — они помогают пользователям ориентироваться в иерархии страниц. В сказке крошки склевали птицы, зато на сайте путь от главной до искомой страницы будет надежным.

Разберемся, каким сайтам нужна такая разметка и как ее настроить правильно.

Что такое хлебные крошки на сайте и как они выглядят

Хлебные крошки в SEO (Breadcrumbs) — это навигационная цепочка, показывающая место страницы в иерархии сайта. Она нужна, чтобы пользователь мог быстро перейти на главную, в предыдущий раздел или в корневой каталог. Как они выглядят на странице:

Разметка на страницеТоварная страница citilink.ru

Правильно размеченные хлебные крошки могут попасть в сниппет сайта в выдаче Яндекса и Google. На сниппете вместо обычной ссылки отобразится навигационная цепочка:

Сниппет в GoogleВыдача Google

Отображаемая цепочка в сниппете может меняться в зависимости от пользовательского запроса, но с помощью крошек поисковику будет проще определить категорию контента для поискового запроса.

Каким сайтам нужны хлебные крошки и чем они полезны в SEO

Польза разметки «Breadcrumbs»:

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

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

Делают сниппет нагляднее.
В сниппете благодаря крошкам появляются понятные названия категорий. Это может повысить кликабельность сниппета. Пользователи могут сразу перейти на нужный раздел прямо из выдачи.

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

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

Как добавить разметку хлебных крошек на сайт

Для настройки используют разметку Breadcrumbs. Благодаря разметке поисковикам проще считывать информацию о странице.

Советы для создания правильных хлебных крошек

На главной крошки не нужны.

Главная страница — стартовая, в цепочке навигации на главной просто нечего отображать.

Ссылка на страницу, где находится пользователь, не нужна.

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

Есть два варианта оформления хлебных крошек, чтобы избежать циклической ссылки. Название текущей страницы делают некликабельным, как на сайте apteka.ru:

Разметка на товарной страницеСтраница товара

Второй вариант — текущую страницу убирают из цепочки. В этом примере с lamoda.ru крошки заканчиваются на разделе «Декор настольный», это предыдущая страница для товара Philippi.

Привычное место для хлебных крошек — верхняя часть страницы.

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

Замените первую ссылку на ключ или бренд.

Специалист по оптимизации Сергей Кокшаров (Devaka) советует использовать потенциал первой ссылки в хлебных крошках: вместо слова «Главная» писать основное ключевое слово сайта или название бренда, если один короткий ключ подобрать не получается.

Вместо крошек вида «Главная > Продукция > Пиломатериалы > Брус» сделать «Строительные материалы > Продукция > Пиломатериалы > Брус».

Как настроить разметку BreadcrumbList на сайте

Яндекс формирует крошки по своему алгоритму. Для Google настроить разметку можно вручную с помощью разметки Schema.org.

Разметка «BreadcrumbList» — разновидность «ItemList». Она предполагает использование форматов Microdata и RDFa.

Пример разметки «BreadcrumbList» через Microdata:

Типичная ошибка разметки хлебных крошек

Пользователи часто сталкиваются с ошибкой «Отсутствует поле «id»». Ошибка обычно связана с тем, что пользователи указывают в разметке последним пунктом текущую страницу, которая, логично, не имеет ссылки, чтобы не ссылаться сама на себя. Но все item — это ссылки, так что последний пункт тоже должен быть ссылкой, иначе появляется ошибка.

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

Как проверить разметку хлебных крошек

Проверить внедрение микроразметки можно с помощью инструментов от ПС: инструмента Google и валидатора Яндекса.

В обновленной версии Google Search Console внедрили отчет «Breadcrumbs», в русской версии он называется «Строки навигации» и находится в категории «Улучшения». Отчет показывает ошибки, связанные с отображением микроразметки в выдаче Google.

Проверить разметку на сайте в консолиОтчет в Google Search Console

Плагины разметки для разных CMS

Добавить навигационную цепочку в сниппет можно при помощи специальных плагинов для CMS.

WordPress

Код разметки хлебных крошек нужно поместить в файлы:

показать крошки везде — в файл header.php;

для всех записей — в файл single.php;

для статистических страниц — в файл page.php;

для всех рубрик — в файл category.php.

В меню плагинов можно настроить ссылки, задать значок разделителя для ссылок.

Joomla

Добавить хлебные крошки в CMS Joomla можно с помощью модуля «Навигатор сайта», тип модуля — «mod_breadcrumbs». Он находится в Панели управления > Расширения > Менеджер модулей.

Модуль для Joomla

Настройка модуля

Настройте модуль под свой сайт и укажите:

позицию модуля, в которой он будет выводиться на странице (отображение позиций включается так: Расширения — Менеджер шаблонов — Настройки — опция Просмотр позиций модулей — Включено);

название главной страницы;

разделитель текста для элементов навигации (обычно «/»).

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

Opencart

Хлебные крошки для движка Opencart устанавливают с помощью модуля. Под разные версии CMS есть разные модули: «Умные хлебные крошки» для Opencart 3.0, Правильные хлебные крошки для Opencart 2.x. Есть бесплатный модификатор, который делает неактивной ссылку на текущую страницу в хлебных крошках.

Webasyst

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

Плагин разметки для Webasyst

Настройка плагина

1С Битрикс

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

Moguta

Для этого движка есть бесплатный плагин Хлебные крошки. Для установки в Панели управления сайтом зайдите в раздел Маркетплейс, там найдите бесплатный плагин и запустите установку.

Плагин для CMS Moguta

Установка плагина

Проверьте правильность настройки с помощью валидатора Яндекса или Google.

Бонус: фишка для повышения CTR в выдаче с помощью хлебных крошек

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

Читатель блога PR-CY и оптимизатор Витя Смертный поделился своим опытом работы с сайтом 100.ks.ua: чтобы сделать сниппет в выдаче заметнее, он добавил пару тематических эмодзи в описание и хлебные крошки.

Эмодзи в сниппете в выдачеСниппет сайта в выдаче

После добавления эмодзи сниппет показал рост кликабельности. Он стал заметнее на белом фоне выдачи.

Как увеличить кликабельность сниппетаГрафик с CTR сниппета Показатели роста CTR сниппетаРост CTR сниппета

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

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

Эмодзи и смайлы можно брать из каталогов, к примеру, этого. Если в поле для копирования символ не отображается, лучше выбрать другой: велика вероятность, что он не отобразится и в сниппете.

Смайлы для сайтаЭмодзи не отображается

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

Выбор эмодзи для автомобильной тематики

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

Эмодзи для размещения на сайтеКрасные маркеры

С эмодзи важно не переборщить, такой сниппет выглядит пестрым и перегруженным:

Сайт в выдаче

Перебор элементов

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

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

Какие «хлебные крошки» нужны интернет-магазинам (68% сайтов допускают ошибки)?

Юзабилити интернет-магазина — это конструктор, состоящий из множества разных деталей. Одна из шестерёнок этого конструктора — это «хлебные крошки». О них и пойдёт речь в статье. Это мой перевод статьи: http://baymard.com/blog/ecommerce-breadcrumbs. Неточности или ошибки перевода (если Вы такие найдёте) прошу отправлять в личные сообщения — я оперативно внесу необходимые правки. Если статья будет интересна — обязательно переведу и другие материалы подобной тематики.

Введение

«Хлебные крошки» часто считаются не самым интересным компонентом сайта. Однако, последние исследования показали, что они играют далеко не последнюю роль. Что еще более интересно, благодаря данному исследованию удалось обнаружить, что интернет-магазины должны предлагать посетителю два варианта «хлебных крошек» одновременно. Один из них отражает структуру сайта, другой – историю просмотров.

Сопоставляя различные показатели 40 крупнейших сайтов e-commerce, исследователи обнаружили, что 68% интернет-магазинов испытывают трудности с внедрением этого компонента: 45% сайтов располагают лишь одним вариантом «крошек», а у 23% сайтов «хлебные крошки» вообще отсутствуют.


Некоторые из 68% самых успешных интернет-магазинов, слабым местом которых являются «хлебные крошки»

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

Принципы использования «хлебных крошек»

Если на странице товара отсутствуют «хлебные крошки», для пользователя будет проблематичным просмотреть, к примеру, коллекцию целиком, поскольку отсутствует опция «на шаг вперед» или же нет возможности вернуться к предыдущему разделу. Это вынуждает пользователей предпринимать «радикальные» меры (например, выбирать категорию верхнего уровня, выполнять поиск и т.д.) или пытаться перейти на страницу со всеми товарами. С помощью «крошек» любой пользователь, который не нашел подходящий товар для сравнения или просто хочет посмотреть другие товары, может легко перемещаться по структуре веб-сайта и продолжать последовательно просматривать продукты вместо того, чтобы тратить время на лишние действия.


Вариант «хлебных крошек», основанный на структуре сайта, позволяет пользователям легко переходить к категориям товаров, чтобы подробнее узнать о других товарах в категории. Участник исследований, не уверенный на 100% в выборе куртки, легко перешел к категории «Куртки и пальто» на странице товаров H&M, используя структурный вариант «крошек».

Во время исследования «хлебные крошки» наиболее часто использовались для возврата к категории, в которой находился интересующий товар. Это подобно использованию кнопки «Назад» в интернет-браузере, только с тем различием, что это часть интерфейса веб-сайта. Однако кнопка «Назад» основана на истории переходов по страницам сайта, а «хлебные крошки» чаще всего базируются на его структуре. Для того, чтобы во время просмотра сайта у пользователя не возникало проблем с постоянной очисткой фильтра поиска, рекомендуется использовать «хлебные крошки», в основе которых лежит именно история. С их помощью пользователь переходит на предыдущую страницу, которая зачастую является не просто списком категорий. Например, пользователь мог поставить на этой странице фильтр по какому-либо свойству товара или изменить направление сортировки, или даже войти на страницу товаров путем поискового запроса или рекламы.


На сайте Nordstrom кнопка «Обратно к результатам» позволяем пользователю вернуться к списку товаров с сохранением всех включенных фильтров и настроек сортировки (это относится и к поиску). Однако отсутствие традиционного структурного пути, усложняет процесс возврата к товарам по иерархии (структуре) каталога для пользователей, пришедших из внешних источников.

Некоторые сайты используют «хлебные крошки», которые основаны исключительно на навигационном пути пользователя (истории просмотра страниц). Они эффективно функционируют в качестве каналов «Назад», однако, это ограничивает способность пользователя познакомиться со всем объемом товаров, которые представлены на сайте.

Почему нужно использовать оба типа «хлебных крошек»

Пользователи, которые попадают на страницу товаров нелинейно (например, при помощи внутреннего или внешнего поиска или при нажатии на рекламный баннер), будут часто пользоваться «крошками», чтобы увидеть другие продукты в той же подкатегории. В сущности, это способ найти сопутствующие товары, несмотря на изначальное получение доступа к странице товара совсем из другой части сайта или даже с совершенно другого веб-сайта. Таким образом, структурные «хлебные крошки» невероятно важны для поискового, рекламного и других нелинейных путей входа на сайт, поскольку они позволяют пользователю легко переключаться на линейный просмотр продуктов, когда это возможно.


На сайте Best Buy участник исследования перешел на страницу с переходником для ноутбука Targus из списка «Лидеры продаж» среди аксессуаров. Однако, будучи не уверенным на все 100%, он захотел посмотреть другие адаптеры для ноутбука. К счастью, ему ничего не помешало: структурные «хлебные крошки» перенаправили его, непосредственно к категории «Зарядные устройства и адаптеры для ноутбуков».

Тем не менее, такое положение вещей не всегда удовлетворяет потребностям пользователей, которые получили доступ к странице товара линейным путем. Если пользователь применил несколько фильтров на странице категорий и затем открыл какой-либо страницу определенного продукта, вернувшись обратно в категорию, он чаще всего обнаруживает, что выставленные ранее фильтры не сохранились. Все потому, что это всего лишь ссылка на страницу категории, и она не привязана к истории просмотров пользователя. Проблема решается легко, путем внедрения «хлебных крошек», в основе которых лежит именно история.

Очевидно, оба варианта имеют свои преимущества. Какой из них нужен вам? Оба. Элегантное и достаточно простое решение – установить структурные «хлебные крошки», а затем подключить опцию «Обратно к результатам». Это будет иметь двойное преимущество для пользователя: доступ к категориям, а также возможность вернуться к предыдущей странице с сохранением фильтров, сортировкой и/или поисковым запросом.



Веб-сайты Sears и Macy’s решили противостояние «история vs. структура», внедрив оба варианта. Основанная на истории опция «Обратно к результатам», которая направляет пользователей обратно к предыдущему разделу со всеми сохраненными фильтрами, дополняет структурные «хлебные крошки».

Это хороший пример, казалось бы, обычного компонента сайта, который значительно влияет на удобство пользователя при просмотре каталога товаров. Объединение двух типов «хлебных крошек» позволяет пользователям менять стратегию просмотра товаров и без малейших затруднений перемещаться по страницам товаров.

Хлебные крошки

Хлебные крошки в понимании сайтостроителей – один из навигационных инструментов наподобие меню с вложенной структурой. Эта цепочка ссылок с главной страницы ресурса до раздела, на котором в конкретный момент времени находится пользователь. В операционных системах компьютеров подобный навигационный принцип используется повсеместно. Например, чтобы добраться до нужного файла, мы проходим маршрут: «компьютер – диск – папка 1 – папка 2 – документ» Хлебные крошки на сайте отображаются вверху страницы и работают похожим образом.

Зачем нужна навигационная цепочка, когда в том же браузере есть кнопка вернуться назад? Нажал несколько раз и готово. В принципах юзабилити: чем быстрее пользователь попадает на нужную ему страницу, тем выше его лояльность. Удобнее нажать на ссылку в хлебных крошках, а не двигаться поступательно назад.

Какие ещё функции выполняют хлебные крошки на сайте?

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

  1. Показывает пользователю и поисковым роботам структуру веб-ресурса.
  2. Указывает посетителю, в каком разделе он находится. Чем понятнее расположение страниц, тем выше вовлеченность и лояльность пользователей. Для онлайн-магазина это означает прирост трафика и продаж.
  3. Эта навигация и своеобразная перелинковка, которая естественным образом улучшает поведенческие показатели: глубину просмотра, посещение страниц, время сеанса и другие.
  4. Хлебные крошки на сайте с микроразметкой помогают оптимизировать внешний вид сниппета в поисковой выдаче. В итоге ваша запись выглядит аккуратно, удобочитаемо и привлекательно для потенциальных клиентов.

Преимущества навигации

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

  • Оптимизация внутренней иерархии. С помощью дублирующей навигации все страницы связываются в единую структуру. Это помогает органически наращивать ссылочную массу без риска фильтров ПС.
  • Хлебные крошки высоко ценятся поисковыми системами. Они дополняют функционал карты sitemaps и robots.txt.
  • Естественным способом повышают кликабельность баннеров и рекламных ссылок из-за своей связи с URL в поисковой выдаче.
  • Улучшают поведенческие метрики при оценке поисковыми системами. Таким образом, простые хлебные крошки на сайте становятся мощным преимуществом в SEO продвижении.
  • Удобство. Покупатели в интернете мало чем отличаются от оффлайновых посетителей магазинов. Они также любят заботу и внимание к себе. Комфортная навигация – это «золотой» ключик к клиентам.

Какими бывают хлебные крошки и примеры использования

Цепочка ссылок имеет две вариации. Передвижение по разделам может происходить на основе внутренней структуры сайта. В этом варианте ссылки отображаются в виде иерархии, как в компьютере. Во втором используется кнопка назад. Рассмотрим примеры навигации, основанные на этих принципах:

  1. Хлебные крошки линейного типа показывают весь маршрут посетителя от главной до исходной страницы. Человек может в любой момент «перепрыгнуть» на нужный раздел, а не возвращаться поступательно назад. Однако многие порталы в сети имеют большую вложенность, а путь посетителя представляет собой длинную строку ссылок. Решение нашли быстро – укоротили цепочку, оставив только ключевые точки. Например, разделы товаров – категория – карточка продукта.
  2. Второй вариант – хлебные крошки на сайте, основанные на истории перемещений пользователя по разделам. Это дубль браузерной функции «назад», только в виде ссылки в навигации. Выглядит это так: посетитель дошел до карточки товара, но его путь не отображается цепочкой. Взамен устанавливается кнопка «назад к главной» или «назад к каталогу». Такие ссылки неудобны и не информативны, так как не дают возможности изучить весь объем предложений.

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

Как сделать хлебные крошки на сайте: нюансы и особенности

Технически отобразить навигацию можно опциями Гугла или Яндекса, плагинами и модулями CMS, программным кодом. При создании хлебных крошек необходимо учитывать ряд особенностей:

  1. Сделать микроразметку ресурса, чтобы цепочка навигации отражалась в сниппете при выдаче. Это повысит кликабельность ссылок.
  2. Хлебные крошки расположите вверху страницы. Дополнительно выделите цепочку курсивом, цветом или увеличьте насыщенность (жирность).
  3. Не ставьте навигацию на главной – это признак «плохого тона». Так вы дублируете ссылки, что плохо сказывается на ранжировании. Внимательно проверяйте, чтобы кликабельной в цепочке была предпоследняя ссылка, а не текущая. Это поможет избежать дублей.
  4. Не усердствуйте с оптимизацией навигационной цепочки. Поисковики считают ключи, которые входят в этот элемент.
  5. Проверьте, чтобы строка не была простым текстом, а отображалась ссылками.

Частые ошибки

Частично мы уже рассказали о них. Это размещение навигации в зоне футера. Почему плохо? Посетители просто не заметят эту цепочку. Другая ошибка заключается в использовании нескольких маршрутов для одной и той же целевой страницы. Например, на карточку товара можно попасть с главной, с каталога или подкатегории, по ссылке с описания. В таком случае цепочка каждый раз отображается по-новому, что не позволяет понять внутреннюю иерархию. Соответственно посетители путаются, а роботы со скрипом индексируют сайт.

Резюме

Мы изучили, что такое хлебные крошки. Зачем они нужны, какие функции выполняют в юзабилити и SEO. Также узнали, как создавать навигационные цепочки, какие встречаются нюансы и ошибки.

Меню-крошка

Меню «хлебные крошки» – это средство навигации по сайту, повышающее удобство использования веб-ресурса и положительно влияющее на поведенческий фактор при SEO-продвижении. Это меню представляет собой иерархическую цепочку: от главной страницы до текущей. При этом наименования главной и промежуточных страниц являются ссылками, а название текущей – просто надписью, указывающей местонахождение пользователя.

bread1.png

bread1.png

Такое меню считается важной составляющей юзабилити для интернет-магазинов, так как комфортность навигации способствует увеличению числа покупок. Также этот навигационный инструмент необходим любым веб-ресурсам, содержащим большое количество контента и имеющим сложную иерархию страниц. Название данного способа навигации – это отсылка к сказке «Гензель и Гретель», в которой персонажи рассыпали крошки хлеба, чтобы найти обратный путь из леса.

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

Меню-крошка играет важную роль и влияет на конверсию, но большинство владельцев сайтов допускают ошибку, не используя либо неправильно используя этот инструмент. Рекомендуется размещать на веб-ресурсе два типа «крошек»:

· меню, основанное на истории просмотров.

При этом «хлебные крошки» не заменяют собой главное меню, а дополняют его.

Изучение коммерческих ресурсов показало, что 45 % используют только один вариант «крошек», а 23 % интернет-магазинов вообще не применяют этот инструмент.

«Хлебные крошки» по структуре сайта

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

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

bread2.jpg

bread2.jpg

Меню-крошка с историей просмотров

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

Однако этот тип «крошек» должен дополняться структурным меню, потому что навигация на основе истории не подходит для пользователей, пришедших из внешних источников (из поисковых систем или через рекламные объявления). Такой вариант не позволит этим посетителям ознакомиться со всеми товарами нужной категории.

Плюсы использования

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

Структурные «крошки». Покупатели, которые пришли нелинейным путем (при нажатии на рекламу, из внешнего или внутреннего поиска), часто пользуются структурным меню, чтобы посмотреть другие продукты той же категории. Это позволяет находить сопутствующие товары, независимо от того, с какой страницы или с какого сайта пришел покупатель. Следовательно, структурный вариант важен для рекламного, поискового и других нелинейных путей входа в интернет-магазин.

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

Оба типа «крошек» имеют свои плюсы и минусы, поэтому для эффективной работы интернет-магазина требуется использование обоих вариантов. Простой и удобный способ решения этой задачи – установить структурную навигацию и добавить опцию «Обратно к результатам». Такое решение имеет двойное преимущество: возможность перехода к категории и простоту возврата к предыдущей веб-странице без потери установленных фильтров. Объединение двух вариантов навигации повышает удобство для пользователей, позволяет выбирать любую стратегию просмотра товаров и легко перемещаться по страницам.

«Хлебные крошки» и SEO

Этот навигационный инструмент косвенно влияет на SEO-продвижение веб-ресурса. Он не только помогает пользователям ориентироваться на сайте и улучшает внешний вид веб-страниц, но и позволяет повысить позиции интернет-ресурса в поисковой выдаче «Яндекса» и Google. «Хлебные крошки» выступают в качестве средства внутренней SEO-оптимизации и улучшают поведенческие факторы.

Грамотная система навигации позволяет дольше задержать пользователя на сайте: заинтересовать его, удержать внимание, привлечь к просмотру других материалов, так или иначе связанных с текущей веб-страницей. Улучшение поведенческих факторов способствует продвижению сайта в топ, что в дальнейшем ведет к росту числа посетителей и потенциальных покупателей.

bread3.jpg

bread3.jpg

Перелинковка

Меню-крошка вносит дополнительный вклад во внутреннюю оптимизацию сайта – связывает отдельные страницы ссылками, то есть способствует перелинковке. Правильно сформированная внутренняя ссылочная масса также повышает привлекательность ресурса для поисковых роботов. Это помогает продвижению сайта на лидирующие позиции поисковой выдачи, что ведет к росту посещаемости. В меню «хлебные крошки» не следует использовать ключевые слова, так как это может создать избыточную концентрацию ключей. Размещать эту систему навигации нужно на всех страницах, где она необходима. Чтобы не делать название массивным, не следует указывать путь в тегах.

Как сделать «хлебные крошки»

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

  • установка специального плагина, соответствующего CMS;
  • внедрение дополнительного кода в файлы сайта.

Первый способ прост, удобен и подходит для тех владельцев веб-ресурсов, которые не знакомы с веб-программированием. Второй метод может быть реализован опытными веб-программистами. Обычно он используется в случаях, когда невозможно применение готовых решений. Например, если сайт работает не на стандартной, а на самописной системе управления контентом. В этом случае код добавляется сразу в несколько файлов (function.php, index.php, single.php и др.), а оформление создается с помощью файлов css.

Таким образом, меню «хлебные крошки» – важный элемент сайта, способствующий повышению юзабилити, SEO-продвижению и увеличению конверсии. Эта система навигации актуальна для интернет-магазинов и крупных веб-ресурсов с многостраничной структурой.

0 0 голоса
Рейтинг статьи

смотреть фильм часодеи часовой ключ

орудие смерти город костей 2 часть трейлер

черная любовь 3 сезон турецкий сериал смотреть

Ссылка на основную публикацию