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

Время чтения: 6 минут(ы)

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

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

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

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

Ниже пример «хлебных крошек» на сайте «BonPrix»:

Плюсы «хлебных крошек»:

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

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

Вес страницы – это условная величина, которая показывает «значимость» сайта.

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

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

2. Поведение пользователей

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

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

3. Сниппет

Сниппет – это фрагмент текста, который выводится рядом со ссылкой в поисковой выдаче.

С помощью поисковой системы Google можно передавать структурированные данные и улучшить позиции сайта в выдаче. Яндекс немного отстает от Google и пока не умеет поддерживать данный вид разметки. Но Яндекс сам формирует цепочку навигации, которую можно увидеть в поиске.

Оформленная и неоформленная с помощью структурированных данных навигационная цепочка в выдаче Google:

Google использует три формата передачи структурированных данных – JSON-LD, Microdata, RDFa. «Хлебным крошкам» подойдут форматы Microdata и RDFa. Ниже представлен пример оформления кода в формате Microdata:

После оформления кода необходимо убедиться, нет ли ошибок. Для этого существует инструмент валидатор от Google .

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

4. Помните

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Составляющие структуры сайта

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

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

• Линейная структура – последовательное представление информации. Пользователь открывает одну страницу за другой, постепенно знакомясь с представленной на них информацией. Стандартная навигация для таких сайтов-книг – это переход на главную, предыдущую или следующую страницы. У линейной структуры может быть несколько ответвлений от главной страницы.
• Древовидная структура – в данном случае строится иерархия, в которой от главной страницы пользователь переходит к разделам. К любому разделу могут быть открыты подразделы, к ним – также свои подразделения следующего уровня, а также конечные внутренние страницы.
• Решетчатая структура – похожа на предыдущую, но представляет собой более сложный вариант, когда из любого раздела, с любой страницы можно перейти в любую часть сайта, в совершенно другие ветки.

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

Как осуществить оптимизацию структуры сайта?

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

Требования к главной странице

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

• Нужно исключить наличие дублей главной страницы, доступных по разным адресам. Чтобы найти дубли, можно ввести в строку поиска Яндекса или Гугл title главной в кавычках.
• Главная страница используется как отправная точка для навигации, представление ресурса с краткой информацией на нем. Здесь лучше не размещать запросы и не продвигать ее по ним.
• На видном месте должны быть телефон и адрес организации (если ее деятельность предполагает возможность клиента приехать по месту ее нахождения), название, написанное текстом (не картинка или не только картинка). Обычно такую информацию размещают сверху, в шапке сайта.
• На главной должен быть удобный каталог навигации для перехода в другие разделы и к отдельным страницам.
• Такие элементы, как мета-теги, должны содержать наименование организации. Их следует делать короткими, ёмкими, без не несущих никакой информации знаков.

Оптимизация разделов

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

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

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

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

Работа с циклическими ссылками

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

Динамическая карта сайта

Использование динамической карты сайта в формате XML позволяет существенно увеличить скорость и эффективность индексации ресурса поисковыми роботами. Для настройки такой карты можно использовать плагин All in One SEO Pack.

Контроль уровня вложенности страниц

Большая степень вложенности страниц утяжеляет структуру сайта. Страницы с большой вложенностью хуже индексируются поисковиками. Чтобы определить страницы с большим уровнем вложенности, можно использовать ресурс Xenu Link Sleuth.

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

Под хлебными крошками понимается элемент навигации, который отображается на каждой странице и представляет собой описание пути до данной страницы от главной, или иерархию уровней, которые ведут от главной страницы к той, на которой находится посетитель. Например: Главная/Автомобили/Toyota/Toyota Land Cruiser 200.

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

Использование знака копирайта

Чтобы показать, что сайт защищен от копирования, можно установить значок охраны авторского права — ©. Это стилизованная буква «с» из английского слова copyright, что означает «авторское право».

Размещают этот символ на сайте обычно в самом низу, в элементе «footer». Чтобы его использование приносило нужный эффект, и в последующем можно было использовать факт его наличия при защите своих исключительных прав собственности на сайт, необходимо оформить его в соответствии с законодательством. Регулируются нормы оформления знака в документе ГОСТ Р 7.0.1-2003 и статье 1271 ГК РФ.

Для соблюдения всех требований необходимо поместить на сайт следующую информацию:

• Сам значок в том виде, которого требует ГОСТ (латинская буква «c», помещенная в окружность);
• Данные владельца прав на объект (в данном случае сайт) – фамилия, имя, отчество, если это физическое лицо, и наименование, указанное как в официальных документах о регистрации, для организаций;
• Год, когда сайт был размещен в интернете.

Правильный вид уведомления о копирайте: © ООО «Кисель», 2000-2017. Здесь важно все – даже постановка знаков препинания. Диапазон дат указывается, если на сайте периодически появляются новые данные, материалы. Если же обновлений нет, можно указать только год размещения сайта. Указание копирайта добавит сайту солидности и, если и не отпугнет мошенников, то его наличие может повысить доверие к порталу клиентов и партнеров.

Давайте для начала разберемся — что это такое — хлебные крошки на сайте и зачем они нужны.

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

Влияние хлебных крошек на SEO

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

1. Внутренняя перелинковка

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

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

2. Поведенческие факторы

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

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

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

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

Главная

Теперь рассмотрим, что это такое.

Первое, что нам необходимо сделать — это обернуть каждую ссылку в тег и в самом теге прописать
itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»

ССЫЛКА

Этот тег у нас остается по умолчанию. В нем мы говорим поисковикам — что вот это разметка schema и элемент этой разметки называется itemListElement. Данная конструкция используется во всех ссылках.

Главная

Соответственно, если бы у нас был второй уровень вложенности, надо было бы написать content=»2″.

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

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

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

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

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

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

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

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

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

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

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

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