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

«Хлебные крошки» (от англ. «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

Меню «хлебные крошки» – это средство навигации по сайту, повышающее удобство использования веб-ресурса и положительно влияющее на поведенческий фактор при 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-продвижению и увеличению конверсии. Эта система навигации актуальна для интернет-магазинов и крупных веб-ресурсов с многостраничной структурой.

Хлебные крошки на сайте: что это такое

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

Что такое хлебные крошки (Breadcrumb)?

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

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

Для чего нужны хлебные крошки

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

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

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

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

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

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

Хлебные крошки на сайте. Что это такое, как выглядят, зачем нужны. Примеры с фото.

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

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

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

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

Например, на этом скриншоте цепочка хлебных крошек находится в правом верхнем углу. Посетитель перешел в раздел ДОСТАВКА и, кликнув по ссылке – слову ГЛАВНАЯ, – может сразу вернуться на главную страницу.

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

Фото примеры хлебных крошек

Как чаще всего делают хлебные крошки для интернет-магазина

1. Главная – Интернет-магазин (или Каталог товаров) – Категория товара – Товар (кроме последней, все страницы являются ссылками)

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

2. Интернет магазин – Категория товара – Товар ( кроме последней, все страницы являются ссылками )

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

Как чаще всего делают хлебные крошки для корпоративного сайта

1. Главная – Направление деятельности – Конкретная услуга ( кроме последней, все страницы являются ссылками )

 

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

Обязательно ли настраивать хлебные крошки? И да, и нет. С одной стороны, этим нередко пренебрегают, особенно если сайт небольшой (например – сайт визитка, лэндинговый сайт), пять-шесть страниц легко укладываются в один уровень меню. С другой – если не полениться их сделать, сайт станет намного привлекательнее как для поисковых систем, так и для ваших клиентов.

 

 

Хлебные крошки на сайте. Что это такое, как выглядят, зачем нужны. Примеры с фото.

5 (100%) 14 vote[s]

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

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

Пример использования

Главная страница -> Раздел сайта -> Запись из раздела

Главная страница -> Архив публикаций -> Запись из раздела

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

Эта часть навигации создана для удобства пользователя, который после прочтения статьи может посетить категорию этой статьи, чтобы посетить подобные страницы, или вернуться в корневой документ – на главную страницу сайта. Так как большинство посетителей приходят из поисковых систем, навигация такого рода поможет ему разобраться в структуре сайта и переходить на страницы меньшего уровня вложенности (например, рубрики или архив записей). Это повышает пользовательские факторы, позволяет дольше задержать посетителя на сайте и является частью внутренней перелинковки (хотя, во многих случаях breadcrumbs помещаются в теги <noindex> или их ссылкам даются значения rel=”nofollow”. В таком случае, они размещаются исключительно для пользователя).

Где используются хлебные крошки

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

Все же, часто хлебные крошки используются на:

• Интернет-магазинах.
• Форумах.
• Сайтах со скудной навигацией (когда блок навигации не располагает всеми ссылками на разделы или находится в футере).
• Сайтах без карты.

Карта сайта часто заменяет breadcrumbs, если она правильно разработана (имеется в виду html-карта, а не файл sitemap.xml для поисковиков). Такая страница должна иметь ссылки на все главные разделы, что позволит пользователю с легкостью переходить по ним и искать нужную информацию.

На форумах и интернет-магазинах хлебные крошки – обязательный атрибут.

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

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

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

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

Вывод хлебных крошек может проводиться с помощью дополнений к популярным ЦМС (модуль для Друпал, плагин для Вордпресс, в Joomla есть встроенная возможность вывода пути к странице), на сайте с авторским php вставляется блоком через функции include или require (require-once). На популярных ЦМС для форумов (phpBB и прочее) эти функции или уже установлены, или могут быть установлены через соответственные расширения.

“Хлебные крошки” и их роль в продвижении сайта – Profit Hunter

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

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

Почему «Хлебные крошки»

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

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

В чём ценность «Хлебных крошек»

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

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

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

Исследователи выделили 2 вида навигационных цепочек:

• Исторические. Они основаны на истории просмотров разделов пользователем, то есть крошки «падают», следуя за путём конкретного посетителя. Цепочки, основанные на истории путей по сайту, полезны тем, что запоминают ещё и фильтры, которые задавал человек. Таким образом, возвращаясь к предыдущему разделу, он может перейти на страницу с уже отсортированными им ранее товарами. Потенциальному покупателю не нужно снова вводить параметры фильтра (по цене, характеристикам товарной позиции и т.п.), если он захочет вернуться к рассмотрению других товаров.
• Структурные. Это наиболее распространённый тип «хлебных крошек», который строится на основе структуры Интернет-проекта, а не на путях пользователя. Польза структурной навигации очень высока. Предположим, человек находится в категории А, и затем переходит в категорию B с другой группой товаров, потом – в категорию С с какой-то иной продукцией. Историческая навигация предложит посетителю пойти по уже протоптанной дорожке:

А –> В –> С

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

Цифровая техника – > Планшеты – > iPad

Т.е. в цепочке не будет звена «Телефоны Nokia».

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

• Польза для поискового продвижения

«Хлебные крошки» могут появиться в выдаче Яндекса и Google. От этого сниппеты становятся более привлекательными, в них имеются дополнительные кликабельные ссылки, которые иногда подсвечиваются (если «крошка» соответствует поисковому запросу). В результате, CTR сниппетов сайта возрастает, он получает больше переходов с того же количества показов, что не остаётся незамеченным поисковиками.

Как формируются «хлебные крошки» в сниппетах

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

В отличие от Яндекса, Google предлагает использовать микроразметку для отображения цепочки в сниппете. Для этой цели применяют разметку schema.org или data-vocabulary.

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

Нравятся статьи? Подписывайтесь на рассылку!

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

2 декабря 2019 г. | Читать 16 мин.

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

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

Типы и структура хлебных крошек

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

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

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

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

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

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

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

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

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

На веб-сайте TripAdvisor пользователи могут увидеть полный список товаров, относящихся к категории Playa del Carmen , а также все связанные страницы благодаря раскрывающейся навигации.

Если вы выберете категорию Playa del Carmen Vacation Rentals из раскрывающегося списка, навигационная цепочка пройдет преобразование и начнется с категории Vacation Rentals , а элемент Playa del Carmen исчезнет.

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

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

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

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

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

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

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

Три причины стать поклонником панировочных сухарей

Вам не составит труда внедрить панировочные сухари на своих сайтах. Как только вы это сделаете, вы улучшите три вещи: удобство использования веб-сайта, структуру внутренних ссылок и CTR.

Улучшенное взаимодействие с пользователем

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

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

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

Улучшенная структура внутренних ссылок

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

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

Убедительные фрагменты поиска

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

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

Чтобы Google отображал ваши хлебные крошки во фрагменте, а не в измененном URL, используйте разметку схемы. Интересно то, что Google самостоятельно решит, какую из категорий вашего веб-сайта включить в отслеживание, в зависимости от их соответствия поисковому запросу.

Чтобы проверить, как выглядят фрагменты результатов поиска ваших страниц, вы можете погуглить все интересующие вас страницы одну за другой. Или вы можете использовать SE Ranking и проверять все на одной вкладке. После создания проекта вы сможете проверять фрагменты для каждого ключевого слова, которое отслеживаете в разделе «Аналитика и трафик».

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

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

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

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

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

Что такое панировочные сухари

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

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

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

На главную> По комнатам> Ванная> Городская баня> Белый туалетный столик 36 дюймов с раковиной

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

Breadcrumb Navigation предоставляет пользователям контекст, чтобы они могли ответить на следующие вопросы:

• Где я сейчас по отношению ко всему сайту?
• Что я могу выбрать для навигации отсюда? Благодаря панировочным сухарям каждый раздел можно найти.
• Я хочу туда пойти? Хлебные крошки поощряют просмотр, заманивая пользователей в следующее место.

Преимущества для хлебных крошек

«Хлебные крошки» упрощают навигацию по веб-сайтам для улучшения UX следующими способами:

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

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

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

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

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

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

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

На главную> Одежда> Женская одежда> Пижамы и халаты> Рубашки для сна> Рубашки для сна с длинными рукавами

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

Панировочные сухари и взаимодействие с пользователем (UX)

Эффективность

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

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

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

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

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

Панировочные сухари и SEO

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

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

Свежие идеи для панировочных сухарей

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

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

Хотите узнать больше?

Если вы хотите стать экспертом в области UX-дизайна, дизайн-мышления, дизайна пользовательского интерфейса или другой смежной темы дизайна, подумайте о том, чтобы пройти онлайн-курс UX от Interaction Design Foundation. Например, «Дизайн-мышление», «Стать дизайнером UX с нуля», «Проведение юзабилити-тестирования» или «Исследование пользователей — методы и лучшие практики».Удачи вам в обучении!

(Lead image: Depositphotos — партнерская ссылка)

Как отображать навигационные ссылки BreadCrumb в WordPress

Вы хотите отображать навигационные ссылки хлебных крошек на своем сайте WordPress?

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

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

Что такое навигация по крошке и зачем она вам нужна?

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

Навигационные ссылки Breadcrumb отличаются от системы меню навигации по умолчанию в WordPress.

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

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

Сказав это, давайте посмотрим, как добавить навигационные ссылки в WordPress.

Видеоурок

Подписаться на WPBeginner

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

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

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

Первое, что вам нужно сделать, это установить и активировать плагин Breadcrumb NavXT. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

После активации вам необходимо посетить страницу Settings »Breadcrumb NavXT , чтобы настроить параметры плагина.

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

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

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

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

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

Вкладки таксономий и авторов имеют аналогичные шаблоны для ссылок навигации.

Не забудьте нажать кнопку «Сохранить изменения», чтобы сохранить изменения.

Отображение Breadcrumb NavXT на вашем веб-сайте

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

В Breadcrumb Source вам нужно выбрать «Breadcrumb NavXT».

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

Добавление ссылок навигации с помощью плагина Yoast SEO

Если вы уже используете плагин Yoast SEO, вы можете использовать его встроенную функцию навигации Breadcrumb, хотя ее функции ограничены по сравнению с плагином BreadcrumbNavXT.

Первое, что вам нужно сделать, это установить и активировать плагин Yoast SEO. У нас есть полное пошаговое руководство по установке и настройке плагина Yoast SEO для WordPress.

После активации вам необходимо перейти на страницу SEO »Внешний вид в поиске» Панировочные сухари и установить флажок «Включить панировочные сухари».

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

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

Отображение навигации Yoast на вашем сайте

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

В Breadcrumb Source выберите «Yoast SEO Breadcrumbs».

Вот и все.Теперь вы можете посетить свой веб-сайт, чтобы увидеть свою навигацию в действии.

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Google Webmaster сообщает о проблемах с навигационной цепочкой

У меня такая же проблема… Но 30 ошибок: http://prntscr.com/p8z5q2

«Должно быть указано« имя »или« название товара »

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

@hauntingfox Если у вас возникла аналогичная проблема, создайте новый запрос. Так будет проще отслеживать проблемы и оказывать помощь. Благодарность!

Две банкноты:

1) Это произошло после последнего обновления плагина Yoast SEO — больше ничего на сайте не изменилось.

