У «хлебных крошек» или по-другому навигационных цепочек (с англ. breadcrumbs) стандартный исторически сложившийся дизайн. Кажется, их местоположение на веб-странице очевидно.

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

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

Что такое навигационная цепочка

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

Каким сайтам нужны навигационные цепочки

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

Каким сайтам не нужны навигационные цепочки

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

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

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

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

Три типа навигационных цепочек

Большинство экспертов по UX выделяют три типа навигационных цепочек:

1. На основе перемещений пользователя

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

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

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

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

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

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

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

Главная > Сапоги > На каблуке > Чёрные > Длина по щиколотку

или так:

Главная > На каблуке > Сапоги > Длина по щиколотку > Чёрные

Или же она должна включать в себя совсем другой набор характеристик?

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

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

3. На основе иерархии

Такие цепочки также известны как навигационные цепочки на основе местоположения.

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

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

Как навигационные цепочки и структурированные данные влияют на SEO

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

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

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

1. Помогают поисковым роботам сканировать сайт

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

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

Эти положительные эффекты от применения навигационных цепочек можно оценить по уменьшению числа исключений «discovered — currently not indexed» (обнаруженная, но на данный момент не проиндексированная страница) в Google Search Console, а также по увеличению частоты сканирования страниц.

2. Повышают эффективность индексирования страниц

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

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

Эти положительные эффекты от применения навигационных цепочек можно оценить по увеличению количества корректных URL‑адресов в Google Search Console и по повышению скорости индексирования.

3. Улучшают показатели сайта

Навигационные цепочки:

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

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

Навигационная цепочка в разметке schema.org

Навигационная цепочка, которая отображается на странице, и навигационная цепочка в разметке schema.org — это разные вещи. Если на сайте есть навигационная цепочка, это ещё не значит, что на сайте есть и структурированные данные для неё.

Микроразметка Schema: исчерпывающее руководство для SEO

Самый быстрый способ узнать, есть ли на вашем сайте корректная разметка schema.org для навигационной цепочки, — посмотреть отчёт по навигационным цепочкам в Google Search Console. Если наблюдаются ошибки, проверьте корректность структурированных данных типа BreadcrumbList.

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

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

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

Как делать навигационные цепочки с ориентацией на Mobile First

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

Вот как обеспечить оптимальный UX на мобильных устройствах:

Навигационная цепочка должна присутствовать на каждой подходящей для этого странице. Подходящая страница — это страница, на которой цепочка ощутимо помогает пользователю ориентироваться на сайте, и поэтому её стоит разместить в верхней части страницы.
Цепочка должна быть расположена непосредственно под основным навигационным меню и над заголовком первого уровня. Именно здесь пользователи ожидают её увидеть. В любом другом месте навигационная цепочка будет не так удобна для пользователей, а если поместить её в нижнюю часть страницы, то не связанные со внутренними ссылками возможности будут ограничены.
Навигационная цепочка должна отображать путь от главной страницы до текущей. Главная страница действует как якорь, значительно помогая пользователям ориентироваться на сайте. Отображение последнего звена в виде элемента, недоступного для кликов и непохожего на другие элементы, сообщает пользователю, на какой странице он сейчас находится.
Оптимальным разделителем для гиперссылок в навигационных цепочках остается символ «больше чем» (>), поскольку он лаконичен и одновременно указывает на связь между страницами. Другие варианты — косая (/) или прямая черта (|), не символизируют иерархию. А варианты " и ‑> занимают лишнее место.
Дизайн навигационной цепочки должен быть простым и ненавязчивым. Нужно использовать в меру мелкий шрифт и достаточной величины внутренние отступы, чтобы пользователям было удобно нажимать по элементам цепочки. Также нужно оформлять элементы в том же стиле, что и для текстовых ссылок сайта. Не загромождайте строку с навигационной цепочкой ненужным текстом наподобие «Вы здесь» или «Навигация».

Что запомнить

Навигационная цепочка — это строка зависящих от контекста ссылок, которые указывают текущее местоположение пользователя на сайте.
Они нужны сайтам, которые основаны на сложных иерархических структурах, и часто используются в электронной коммерции.
Сайтам с «плоской» структурой навигационные цепочки не нужны.
Навигационные цепочки бывают трех типов: на основе истории перемещения пользователя, на основе различных атрибутов и на основе иерархии сайта. Для SEO определяющее значение имеют последние.
Навигационные цепочки на основе иерархии помогают поисковым роботам тщательнее сканировать сайт, повышают эффективность индексирования страниц и улучшают показатели самого сайта.
Навигационная цепочка должна быть не только на сайте, но и в разметке schema.org, чтобы Google мог сравнивать контент с контекстом.
Сейчас важно во всем ориентироваться на Mobile First‑подход. Поэтому mobile‑friendly навигационная цепочка должна: присутствовать на каждой странице, располагаться непосредственно под навигационным меню и над заголовком первого уровня, отображать путь от главной страницы до текущей.
Также, чтобы сделать цепочку дружелюбной к мобильному UX, нужно использовать разделитель > и в целом ненавязчивый и простой дизайн.
Ещё несколько рекомендаций по составлению цепочек: поместите в неё полный путь по иерархии сайта до текущей страницы; не укорачивайте цепочки; воспользуйтесь функцией переполнения, чтобы без ущерба для дизайна и удобства использования предотвратить перенос цепочки на новую строку; делайте текст ссылок в цепочке кратким и соответствующим ключевым словам; включайте заголовки страниц в цепочку; не используйте многоточие для сокращения заголовков страниц.