1. Что такое навигация по крошке?
2. Когда использовать навигацию Breadcrumb?
3. Как реализовать навигацию Breadcrumb
4. Пример HTML-разметки для Breadcrumb Trail
5. Отдельно с легкими персонажами
6. Пример разметки панировочных сухарей с использованием микроданных
7. Пример разметки панировочных сухарей с использованием RDFa
8. Пример разметки хлебных крошек с использованием JSON-LD
9. Как проверить вашу реализацию структурированных данных
10. Типы навигации
11. Последовательный и непоследовательный след Хлебной крошки
12. Уникальный или несколько URL?
13. Пример одного уникального URL
14. Путь пользователя синхронизирован с цепью Breadcrumb
15. Практическое решение
16. Техническая точка зрения
17. Концептуальная точка зрения
18. Лучшие практики по сухарям
19. Типичные ошибки с навигацией Breadcrumb
20. Использование перевернутого Breadcrumb Trail в заголовке сайта
21. Часто задаваемые вопросы о сухарях
22. Должен ли я показать текущий элемент в следе крошки?
23. Должен ли я связать текущий элемент в журнале?

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

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

Что такое навигация по крошке?

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

Schema.org определяет это как:

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

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

Дом> Мебель> Столы> Кухонный стол

Преимущества пользовательского опыта

• Дополнительный элемент навигации
• Более короткие пути кликов для навигации по уровням сайта
• Создает интерес к элементам выше в иерархии сайта
• Может привести к более активному участию пользователей

Технические преимущества

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

Когда использовать навигацию Breadcrumb?

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

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

Как реализовать навигацию Breadcrumb

Реализация хлебных крошек может быть выполнена с помощью простой разметки HTML / XHTML.

Пример HTML-разметки для Breadcrumb Trail

Допустим, вы хотите создать цепочку крошек, как это:

Дом> Мебель> Столы> Кухонный стол

Простая HTML-разметка для ее создания может выглядеть так:

<a href="/"> Главная страница </a> & gt; <a href="/furniture/"> мебель </a> & gt; <a href="/furniture/tables/"> Таблицы </a> & gt; Кухонный стол

Отдельно с легкими персонажами

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

• > или >> или варианты этого типа ›(он же французская кавычка) и»
• / или же //

Использование этих символов добавляет знакомство и, следовательно, удобство для пользователя.

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

Подумайте о пользователе при реализации ваших хлебных крошек.

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

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

Пример - хлебные крошки в поисковом фрагменте

Свойства формата структурированных данных для хлебных крошек определяются schema.org BreadcrumbList ,

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

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

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

Главная> Мебель> Кухня <ol itemscope itemtype = "http://schema.org/BreadcrumbList"> <li itemprop = "itemListElement" itemscope itemtype = "http://schema.org/ListItem"> <a itemprop = "item "href =" https://example.com/ "> <span itemprop =" name "> Главная </ span> </a> <span itemprop =" position "content =" 1 "> & gt; </ span> </ li> <li itemprop = "itemListElement" itemscope itemtype = "http://schema.org/ListItem"> <a itemprop="item" href="https://example.com/furniture/"> <span itemprop = "name"> Мебель </ span> </a> <span itemprop = "position" content = "2"> & gt; </ span> </ li> <li itemprop = "itemListElement" itemscope itemtype = "http : //schema.org/ListItem "> <a itemprop="item" href="https://example.com/arts/furniture/kitchen/"> <span itemprop =" name "> Кухня </ span> < / a> <span itemprop = "position" content = "3"> </ span> </ li> </ ol>

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

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

Главная> Мебель> Кухня <ol vocab = "http://schema.org/" typeof = "BreadcrumbList"> <li property = "itemListElement" typeof = "ListItem"> <a property = "item" typeof = "WebPage" href = "https://example.com/"> <span property = "name"> Главная </ span> </a> <span property = "position" content = "1"> & gt; </ span> < / li> <li property = "itemListElement" typeof = "ListItem"> <a property="item" typeof="WebPage" href="https://example.com/furniture/"> <span property = "name" > Мебель </ span> </a> <span property = "position" content = "2"> & gt; </ span> </ li> <li property = "itemListElement" typeof = "ListItem"> <a property = "item" typeof = "WebPage" href = "https://example.com/furniture/kitchen/"> <span property = "name"> Кухня </ span> </a> <span property = "position" content = "3"> </ span> </ li> </ ol>

Пример разметки хлебных крошек с использованием JSON-LD

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

Главная> Мебель> Кухня <script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@ type ":" ListItem "," position ": 1," item ": {" @id ":" https://example.com/ "," name ":" Home "}}, {" @type ": "ListItem", "position": 2, "item": {"@id": "https://example.com/furniture/", "name": "Furniture"}}, {"@type": " ListItem "," position ": 3," item ": {" @id ":" https://example.com/furniture/kitchen/ "," name ":" Kitchen "}}]} </ script>

Как проверить вашу реализацию структурированных данных

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

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

Типы навигации

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

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