2) Не удается найти сообщение / страницу / таксономию, в которой сообщается об ошибке, например, в списке:

https: //www.bikegremlin.com / page / 4 /? cat = -1

Так что, скорее всего, что-то с плагином.

Идея:

Страница, которая отображается в «дереве» хлебных крошек при переходе по ссылке, сообщенной Google, является более старой, созданной до Gutenberg (версия WordPress 5).

Все перечисленные «проблемные» страницы сделаны на старой версии «Classic».

В списке беспорядок — отображается список всех сообщений, как если бы они каким-то образом относились к одной таксономии сообщения (но это не одна и та же категория и даже не одни и те же теги).Вы только посмотрите:

https://www.bikegremlin.com/page/4/?cat=-1

Пытался переключить старый пост на блоки и посмотреть, исправится ли это. Еще приводит «странный» список.

РЕДАКТИРОВАТЬ: если вы перегружены работой и не заметили:

Я вижу много тем на форуме поддержки с одной и той же проблемой — все они совпадают по времени с последним обновлением плагина.

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

• Этот ответ был изменен 1 год, 1 месяц назад пользователем Bike Gremlin. Причина: дополнительная информация — если поможет

Hi @bikegremlin,

Это не похоже на обычную страницу WordPress: https://www.bikegremlin.com/page/4/?cat=-1

