Что такое «хлебные крошки» и для чего они нужны

«Хлебные крошки» (от англ. «breadcrumbs») — это навигационная цепочка на сайте, которая отражает путь до текущей страницы. «Хлебные крошки» используются не только на сайтах, но и в операционных системах, СМS, файловых менеджерах (собственно, оттуда они и пришли в сайтостроение). В этих случаях они показывают путь к корневой папке.

Навигационная цепочка в CMS Битрикс

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

«Хлебные крошки» дублируют разделы верхнего и бокового меню

В статье разберемся:

• для чего использовать эту дублирующую навигацию на сайте;
• как она влияет на юзабилити и SEO;
• как ее реализовать.

Для чего используются «хлебные крошки»

В 1995 году Якоб Нильсен сформулировал 10 принципов юзабилити, первый из которых — «Видимость статуса системы». Это означает, что пользователь должен понимать, что сейчас происходит в системе. Одно из проявлений этого принципа — пользователь всегда должен знать, в какой части сайта он находится. Именно для реализации этого принципа нужны «хлебные крошки». Причем навигационная цепочка необходима всем типам сайтов, в которых есть логическая вложенность разделов: информационным, интернет-магазинам, сайтам услуг, корпоративным сайтам.

С точки зрения юзабилити «хлебные крошки» решают три задачи:

1. Информируют пользователя о его текущем местонахождении на сайте.
2. Наглядно демонстрируют структуру ресурса.
3. Позволяют быстро переместиться на более высокий уровень вложенности, минуя кнопку браузера «Назад».

Помимо положительного влияния на юзабилити дублирующая навигация имеет SEO-эффект:

• является естественным элементом перелинковки страниц;
• улучшает поведенческие метрики (время на сайте и глубину просмотра) за счет упрощения навигации;
• при условии настроенной микроразметки улучшает внешний вид и повышает кликабельность сниппета в поиске Google — формирует «читабельную» навигационную цепочку.

Так выглядит размеченная навигационная цепочка в сниппете в выдаче Google

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

Навигационная цепочка в сниппете в выдаче Яндекса

Какими бывают «хлебные крошки»

Навигационная цепочка может быть организована по разным принципам. Это зависит от структуры сайта и от способа формирования динамических страниц.

• Линейный принцип.

Это самый распространенный вариант — указывается полный путь от главной страницы до текущей. Пример — на рисунке ниже:

Здесь показана следующая структура вложенности: главная страница — «Мебельный центр», затем следует страница каталога товаров, далее — раздел «Кухни», далее — «Кухонные гарнитуры» и, наконец, название конкретного гарнитура.

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

В магазине Amazon «крошки» начинаются не с главной, а с названия раздела каталога. На скриншоте видно, что «началом отсчета» является раздел магазина «Home & Kitchen».

• Принцип «Назад».

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

На скриншоте кнопка «Results» ведет с карточки товара на страницу с результатами поиска по запросу «Shoes».

• Комбинация двух предыдущих вариантов.

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

В этом примере ссылки «Футболки мужские» и «Назад к обзору» дублируются, что негативно сказывается на юзабилити и SEO.

• Динамический принцип.

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

В этом случае посетитель сайта сможет вернуться на ту страницу, с которой он пришел.

• «Хлебные крошки» с выпадающим меню.

Эта функция позволяет пользователям перейти не только на уровень выше, но и на другие разделы каждого уровня:

• Атрибутивный принцип.

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

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

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

Модуль SEO в системе Promopult: все инструменты для улучшения качества сайта и поискового продвижения. Полный комплекс работ — с нами вы не упустите ни одной мелочи. Чек-листы, подсказки, прозрачная отчетность и рекомендации профессионалов. Гарантии, оплата работ в рассрочку.

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

Создать навигационную цепочку можно разными способами:

1. Использовать стандартные компоненты или модули CMS (например, так это реализовано соответственно в Битриксе и Joomla!).
2. При помощи плагинов. Для популярных систем управления есть расширения, которые автоматически настроят «хлебные крошки». Вот примеры для WordPress, Opencart, Drupal.
3. Если готовые решения по какой-то причине недоступны, программист добавит цепочку на сайт при помощи PHP или CSS.

Какой бы способ вы ни выбрали, придерживайтесь следующих правил:

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

