Что такое хлебные крошки на сайте – «Хлебные крошки» — что это такое? Примеры навигации :: SYL.ru

У дублирующей навигации есть две основные функции, а именно:

Улучшение юзабилити сайта

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

Положительное влияние на SEO

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

Хлебные крошки: какими они бывают

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

Линейная

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

Навигация здесь начинается с одного из разделов каталога, а не с главной страницы.

Система «Назад»

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

Линейная + кнопка «Назад»

Объединяет два варианта. В этом случае доступна и линейная навигационная цепочка, и кнопка «Назад».

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

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

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

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

Над материалом работали:

София Ибрагимова

Контент-маркетолог

semantica.in

Хлебные крошки (меню-крошка) в SEO

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

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

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

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

·         структурное меню;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

wiki.rookee.ru

Что такое «хлебные крошки» и для чего они нужны? · Блог Системы PromoPult

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

Для чего использовать эту дублирующую навигацию на сайте? Каким образом она влияет на юзабилити и SEO? Как ее реализовать? Ищите ответы на самые популярные вопросы о «хлебных крошках» в нашем новом посте.

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

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

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

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

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

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

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

Навигационная цепочка может быть организована по разным принципам:

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

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

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

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

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

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

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

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

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

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

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

Создать навигационную цепочку можно разными способами: с помощью PHP, CSS, плагинов для популярных CMS WordPress, Joomla! и других движков — в сети можно найти массу решений. Какой бы способ вы ни выбрали, придерживайтесь следующих советов:

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

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

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

• если вы используете «хлебные крошки», располагайте их на каждой странице сайта в одном и том же месте;

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

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

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

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

blog.promopult.ru

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

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

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

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

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

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

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

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

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

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

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

pro-promotion.ru

Что такое «хлебные крошки» и как навигационная цепочка влияет на продвижение сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

www.calltouch.ru

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

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

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

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

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

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

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

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

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

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

Существует три основных тип хлебных крошек. Давайте посмотрим на них поближе.

1.Основанные на местоположении.

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

2.Основанные на атрибутах.

Показывают аттрибуты страницы. Например, на этом скриншоте показано, что мы находимся на странице с компьютерами с процессором Intel Core i7.

3.Основанные на истории.

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

В основном это выглядит так: Главная> Предыдущая страница> Предыдущая страница> Предыдущая страница> Текущая страница.

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

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

1. Улучшают навигацию сайта. Если разместить хлебные крошки на сайт, то посетитель сразу увидит в какой категории он находиться, а также в любой момент может подняться на уровень выше. Для сайтов с большим количеством вложенных страниц советую обязательно использовать хлебные крошки, это очень важный элемент внутренней оптимизации сайта.
2. Улучшают внутреннюю перелинковку. Если взглянуть на хлебные крошки, которые размещены на моем сайте, то сразу видно, что со всех страниц идет ссылка на главную и на рубрику, таким образом, эти страницы получают наибольший вес, что очень хорошо. Категорию можно продвинуть по какому-нибудь ключевому слову. А что касается главной страницы, то я считаю, что ее нужно обязательно продвигать по высокочастотному запросу.
3. Улучшают индексацию сайта. Хлебные крошки – это всего лишь внутренние ссылки. Если робот перейдет на страницу сайта, то он будет «ходить» по этим ссылкам. Таким образом можно сделать вывод, что поисковик будет быстрее находить другие посты вашего ресурса и индексировать их.
4. Влияют на URL-ы в выдаче. Если на сайте присутствуют хлебные крошки, то поисковые системы иногда показывают их в выдаче. А это позволяет увеличить CTR и соответственно посещаемость вашего ресурса.
5. Улучшают релевантность страницы. Практически все оптимизаторы прописывают ключевое слово в заголовке h2. Так вот, если сделать хлебные крошки, то этот заголовок будет дублироваться на странице, и соответственно будут дублироваться ключевые слова :smile:.

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

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

Если у вас сайт на WordPress, то самый простой путь, это использовать плагин. И один самых популярных SEO плагинов — Yoast, уже имеет этот фукционал.

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

Делаем хлебные крошки с помощью плагина Breadcrumb NavXT

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

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

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

Вам нужно здесь изменить анкор и ссылку на главную страницу своего сайта:

Мы сделали все настройки, теперь нужно вставить еще один кусочек кода, для того, чтобы вывести крошки на сайт:

Ну и в таблице стилей я прописал точно такие стили, как и в предыдущем случаи:

Получилось вот так:

Ну а теперь, на этом все на сегодня. До встречи в следующих постах.

vachevskiy.ru

Зачем нужны хлебные крошки на сайте

Содержание:

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

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

Главная страница – категория – подкатегория – … текущая страница

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

Какие задачи решают хлебные крошки

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

1. Отображение уровня вложенности и пути текущей страницы — пользователь видит и понимает, на какой странице и в каком разделе он находится;
2. Упрощение навигации по сайту, в случае если необходимо перейти на страницу с уровнем вложенности выше. Например, если пользователю потребуется перейти с карточки товара на страницу категории, вместо поиска нужной ссылки в основном меню сайта (зачастую довольно запутанному), достаточно кликнуть на соответствующую ссылку в блоке хлебных крошек;
3. Увеличение пользовательской вовлеченности (увеличивается глубина просмотра сайта, снижается показатель отказов), за счет упрощения навигации по сайту;
4. Улучшение поведенческих факторов влечет за собой более качественное ранжирование страниц сайта в поисковых системах;
5. Обеспечение корректной перелинковки и распределения ссылочного веса между страницами сайта;
6. При использовании микроразметки хлебных крошек по словарю schema.o, отображение в спиппетах Google корректной навигационной цепочки.

Стандартные рекомендации для блока хлебных крошек

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

1. Не отображайте блок хлебных крошек на главной странице;
2. Хлебные крошки должны быть расположены в одном и том же месте на всех страницах сайта и иметь одинаковый внешний вид;
3. Отображайте в последнем шаге хлебных крошек текущую страницу, если при этом блок хлебных крошек не будет занимать много пространства и вынуждать скрывать промежуточные шаги хлебных крошек. В противном случае – скрывайте последний шаг;
4. При указании текущей страницы в качестве последнего шага хлебных крошек, этот элемент должен быть некликабельным. Размещение ссылки со страницы на саму себя не только может запутать пользователей, но и некорректно с точки зрения поисковой оптимизации. В тоже время, отсутствие ссылки в микроразметке хлебных крошек, будет воспринято валидаторами как ошибка, а навигационная цепочка в сниппете Google не будет сформирована:

   
   

   Для устранения ошибки, необходимо в микроразметке последнего шага указать ссылку на соответствующую страницу c помощью атрибута content=”ссылка_на_страницу”, размещенного в теге <div itemprop=»item» title=» «>.

   
   

   Пример некорректной микроразметки последнего шага хлебных крошек

   
   

   Пример корректной микроразметки

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

   
   

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

   
   

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

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

   Например, вместо навигационной цепочки:

   «Главная – каталог – холодильники – холодильники двухкамерные – холодильники Bosch двухкамерные – холодильник Bosch KGN39VL17R»,

   рекомендуем использовать вариант:

   «Главная – каталог – холодильники – двухкамерные – Bosch – KGN39VL17R».

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

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

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

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

Частые вопросы

Можно ли размещать хлебные крошки внизу страницы?

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

Нужно ли размещать блок хлебных крошек, если сайт состоит из небольшого количества страниц?

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

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

Нужны ли хлебные крошки в мобильной версии сайта?

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

Как выводить хлебные крошки для страницы товара, который размещен в разных разделах?

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

Заключение

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

racurs.agency