Это подстраница категории, хотя мы не можем точно сказать, что в первую очередь создает эти URL-адреса. Правильный URL-адрес: https://www.bikegremlin.com/1864/press-fit-patrone/.

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

Ждем вашего ответа.

Я не создавал ни одной из этих ссылок — сознательно.

Используемая структура постоянной ссылки:

mydomain.com/%post_id%/%postname%/

Раньше я не проверял эти ссылки, не знаю, из-за чего они появляются.

Ссылки вроде:
https://www.bikegremlin.com/?cat=-1

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

https://www.bikegremlin.com/page/6/?cat=-1

Максимальное количество страниц зависит от того, сколько страниц
https://www.bikegremlin.com/?cat=-1

Кроме того,? Cat = -1 может использовать любое число (10, 200…) — с тем же результатом, что и я.

Как это:

https://www.bikegremlin.com/?cat=-1245

РЕДАКТИРОВАТЬ: требуется информация:

Страницы, подобные указанной, являются обычными сообщениями — на сайте нет пользовательских сообщений, ни одной.
https://www.bikegremlin.com/1864/press-fit-patrone/

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

https://anydomain-wordpress.com/page/2/?cat=-1

• Этот ответ был изменен 1 год, 1 месяц назад пользователем Bike Gremlin.
• Этот ответ был изменен 1 год, 1 месяц назад пользователем Bike Gremlin.
• Этот ответ был изменен 1 год, 1 месяц назад пользователем Bike Gremlin.