• Уберите циклические ссылки — последний элемент навигационной цепочки не должен быть кликабельным (как на рисунке ниже), его нужно прописать в виде текста:

• Если используете «хлебные крошки», располагайте их на каждой странице сайта в одном и том же месте.
• На главной странице сайта «хлебные крошки» не нужны.
• Сделайте микроразметку «хлебных крошек», используя микроформаты Microdata и RDFa — это позволит информативно отображать их в результатах поиска Google (инструкцию и примеры реализации кода можно найти в справке Google для вебмастеров):

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

Подводим итоги

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

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

Хотите проверить, насколько грамотно и корректно формируются «хлебные крошки» на вашем сайте? Сделайте это в рамках продвинутого SEO-аудита в PromoPult.

Хлебные крошки — SEO на vc.ru

{«id»:13744,»url»:»\/distributions\/13744\/click?bit=1&hash=32fb82be5c2244b7f0c304b6cee13c1e54f8b098bb45091f59db856312407183″,»title»:»\u041a\u0440\u0443\u043f\u043d\u044b\u0435 \u0440\u043e\u0441\u0441\u0438\u0439\u0441\u043a\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043b\u0438\u0441\u044c \u0432 \u0430\u043b\u044c\u044f\u043d\u0441 \u0438 \u0438\u0449\u0443\u0442 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u044b»,»buttonText»:»»,»imageUuid»:»»,»isPaidAndBannersEnabled»:false}

SEO

SEO блиц

date» data-date=»1552893827″ data-type=»default» title=»18.03.2019 10:23:47 (Europe/Moscow)»>18 мар 201918.03.2019

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

17 211
просмотров

Хлебные крошки выполняют ряд важных функций:

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

Как сделать правильные хлебные крошки?

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

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

Микроразметка хлебных крошек

Микроразметка осуществляется путем добавления специальных HTML-тегов, которые сообщают поисковым роботам к какому типу контента относится элемент.

Поддерживаемые Google форматы микроразметки:

• Microdata;
• RDFa;
• JSON-LD.

Пример микроразметки хлебных крошек в формате Microdata для страницы «Кружки», которая имеет навигационную цепочку из ссылок «Главная > Каталог > Столовая > Чай и кофе»:

<ol itemscope itemtype=»http://schema. org/BreadcrumbList»>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/»>
<span itemprop=»name»>Главная</span></a>
<meta itemprop=»position» content=»1″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog/»>
<span itemprop=»name»>Каталог</span></a>
<meta itemprop=»position» content=»2″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=»/catalog/stolovaya/»>
<span itemprop=»name»>Столовая</span></a>
<meta itemprop=»position» content=»3″ />
</li>
<li itemprop=»itemListElement» itemscope
itemtype=»http://schema.org/ListItem»>
<a itemprop=»item» href=» /catalog/stolovaya/chay-i-kofe/»>
<span itemprop=»name»>Чай и кофе</span></a>
<meta itemprop=»position» content=»4″ />
</li>
</ol>

itemscope itemtype=http://schema. org/BreadcrumbList говорит о том, что элемент относится к хлебным крошкам и состоит из цепочки связанных веб страниц.

Далее каждому элементу навигации добавляем следующие атрибуты:

• itemprop=»itemListElement» itemscope itemtype=»http://schema.org/ListItem — означает , что элемент относится к отдельному пункту списка;
• itemprop=»item» — для разметки ссылки;
• itemprop=»name»> — у тега с названием хлебной крошки;
• В конце блока хлебной крошки добавляем <meta itemprop=»position» content=»%number%» />, который определяет позицию элемента в навигационной цепочке.

Существует известная проблема в том, что валидатор микроразметки выдает предупреждение, когда в коде нет атрибута itemprop=»item» у последнего элемента хлебной крошки. Это возникает из-за отсутствия у элемента ссылки.

Но это не мешает поисковой системе Google корректно выстраивать цепочку ссылок в сниппете.

Если же вас смущает это предупреждение, то можно не размечать последний элемент (как у нас в примере), либо же использовать другие способы микроразметки.

Ждите новые заметки в блоге или ищите на нашем сайте.

Полное руководство по использованию хлебных крошек на веб-сайтах + примеры

Этот пост первоначально появился на babich.biz, автором стал Ник Бабич. Ник — разработчик программного обеспечения, увлеченный пользовательским опытом.

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

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