• Вы хотите последовательный след крошки?
• Хотите использовать уникальные URL-адреса для каждого продукта или несколько URL-адресов в зависимости от категории?
• Будет ли пользовательский путь синхронизирован с журнальной крошкой?

Последовательный и непоследовательный след Хлебной крошки

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

Пример для последовательного следа крошки:

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

главная> мебель> кухня

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

главная> мебель> кухня> кухонный стол

Пример непоследовательного следа крошки

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

главная> мебель> кухня

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

главная> продукты> кухонный стол xy

Пример для последовательных хлебных крошек с архитектурой нескольких категорий:

Пользователь щелкнул по категориям «мебель», «кухня» и «столы», а затем выбрал продукт

главная> мебель> кухня> столы> кухонный стол xy

Пользователь нашел продукт любым другим способом

главная> продукты> кухонный стол xy

Уникальный или несколько URL?

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

Продукт может быть доступен через

• Один уникальный URL
• Несколько URL-адресов в зависимости от категории

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

Пример одного уникального URL

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

Категория-адрес:

http://example.com/furniture/kitchen/ http://example.com/furniture/tables/

Продукт-URL:

http://example.com/procuct/kitchen-table-xy

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

Категория-адрес:

http://example.com/furniture/kitchen/ http://example.com/furniture/tables/

Продукт-адрес:

http://example.com/furniture/kitchen/kitchen-table-xy http://example.com/furniture/tables/kitchen-table-xy

Путь пользователя синхронизирован с цепью Breadcrumb

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

Примеры:

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

главная> кухня> предметы быта> кухонный стол xy

Пользователь использовал фильтр производителя для "Best Tables Inc", а затем выбрал продукт

главная> кухня> Best Tables Inc> кухонный стол xy

Пользователь нашел продукт любым другим способом

главная> продукты> кухонный стол xy

Существует три основных способа определения логики хлебных крошек: на основе местоположения, пути или атрибутов.

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

В основанных на местоположении хлебных крошках иерархическая структура синхронизируется с хлебными крошками.

Пример:

URL

http://example.com/tables/kitchentable-oak/

Путь крошки

Главная> Столы> кухонный стол дуб

Pro:

• Легко реализовать
• Пользователь может легко определить текущую позицию в иерархии сайтов

Contra:

• След крошки может стать непоследовательным, в зависимости от структуры сайта

Требования:

• Требуется организовать информационную структуру логическим способом

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

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

Пример:

URL

http://example.com/tables/kitchentable-oak/

Путь крошки

Главная> дуб> большой> кухонный стол дуб

Pro:

• Может предложить лучшее удобство использования, чем панировочные сухари

Contra:

• Может привести к очень длинному следу крошки
• Может привести к другому порядку для панировочных сухарей

Требования:

• Требуется определить категории по умолчанию в нескольких категориях

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

Пример:

URL

http://example.com/tables/kitchentable-oak/

Путь крошки

Дом> мебель> кухня> столы> дуб (х)> большой (х)> кухонный стол дуб

Pro:

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

Contra:

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

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

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

Пример:

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

URL

http://example.com/tables/kitchentable-oak/

Путь крошки

Лучшая кухонная мебель> столы> дуб> столы> кухонный стол дуб

Pro:

• Не требует какой-либо конкретной структуры сайта

Contra:

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

Практическое решение

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

Техническая точка зрения

С технической точки зрения мы предлагаем:

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

Это решение имеет следующие преимущества

• Хороший пользовательский опыт
• Нет дублированного контента
• Хороший баланс между усилием и выгодой

Если вы хотите работать с несколькими URL-адресами, обязательно

• Определите URL по умолчанию для каждого продукта и
• Работать с отн = каноническое чтобы избежать дублирования проблем с контентом

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

• Не торопитесь, чтобы определить возможные пути крошки и не используйте простой след истории

Концептуальная точка зрения

С концептуальной точки зрения мы предлагаем:

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

Лучшие практики по сухарям

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

Пример:

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

Домой Уровень 1 Уровень 2 Уровень 3 Уровень 4 Уровень 5 Уровень 6 Уровень до 0 1 2 3 4 5 6 Уровень после 0 1 2 2 2 2 1

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

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

Пример категорированных хлебных крошек в поисковом фрагменте

Начало>…> Кухня> Столы

Пример использования хлебных крошек на основе атрибутов в поисковом фрагменте

Главная>…> дуб> большой

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

Пример:

Дом> Мебель> Кухня> Столы> Страница 3

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

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

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

Типичные ошибки с навигацией Breadcrumb

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

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

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

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

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

Часто задаваемые вопросы о сухарях

Должен ли я связать домашний предмет в следе крошки?

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

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

Должен ли я показать текущий элемент в следе крошки?

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

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

Должен ли я связать текущий элемент в журнале?

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

На этот вопрос можно ответить как с технической точки зрения, так и с точки зрения удобства использования:

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

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

Мы предлагаем не ссылаться на текущий пункт в хлебной крошке!

Похожие

Комментарии