Привет,

Google выпустил отчет о хлебных крошках как часть Search Console. См. Https://twitter.com/googlewmc/status/1174693878835875840.

Каким-то образом Google просканировал ваш сайт и обнаружил такие URL-адреса, например https://www.bikegremlin.com/page/4/?cat=-1. Мы не уверены, как они это сделали.

При просмотре исходного кода мы на таких страницах не имеем схемы «имя», «ID» и «URL» для последнего элемента списка хлебных крошек.См. Изображение: https://pasteboard.co/IyTUvsT6.png. Мы не уверены, почему Yoast не может его вывести.

Мы также не уверены, важно ли устранять эти ошибки, поскольку каноническая страница указывает на другое место. См. Https://pasteboard.co/IyTV97J.png.

Нажав на него: https://www.bikegremlin.com/1864/press-fit-patrone/page/4/, вы перейдете на https://www.bikegremlin.com/1864/press-fit-patrone/. Ожидается, что этот пост будет сканировать и индексировать Google, поскольку ожидается, что Google будет следовать каноническому тегу.Действительно, мы видим, что Yoast правильно выводит хлебные крошки для последних элементов в этом посте. См. Изображение: https://pasteboard.co/IyTVXeo.png.

Нам нужна ваша помощь, поскольку мы не уверены, почему Yoast как минимум не выводит хлебные крошки на https://www.bikegremlin.com/page/4/?cat=-1, поскольку в нашем тестировании Yoast выводит правильные хлебные крошки на такая страница.

