Хлебные крошки интернет-магазина: навигация, SEO и проверка

Хлебные крошки — цепочка ссылок на родительские разделы страницы: например, «Сумки › Рюкзаки › Рюкзак Urban 20». Она помогает покупателю понять, где находится товар, и перейти к более широкой группе. Для SEO — поисковой оптимизации — цепочку можно дополнить структурированными данными BreadcrumbList, чтобы сообщить поисковику её смысл.

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

Зачем магазину хлебные крошки

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

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

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

Цепочка категорий и возврат к результатам решают разные задачи

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

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

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

Как выбрать путь для товара в двух категориях

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

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

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

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

Учебный пример с рюкзаком

Пусть условный рюкзак Urban 20 находится в категории «Сумки → Рюкзаки» и в подборке «Новинки». У товара один стабильный адрес. Все маршруты ниже учебные и не относятся к действующим страницам Rapi Flow.

Страница	Условный адрес
Сумки	/catalog/bags
Рюкзаки	/catalog/bags/backpacks
Новинки	/collections/new
Рюкзак Urban 20	/products/urban-20

Выбираем основной путь «Сумки › Рюкзаки › Рюкзак Urban 20». Первые два пункта — ссылки на соответствующие категории, последний — текст текущего товара. Подборку оставляем отдельной возможностью просмотра; она не меняет основную цепочку при каждом новом заходе.

Теперь определим результат для трёх способов входа:

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

Для второго случая исходный список может иметь адрес /catalog/bags/backpacks?color=black&sort=price-asc. Его сохраняем для исторического возврата. В хлебной крошке «Рюкзаки» оставляем /catalog/bags/backpacks без параметров. Так покупатель получает и полный раздел, и прежнюю выборку, понимая разницу между действиями.

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

Как добавить BreadcrumbList

JSON-LD — формат структурированных данных, который размещают в коде страницы. В BreadcrumbList цепочка состоит из элементов ListItem: у каждого есть название и порядковый номер, у родительских пунктов — адрес страницы. Для Google нужны как минимум два элемента, а номера начинаются с 1.

Для учебной цепочки выше объект выглядит так. Домен shop.example.test условный: перед внедрением замените его и маршруты адресами своего магазина.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Сумки",
      "item": "https://shop.example.test/catalog/bags"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Рюкзаки",
      "item": "https://shop.example.test/catalog/bags/backpacks"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Рюкзак Urban 20"
    }
  ]
}

name содержит подпись пункта, position — целое число его позиции, item — URL страницы. У последнего пункта Google разрешает не указывать item: тогда используется адрес страницы, на которой размещён объект. Здесь последний пункт обозначает именно текущий товар.

Сам по себе текст в редакторе не устанавливает разметку. Объект нужно поместить в HTML-элемент script с типом application/ld+json через шаблон страницы или предусмотренное поле платформы. Видимую цепочку создают отдельно. Если тема уже выводит BreadcrumbList, сначала проверьте её код: второй модуль может добавить противоречащую цепочку.

Для каждого пункта сопоставьте три вещи: подпись в интерфейсе, адрес перехода и значение в JSON-LD. В нашем примере «Рюкзаки» в обоих местах ведёт в ту же категорию. Поисковый запрос, сортировка и сохранённый фильтр в этот объект не входят.

Что учитывать для Яндекса

Яндекс Вебмастер описывает BreadcrumbList в формате JSON-LD и учитывает название, адрес и порядок элементов. Для всех пунктов, кроме последнего, должны быть пути к разделам; используемые адреса должны относиться к домену сайта. Порядковые номера задавайте числами, что подходит и требованиям Google.

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

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

Что должно работать на телефоне и с клавиатуры

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

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

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

В реализации используйте область навигации nav с доступным названием, например aria-label="Хлебные крошки". Родительские пункты — обычные ссылки, доступные клавишей Tab. Если текущий пункт тоже является ссылкой, обозначьте его aria-current="page"; для обычного текста текущей страницы этот атрибут необязателен.

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

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

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

1. Откройте каждый путь как покупатель. Нажмите все родительские ссылки и сверяйте названия целевых страниц. Не должно быть пустых разделов, ошибочных адресов или неожиданного перехода на другую категорию.
2. Проверьте историю отдельно. Откройте товар из списка с фильтром, затем из внутреннего поиска и напрямую. Возврат сохраняет известные результаты, а при прямом посещении не обещает неизвестную историю.
3. Сопоставьте интерфейс и код. Проверьте названия, последовательность, URL и отсутствие противоречащих объектов BreadcrumbList. Убедитесь, что шаблон не оставил адреса учебного домена.
4. Проверьте разметку. В Google используйте Rich Results Test, а в Яндекс Вебмастере — валидатор микроразметки. Исправьте ошибки и отдельно прочитайте предупреждения. Если проверяли вставленный код, повторите проверку опубликованного URL.
5. Проверьте доступность роботам. В инструментах проверки URL посмотрите, получают ли они страницу и её разметку. Для страниц, которые планируете показывать в поиске, проверьте авторизацию, robots.txt, noindex и предпочтительный URL.
6. Наблюдайте после переобхода. Посмотрите отчёты структурированных данных и реальный поисковый результат. Если цепочка не появляется, сначала исключите ошибки и недоступность страницы, затем учитывайте выбор самого поисковика.

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

Что хлебные крошки могут изменить в выдаче

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

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

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

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

Нужно ли включать главную страницу и название товара?+

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

Должны ли хлебные крошки повторять папки в URL?+

Нет. Товар по адресу /products/urban-20 может относиться к категории «Рюкзаки», даже если её название отсутствует в адресе. Цепочка описывает путь в структуре магазина; каждый родительский пункт должен вести на свою настоящую страницу.

Можно ли оставить крошки без разметки?+

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

Чек-лист хлебных крошек

• Зафиксируйте основную категорию каждого товара: прямое посещение даёт понятную цепочку без истории покупателя.
• Нажмите все родительские ссылки: адреса открывают ожидаемые разделы, подписи соответствуют их содержимому.
• Вернитесь из товара в поиск и отфильтрованный список: отдельное действие сохраняет запрос и фильтры.
• Сверьте JSON-LD с интерфейсом: названия, порядок и адреса совпадают, случайных уровней и дублирующей разметки нет.
• На телефоне откройте все значимые уровни; клавиатурой пройдите ссылки с видимым фокусом и понятными названиями.
• Проверьте опубликованный URL инструментами Google и Яндекса; ошибки устранены, страницу и разметку видят роботы.
• После изменения структуры повторите проход и наблюдайте поисковое представление, учитывая отсутствие гарантии показа.