Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Хлебные крошки - это система на сайте. Это цепочка по которой движется пользователь. Она начинается на главной странице сайта и заканчивается в том разделе, в котором на данный момент находится пользователь. Хлебные крошки обычно отображаются в верхней части страницы.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Это выражение – дословный перевод английского термина Breadcrumbs. Считают, что это отсылка к сказке братьев Гримм «Гензель и Гретель». Когда дети отправились в лес, они оставляли за собой дорожку из хлебных крошек, чтобы не потеряться и найти обратный путь. На сайте пользователь тоже совершает определенный маршрут, и с помощью навигационной цепочки может вернуться обратно на один или несколько шагов.
Для чего нужны хлебные крошки на сайте
Чтобы пользователь не заблудился на сайте, ему важно знать, в каком разделе вашего сайта он находится и как вернуться назад. Поэтому навигационная цепочка необходима практически любому информационному или корпоративному сайту, а также интернет магазинам. Мы уже писали о том, . Теперь поговорим о другом типе навигации – дублирующей, или тех самых Breadcrumbs – хлебных крошках.
У дублирующей навигации есть две основные функции, а именно:
Улучшение юзабилити сайта
- подсказывает пользователю, в какой части ресурса он находится;
- делает понятной структуру и расположение страниц;
- наглядно демонстрируют структуру ресурса;
- помогает перемещаться между более высоким или более низким уровнями вложенности, при этом не нужно нажимать кнопки «Вперед» или «Назад» в браузере;
Положительное влияние на SEO
- позволяет сделать перелинковку с другими страницами сайта;
- облегчает навигацию и за счет этого увеличивает показатели поведенческих метрик: время посещения, глубина просмотра;
- приводит в порядок внешний вид сниппета в выдаче, при условии, что вы выполнили разметку микроданных.
Хлебные крошки: какими они бывают
Навигационная цепочка может быть оформлена по-разному. Вот самые распространенные разновидности:
Линейная
Показывает весь путь посетителя сайта от главной страницы до текущей. Если структура слишком сложная и длинная, навигационная цепочка укорачивается. В некоторых случаях главная страница сайта не является начальным звеном. Пример – хлебные крошки на сайте Amazon:
Навигация здесь начинается с одного из разделов каталога, а не с главной страницы.
Система «Назад»
На сайте устанавливается кнопка «Назад к каталогу», «Назад к главной» и т.п. Практически то же самое, что кнопка «Назад» в браузере. Неудобный тип навигации, если на сайте нет поиска.
Линейная + кнопка «Назад»
Объединяет два варианта. В этом случае доступна и линейная навигационная цепочка, и кнопка «Назад».
Хорошо, если кнопка «Назад» присутствует только на тех страницах, на которые пользователи попадают из внутреннего поиска на сайте. Ставить такую комбинацию на всех страницах не имеет смысла.
Как правильно создать хлебные крошки на сайте
Навигационная цепочка пригодится любому ресурсу. При ее создании учитывайте эти несложные правила:
- Никаких хлебных крошек на главной странице. Получится, что вы ставите на странице ссылку на нее же саму. Это отрицательно скажется на ранжировании. Подробнее о факторах ранжирования можно прочитать .
- Последним кликабельным звеном цепочки должна быть предыдущая страница, иначе вы также продублируете ссылку, как в случае с хлебными крошками на главной.
- Навигационные элементы должны быть хорошо видны пользователям. Текст должен контрастировать с фоном, и располагать элементы желательно вверху страницы.
- В Яндексе и Гугле есть функция, которая позволяет отображать навигационные цепочки вашего сайта в результатах поиска. Для этого нужно сделать разметку микроданных. Это удобно, поскольку пользователь сразу видит структуру вашего сайта:
Хлебные крошки – это удобный способ навигации на сайте. При правильной настройке навигационные цепочки помогают пользователям, улучшают сайта и положительно сказываются на продвижении в Яндексе и Google.
Хлебные крошки (или навигационная цепочка; англ. breadcrumbs) – это часть навигации на сайте, отображающая часть структуры сайта и вложенность страницы, на которой находится пользователь. Зачастую, хлебные крошки выглядят в виде пути от корня сайта к текущему просматриваемому документу.
Пример использования
Главная страница -> Раздел сайта -> Запись из раздела
Главная страница -> Архив публикаций -> Запись из раздела
(все части хлебных крошек, кроме последней, являются ссылками на соответствующие страницы)
Эта часть навигации создана для удобства пользователя, который после прочтения статьи может посетить категорию этой статьи, чтобы посетить подобные страницы, или вернуться в корневой документ – на главную страницу сайта. Так как большинство посетителей приходят из поисковых систем, навигация такого рода поможет ему разобраться в структуре сайта и переходить на страницы меньшего уровня вложенности (например, рубрики или архив записей). Это повышает пользовательские факторы, позволяет дольше задержать посетителя на сайте и является частью внутренней перелинковки (хотя, во многих случаях breadcrumbs помещаются в теги
Где используются хлебные крошки
Навигация такого типа используется не всегда. Собственники сайтов с удобной, наглядной структурой и хорошим меню навигации зачастую не ставят их или даже не знают, что такое хлебные крошки. Такие сайты могут иметь небольшое количество страниц или хорошо структурированные разделы. Конкретной формулы для использования breadcrumbs нет, но если любая страница сайта доступна в два клика с главной – крошки не обязательны.
Все же, часто хлебные крошки используются на:
- Интернет-магазинах.
- Форумах.
- Сайтах со скудной навигацией (когда блок навигации не располагает всеми ссылками на разделы или находится в футере).
- Сайтах без карты.
Карта сайта часто заменяет breadcrumbs, если она правильно разработана (имеется в виду html-карта, а не файл sitemap.xml для поисковиков). Такая страница должна иметь ссылки на все главные разделы, что позволит пользователю с легкостью переходить по ним и искать нужную информацию.
На форумах и интернет-магазинах хлебные крошки – обязательный атрибут.
Интернет-магазины зачастую страдают навигацией. Множество товаров, которые могут быть даже не распределены по разделам, а также фильтры на поиск нужного создают сложную, неудобную структуру.
На форумах нормальная навигация не может присутствовать физически, за счет их динамичной структуры. Новые темы «заслоняют» старые, «золотые» темы заслоняют новые, а разделов на форуме чаще всего намного больше, чем на любом статейном блоге. В таком случае, пользователь, посетивший тему, просто-напросто заблудится без хлебных крошек.
Как поставить хлебные крошки
Обычно они ставятся в блоке контента ниже хедера и перед выводом контента страницы. В таком местеbreadcrumbs будут наиболее заметны и удобны. Реже крошки располагаются в конце вывода контента перед комментариями.
Вывод хлебных крошек может проводиться с помощью дополнений к популярным ЦМС (модуль для Друпал, плагин для Вордпресс, в Joomla есть встроенная возможность вывода пути к странице), на сайте с авторским php вставляется блоком через функции include или require (require-once). На популярных ЦМС для форумов (phpBB и прочее) эти функции или уже установлены, или могут быть установлены через соответственные расширения.
Время чтения: 6 минут(ы)
Помните сказку Братьев Гримм «Гензель и Гретель»? Там они кидали хлебные крошки на дорогу, чтобы найти путь домой. Конечно, в сказке птицы их склевали, и они не смогли вернуться, попали к злой ведьме. При чем здесь сказка и статья про интернет-маркетинг? Все очень просто, термин «хлебные крошки» используют специалисты . И на сайте эти крошки никто не съест, они укажут верный путь посетителю.
Хлебные крошки – это один из видов навигации сайта. Самый простой пример этой навигации можно увидеть на компьютере. Взгляните на рисунок:
Чтобы перейти обратно в раздел sys(C) не обязательно делать несколько нажатий кнопки «Назад», можно просто кликнуть по названию самой папки, и вы окажетесь там.
Зачем нужна на сайте такая навигация, если можно нажать пару раз «Назад» и оказаться там, где надо? Если вы на сайте интернет-магазина, например, чтобы перейти назад на несколько позиций, вы потратите кучу времени и ваши результаты поиска скорее всего не сохранятся. Инструменты навигации браузера оказываются неудобными.
Ниже пример «хлебных крошек» на сайте «BonPrix»:
Плюсы «хлебных крошек»:
- Упрощают навигацию по сайту для пользователя.
- Поисковые системы лучше ранжируют сайт с навигацией.
- Вы изначально грамотно свяжете страницы между собой (внутренняя перелинковка).
- Создают легкочитаемые сниппеты в поисковых системах. Сниппет – текст, который используется в качестве описания ссылок в поисковой выдаче.
- Создают правильный анкорный вес ссылки.
В этой статье вы узнаете, на что нужно обратить внимание при создании навигации «хлебные крошки».
Вес страницы – это условная величина, которая показывает «значимость» сайта.
Статический вес страницы – это количество ссылок на ней. Самый большой вес будет иметь главная страница сайта, так как на главную страницу ведут ссылки со всех страниц сайта.
Но бывает и такое, что вы продвигаетесь по конкурентным запросам. В таком случае, лучше использовать не слово «Главная», а фразу или запрос целиком, например: Техника > Аксессуары > Клавиатуры
2. Поведение пользователей
Грамотная навигация на сайте помогает пользователям быстрее находить нужную информацию. А со стороны поисковых систем такой сайт лучше ранжируется по продвигаемым запросам.
Также улучшаются показатели метрики, такие как глубина просмотра и вовлеченность пользователей. А это в свою очередь положительно сказывается не только на позициях сайта, но и на показателях конверсии.
3. Сниппет
Сниппет – это фрагмент текста, который выводится рядом со ссылкой в поисковой выдаче.
С помощью поисковой системы Google можно передавать структурированные данные и улучшить позиции сайта в выдаче. Яндекс немного отстает от Google и пока не умеет поддерживать данный вид разметки. Но Яндекс сам формирует цепочку навигации, которую можно увидеть в поиске.
Оформленная и неоформленная с помощью структурированных данных навигационная цепочка в выдаче Google:
Google использует три формата передачи структурированных данных – JSON-LD, Microdata, RDFa. «Хлебным крошкам» подойдут форматы Microdata и RDFa. Ниже представлен пример оформления кода в формате Microdata:
После оформления кода необходимо убедиться, нет ли ошибок. Для этого существует инструмент валидатор от Google .
Убедиться, что происходит правильная обработка и отображение структурированных данных поможет инструмент .
4. Помните
- Хороший тон – не делать последний элемент навигации ссылкой, например: Главная > Блог > Статья
- Если вы используете слишком много ключевых фраз в цепочке навигации, увеличивается вероятность применения фильтров к сайту со стороны поисковых систем.
- Внедрять «хлебные крошки» или нет – зависит от того, какой у вас ресурс. Если у вас сайт-визитка или на сайте мало разделов, то данная навигация вам не нужна. Но если у вас большой интернет-магазин, такая цепочка навигации вам явно необходима.
Навигация «хлебные крошки» незаменимая и необходимая конструкция. Еще до начала запуска сайта, необходимо до мелочей продумать работу навигации. Она жизненно необходима и многостраничным сайтам со сложной структурой. Загляните на крупнейшие ресурсы и в интернет-магазины, где четко продуманная система позволит понять все тонкости навигации и ее особенности.
Понятная и не утяжеленная структура сайта – это то, к чему стоит стремиться при его разработке и последующем ведении. Оптимизировать структуру нужно не только для удобства пользователей, но и чтобы не возникало проблем с его индексацией поисковыми роботами.
Составляющие структуры сайта
Структура сайта – это иерархия разделов, подразделов и страниц, на которых располагается размещенный на нем контент. Структура должна быть четкой, удобной и соответствовать типу информации, которая находится на ресурсе.
Есть несколько видов структур, в каждом из которых элементы располагаются определенным образом:
- Линейная структура – последовательное представление информации. Пользователь открывает одну страницу за другой, постепенно знакомясь с представленной на них информацией. Стандартная навигация для таких сайтов-книг – это переход на главную, предыдущую или следующую страницы. У линейной структуры может быть несколько ответвлений от главной страницы.
- Древовидная структура – в данном случае строится иерархия, в которой от главной страницы пользователь переходит к разделам. К любому разделу могут быть открыты подразделы, к ним – также свои подразделения следующего уровня, а также конечные внутренние страницы.
- Решетчатая структура – похожа на предыдущую, но представляет собой более сложный вариант, когда из любого раздела, с любой страницы можно перейти в любую часть сайта, в совершенно другие ветки.
Наиболее часто древовидная структура встречается как наиболее оптимальная, удобная – она не затрудняет работу поисков, если все сделать правильно, и помогает сделать комфортную для посетителей, понятную навигацию.
Как осуществить оптимизацию структуры сайта?
Чтобы ни посетители, ни боты поисковых систем не тратили много времени на поиск на сайте нужной информации, структура должна быть построена по определенным правилам. Следует избегать наиболее частых ошибок, которые возникают при разработке карты сайта и способа навигации по нему.
Требования к главной странице
Главная страница – это лицо сайта и бренда, которому он принадлежит. Очень важно проработать здесь каждую мелочь и сделать так, чтобы посетитель продолжил знакомство с сайтом и информацией на нем. В том, что касается 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. Здесь важно все – даже постановка знаков препинания. Диапазон дат указывается, если на сайте периодически появляются новые данные, материалы. Если же обновлений нет, можно указать только год размещения сайта. Указание копирайта добавит сайту солидности и, если и не отпугнет мошенников, то его наличие может повысить доверие к порталу клиентов и партнеров.
Навигационная цепочка, называемая как «хлебные крошки», помогает пользователю понять на какой странице сайта он расположен.
Рассмотрим несколько признаков, связанных с хлебными крошками:
Виды хлебных крошек
Обычно выделяют 3 разновидности хлебных крошек (рекомендую вам использовать цепочку 1 типа, поскольку остальные могут стать причиной появления дублирующегося контента): 1. Хлебные крошки, основанные на структуре: отображают нахождение посетителя на странице сайтах с учетом логической вложенности разделов.
2. Дублирующая навигация, основанная на перемещении пользователя по сайту: показывает путь, который прошел посетитель до страницы, где он находится в данный момент. Это динамические хлебные крошки, основанные, как правило, на результатах поиска, при этом путь к одной странице может быть совершенно разным: 
3. Хлебные крошки, основанные на атрибутах, указывает атрибуты текущей страницы:
Ключевые слова
Многие вебмастера рассматривают хлебные крошки как удачную возможность впихнуть на страницу анкоры, заточенные под нужные ключевые слова. Получается примерно такая картина:
Основное КС (линк на главную) > Основное КС + слово (линк на категорию) > Основное КС + слово
Например:
Фото (линк на главную) > Фото со знаменитостями (линк на категорию) > Фото с Моникой Белуччи
В некоторых случаях подобная организация выглядит удобно и естественно, однако я обычно придерживаюсь менее SEO-ориентированного подхода по нескольким причинам:
1. Известно, что анкорный текст, насыщенный ключевыми словами, выглядит, мягко говоря, некрасиво: «окна пластиковые купить в Москве срочно»;
2. Нельзя ставить юзабилити после SEO. Людям известно, что такое «Главная» и куда ведет линк с этим названием, поэтому не нужно вместо простого слова нагромождать ключевики, ведь пользователь может запутаться. Придерживайтесь общепринятых стандартов.
Хлебные крошки и сниппеты
Гугл выводит навигационную цепочку в сниппеты на странице результатов поиска, что привлекает внимание к сайтам и повышает доверие пользователей. Фишка нравится не всем, но это дело вкуса:
Поисковая система не всегда вытягивает цепочку из сайта. Алгоритм остается загадкой, однако размещение строки дублирующей навигации как можно выше в исходном коде страницы должно сработать. Я не утверждаю, что это единственный фактор, который учитывают поисковые системы, но во многих проанализированных случаях размещение цепочки в верхней части кода способствует ее распознаванию поисковой системой.
- Используйте навигационную цепочку, только если она реально помогает пользователю, например, в интернет-магазинах. Дублирующая навигация создается, в первую очередь, для удобства посетителей, а польза для SEO-оптимизации является побочным результатом. Не добавляйте на страницу навигационную цепочку только для того, чтобы вставить в нее нужный анкорный текст.
- Не заменяйте хлебными крошками основное меню. Горизонтальная навигационная цепочка лишь частично отображает иерархию сайта, в то время как основное меню содержит все основные категории и страницы;
- Используйте хлебные крошки на всех страницах. Это позволит пользователю увереннее чувствовать себя во время просмотра сайта и быстрее понять его структуру.