Если бы вы выполняли проверку конфликтов, как описано здесь https://kb.yoast.com/kb/how-to-check-for-plugin-conflicts/, и у вас есть стандартная тема и активен только Yoast SEO, а затем проверьте исходный код на https: // www.bikegremlin.com/page/4/?cat=-1 и найдите последний listItem показывает ли в нем имя, идентификатор и URL? Это руководство объясняет, как проверить исходный код: https://kb.yoast.com/kb/view-page-source-site/

Здесь та же проблема … Надеюсь, Yoast исправит ее!

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

Я обнаружил, что не только мой веб-сайт показывает «забавные» ссылки. Некоторые примеры:

https: // techcrunch.com / page / 6 /? cat = -1
http://www.bbcamerica.com/page/3/?cat=-1
https://variety.com/page/4/?cat=-1

Тестировал на тестовом сайте.

https://test.bikegremlin.com/page/2/?cat=-1

Установил Twenty Nineteen и отключил ВСЕ плагины.

РЕДАКТИРОВАТЬ: проблема с кешем. Странные ссылки остаются со всеми отключенными плагинами.

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

Похоже, проблема с WordPress сама по себе, но об этом только что сообщил Google после введения отчетов Breadcrumb.

• Этот ответ был изменен 1 год, 1 месяц назад пользователем Bike Gremlin.
• Этот ответ был изменен 1 год, 1 месяц назад пользователем Bike Gremlin.
• Этот ответ был изменен 1 год, 1 месяц назад пользователем Bike Gremlin.

Похоже, что каким-то образом Google обнаружил формат URL, который используется только тогда, когда на вашем сайте не определены постоянные ссылки. Параметр простой постоянной ссылки использует переменные (например, ? Cat = -1 ) для определения содержимого для отображения.

Проведя небольшое исследование, ? Cat = -1 сообщает посту / странице показывать весь контент, кроме того, что принадлежит к категории, если 1 (что, вероятно, является категорией по умолчанию).

Я также заметил, что канонический вариант этой страницы не соответствует URL-адресу

URL: / page / 4 /? Cat = -1
Canonical: / 1864 / press-fit-patrone / page / 4/

URL: / page / 5 /? Cat = -1
Канонический: / 1057 / podesavanje-drumskog-kormana / page / 5/

Я не могу воспроизвести это при установке по умолчанию, а предоставленная вами тестовая установка помечена как noindex, поэтому каноническая установка не выводится.И при тестовой установке, похоже, не включены хлебные крошки, поскольку я не вижу их в исходном коде сообщения (это самое простое место, чтобы их обнаружить). Если вы включите хлебные крошки в предоставленной вами тестовой установке, действительна ли разметка хлебных крошек на эквивалентной странице https://test.bikegremlin.com/page/2/?cat=-1?

Я включил панировочные сухари на тестовом сайте. Как проверить, в порядке ли панировочные сухари?
Я бы предпочел не отправлять тестовые материалы в Google, если в этом нет необходимости.

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

Если вы не знаете, как просмотреть исходный код, ознакомьтесь с этой статьей базы знаний: Как просмотреть исходный код страницы вашего сайта

Я искал разметку хлебных крошек по URL-адресу / page / 2 /? Cat = -1 и не нашел ни одной, которая соответствовала бы поведению моего тестового сайта. Тем не менее, я вижу действительную разметку хлебных крошек в сообщении / cat0 / test-5/, поэтому хлебные крошки включены и работают на вашем тестовом сайте должным образом.

Следующим шагом будет начать добавление на ваш тестовый сайт, начиная с плагинов по одному, а затем темы (родительской, затем дочерней, если у вас есть дочерняя тема), чтобы определить, что вызывает появление хлебных крошек на / page / 2 /? cat = -1 URL.

Поддержка плагинов Джерлин

(@jerparx)

Закрыто. Больше никаких проблем.

@bikegremlin какое решение решило вашу проблему? Я не вижу этого здесь в ветке.Пытался выяснить ту же самую проблему для моего сайта, но продолжаю вычеркивать везде. Благодарность! = D