Изображение предоставлено: lossyourmarbles

Как и в сказке, посетители должны знать свое положение в иерархической структуре сайта, чтобы перейти на более высокий уровень иерархии.

Хлебные крошки Навигация

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

• Где я? Хлебные крошки информируют посетителей об их местоположении относительно всей иерархии сайта.
• Куда я могу пойти? Хлебные крошки улучшают возможность поиска разделов и страниц сайта. Структуру сайта легче понять, когда она представлена ​​в виде «хлебных крошек», а не в виде меню.
• Должен ли я пойти туда? Хлебные крошки сообщают о ценности контента и побуждают к просмотру (например, посетитель сайта электронной коммерции может попасть на страницу продукта, продукт может не совпадать, но посетитель может захотеть просмотреть другие продукты из той же категории). Это, в свою очередь, снижает общий показатель отказов сайта.

Сокращает количество действий

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

Занимает минимум места

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

Ни один пользователь не испытывает проблем из-за навигационных крошек

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

Когда следует использовать панировочные сухари?

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

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

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

Хлебные крошки могут быть основаны на: местоположении, пути и атрибуте.

На основе местоположения

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

Навигация по местоположению. Изображение предоставлено: marketingland

В приведенном ниже примере (из BestBuy) каждая текстовая ссылка предназначена для страницы, которая на один уровень выше, чем та, что справа.

«Хлебные крошки» на основе местоположения из BestBuy

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

«Хлебные крошки» на основе пути (также известные как «исторический след») показывают весь путь, пройденный пользователем, чтобы попасть на определенную страницу. Этот тип навигационной цепочки обычно создается динамически. Иногда хлебные крошки на основе пути могут быть полезны, но в большинстве случаев они озадачивают — посетители часто просматривают очень быстро, перескакивая с одной страницы на другую. Наличие такого извилистого пути не сильно помогает пользователю и может быть легко заменено «9».0003 Кнопка «Назад » в браузере. Наконец, исторический след бесполезен для посетителей, которые переходят прямо на страницу в глубине сайта.

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

Навигация по пути. Изображение предоставлено: Oracle

На основе атрибутов

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

Навигация на основе атрибутов. Изображение предоставлено: marketingland

Например, в TM Lewin навигационные цепочки показывают атрибуты предметов, отображаемых на определенной странице:

На этой странице отображаются все костюмы, которые имеют атрибут «Slim Fit». Изображение предоставлено: Т.М. Левин

Иерархия или история?

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

[otw_is sidebar=otw-sidebar-3]

Рекомендации по навигации по цепочкам

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

Хлебные крошки как дополнительная навигация

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

Apple использует навигационную цепочку для поддержки основной навигации

Не ссылаться на текущую страницу в навигационной цепочке

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

Используйте разделители

Самый узнаваемый символ для разделения ссылок в навигационных цепочках — это символ «больше» (>). Как правило, 9Знак 0003 > используется для обозначения иерархии, как в формате Родительская категория > Дочерняя категория. Другими используемыми символами являются стрелки, указывающие вправо (→), кавычки под прямым углом (») и косые черты (/). Выбор зависит от эстетики сайта и типа используемой хлебной крошки:

Изображение предоставлено: Dribbble

Выберите размер и отступы

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

Не делайте его центральным элементом дизайна.

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

Изображение предоставлено: Dribbble

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

Заключение

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

Удобный захват обратной связи. Получите больше информации и уверенности.

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

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

Что такое хлебные крошки и почему они важны для SEO?

Когда дело доходит до SEO, есть с чем поспорить.

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

Сегодня это похоже на соревнование на арене фаст-фуда – тако или гамбургеры?

А как же панировочные сухари?

Нет, речь не о вкусной панировке для куриного фарша.

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

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

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

Что такое хлебные крошки в SEO?

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

Обычно их можно найти в верхней части веб-сайта или прямо под панелью навигации.

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

Вот пример хлебных крошек с веб-сайта DHL:

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

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

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

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

Вот как.

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

В Google Search Console есть даже отчет со структурированными данными, если это ваша проблема.

Это сводится к следующему:

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

Таким образом, хлебные крошки имеют большое значение для SEO.

3 распространенных типа панировочных сухарей