У меня перестала проблема (по крайней мере, сейчас). Однако это не было решением, которое я считаю «нормальным».

В любом случае: по причинам, не имеющим ничего общего с указанной проблемой, я перенес веб-сайт на другой поддомен (bicikl.bikegremlin.com).

Оставить простой статический HTML-сайт на http://www.bikegremlin.com.

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

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

Спасибо за продолжение @bikegremlin

@elavd & @hauntingfox Вы когда-нибудь находили решение?

Навигация по хлебным крошкам: передовой опыт и примеры

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

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

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

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

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

Путь

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

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

Для большинства веб-сайтов иерархическая навигация на основе местоположения и атрибутов обеспечивает лучшую функциональность.

Расположение

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

Этот тип навигации чаще всего встречается на сайтах с более чем двумя уровнями глубины или содержания.

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

Однако страница «Что мы делаем» является родительской для страницы «Говорим», а страница «Домашняя» является родительской для страницы «Что мы делаем».

Clearleft Ltd

Атрибут

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

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

Например, транспортное средство может быть отнесено к категории внедорожников, а затем иметь атрибуты черного цвета и выпущено в 2016 году.

Cars.com

Зачем нужны панировочные сухари?

Отличное удобство использования

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

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

Легко отводить назад

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

Устранение дополнительных кликов

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

Показывает иерархию пользователей

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

Приятный внешний вид

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

Предоставляет дополнительный H = help

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

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

Более низкий показатель отказов

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

Повышает интерес

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

Лучшие Лрактики для хлебных крошек

Используйте панировочные сухари в верхней части страницы

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

Используйте панировочные сухари постоянно

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

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

Панировочные сухари должны постепенно ухудшаться

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

Правильно стилизовать панировочные сухари

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

Четкая категоризация страниц

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

Отдельно для каждого уровня

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

Другие подходящие разделители включают прямоугольные кавычки с двумя углами  », косые черты / и стрелки à ¢  † Â’ .Если используется обычный текстовый символ, используйте только один.

Примечание: «» более привлекательно и эффективно, чем >>

Выделить текущую страницу

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

Не делать текущую страницу ссылкой

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

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

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

Панировочные сухари не заменяют основную навигацию

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

Примеры панировочных сухарей

Vitra Direct

Велосипеды Trek

Illy

SiteInspire

Миа и Мэгги

Intridea

Дизайн людей

Рокси

Блик

SitePoint

Цель

Walmart

1-800-Цветы

BestBuy

Amazon.com

Barns & Noble

Край земли

Яблоко

Google

Чейз

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

Площадь 17

Панировочные сухари | Компоненты | BootstrapVue

Указывает расположение текущей страницы в иерархии навигации.Разделители автоматически добавляются в CSS через :: перед и содержимое .

Обзор

 <шаблон>
   


<сценарий>
  экспорт по умолчанию {
    данные() {
      возвращение {
        Предметы: [
          {
            текст: 'Админ',
            href: '#'
          },
          {
            текст: "Управление",
            href: '#'
          },
          {
            текст: 'Библиотека',
            active: true
          }
        ]
      }
    }
  }


 

Элементы хлебных крошек

Элементы визуализируются с использованием : items prop.Это может быть массив объектов для предоставления ссылки и активного состояния. Ссылки могут быть href, для тегов привязки или – для ссылок маршрутизатора. Активное состояние последнего элемента устанавливается автоматически, если оно равно undefined .

 const items = [
  {
    текст: "Домой",
    href: 'https://google.com'
  },
  {
    текст: 'Записи',
    кому: {name: 'home'}
  },
  {
    текст: 'Другая история',
    active: true
  }
] 

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

Элементы, размещенные вручную

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

 <шаблон>
  
    
       
      Дом
    
     Foo 
     Бар 
     Baz 
  


 

Не забудьте установить активную опору для последнего элемента.

No related posts.