Не все панировочные сухари одинаковы!

Существует три основных типа панировочных сухарей, каждый из которых имеет свое назначение.

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

Хлебные крошки на основе иерархии (также известные как «хлебные крошки на основе местоположения»)

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

Например: Главная > Ресурсы > Руководство по поисковой оптимизации

Хлебные крошки на основе атрибутов

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

Например: Главная > Обувь > Походы > Женские

Хлебные крошки на основе истории

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

Например, если вы искали новости SEO и прочитали три разные статьи, навигационные крошки могут выглядеть так: Главная > SEO-статья 1 > SEO-статья 2 > Текущая страница

3 Преимущества использования навигационных крошек для SEO

Все это звучит здорово, думаете вы.

Но что на самом деле будут делать панировочные сухари?

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

Хлебные крошки Улучшение UX

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

Например, вы хотите узнать больше о Nestle.

Вы заходите на их сайт и попадаете на страницу истории компании Nestle.

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

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

Улучшение рейтинга сайта

Хлебные крошки хороши для UX, но они также радуют Google.

Если вы делаете и то, и другое, то вы живете мечтой SEO, amirite?

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

Еще в 2018 году Google добавил хлебные крошки на страницы результатов, сделав их еще более важными, чем когда-либо.

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

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

Недавнее тематическое исследование показало, что внедрение «хлебных крошек» помогло им попасть в 10 лучших результатов поиска Google.

Удерживайте людей на сайте дольше

Показатель отказов может и не быть прямым фактором ранжирования, но он все же может помочь SEO.

Кроме того, высокий показатель отказов может указывать на проблемы с UX — проблемы, которые могут помочь решить хлебные крошки.

Допустим, вы ищете новую пару книг на Zappos.

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

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

Что отлично подходит для Zappos, потому что, скорее всего, вы не вернетесь в Google и не попадете на другой обувной сайт.

Вот сила скромных хлебных крошек!

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

Сеансы резко увеличились всего за несколько месяцев.

Конечно, они также добавили метаданные и избавились от нескольких других проблем с UX, но хлебные крошки тоже сыграли свою роль.

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

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

Вот несколько способов добавить эти полезные функции на свой сайт.

• Использование Yoast SEO : Если вы уже используете Yoast, то добавление хлебных крошек займет всего несколько шагов. Просто войдите в систему и выполните следующие действия, чтобы внедрить хлебные крошки.
• Плагины WordPress : Если вы используете WordPress, есть несколько плагинов, которые могут добавить хлебные крошки за несколько шагов. Мне нравится Breadcrumb NavXT, потому что его легко внедрить и он генерирует навигационные навигационные крошки, которые можно настроить по мере необходимости.
• Плагин хлебных крошек WooCommerce : Если у вас есть сайт электронной коммерции, использующий Woocommerce, рассмотрите возможность использования их плагина хлебных крошек, который позволяет изменить стиль встроенных хлебных крошек WooCommerce.

Наконец, ваш конструктор сайтов или тема WordPress может иметь встроенную функцию навигации.

Например, некоторые плагины WordPress имеют опцию «хлебных крошек», включая Ocean WP.

Чтобы добавить хлебные крошки на сайты Wix или Squarespace, вам, вероятно, потребуется добавить кодировку вручную.

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

Внедрение хлебных крошек — довольно простой способ улучшить SEO сайта и улучшить UX.

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

Вот несколько ошибок навигации, которых следует избегать.

Не делайте слишком большой или слишком маленький шаг — стремитесь к правильному

Хлебные крошки должны быть хорошо видны, но ненавязчивы.

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

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

Не повторяйте панель навигации

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

Нет необходимости добавлять дополнительные коды (и занимать место!), если это не помогает.

Не отказывайтесь от панели навигации в пользу «хлебных крошек»

Хотя вы не хотите повторять навигацию, вы также не хотите полностью полагаться на «хлебные крошки».

Они служат дополнением, а не заменой других навигационных функций.

Используйте правильный тип «хлебных крошек»

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

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

В этом случае навигационные крошки на основе истории могут оказаться более полезными.

«Хлебные крошки» — удобный способ навигации по сайту

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

Кермит для вашей Мисс Пигги. Животный соус для вашего бургера In N’ Out.

Вы поняли.

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

This entry was posted in Популярное