Навигация по типу «хлебные крошки»

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

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

Основным элементом навигации по сайту выступает меню, которое является указателем направления. Хлебные крошки (англ. термин – «Breadcrumbs») дополняют его функционал и выступают своего рода метками, фиксирующими этапы движения по заданному маршруту. Они позволяют видеть исходную точку – главную страницу сайта и пройденный путь от нее до текущей страницы. Технически навигационная цепочка представлена рядом текстовых ссылок и размещается в верхней части страницы, под «шапкой». (Рис. 1).

Рис. 1 Пример «хлебных крошек» на сайте интернет-магазина

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

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

Цель использования

1. Удобство для пользователей

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

Рис. 2 Пример интернет-магазина без бокового меню каталога товаров

Например, если пользователь попадет на страницу товара (Рис. 2) из поисковой выдачи и решит посмотреть другие предметы мебели из той же серии, то без навигационной цепочки поставленная задача будет сложно выполнимой (в карточке товара отсутствуют какие-либо указания на название серии и коллекции). Чтобы найти интересующий контент, покупателю придется изучить весь ассортимент. За счет «хлебных крошек» время на поиски значительно сократится и при этом снизится показатель отказов.

2. Польза для SEO

«Хлебные крошки» дают положительный эффект для поискового продвижения сайта, участвуя в перелинковке страниц. Может возникнуть вполне логичный вопрос относительно дублирующих ссылок в основном меню и в строке навигации. Ведь, как известно, поисковики не жалуют дублирование, в данном случае – ссылок и анкоров, которые ведут на одну страницу. Как быть в такой ситуации? Мнения насчет дублирования и сокрытия анкоров сквозных ссылок меню разделяются у разных SEO-специалистов: кто-то говорит о закрытии ссылок меню в <noindex> (для неучета анкоров Яндексом), а кто-то говорит, что делать этого не стоит. Поисковые роботы хорошо умеют отличать навигацию как элемент юзабилити сайта и применяют к таким ссылкам другие правила относительно обычных внутренних ссылок. К сожалению, бывают ситуации с запутанной структурой сайта, где поисковый робот ошибается в определении навигации. В этом случае стоит исключить лишние анкоры, заключив меню в <noindex>. Но это лишь частная практика и делать это для всех сайтов не рекомендуется.

Второе полезное свойство «хлебных крошек» для SEO – помощь в оптимизации сниппетов. Поисковая система (на данный момент только Google!) использует их для отображения навигационной цепочки, что делает сниппет более привлекательным и дает пользователю представление о структуре сайта (Рис. 3).

Рис. 3 Пример сниппета с использованием микроразметки в «хлебных крошках»

Чтобы добиться этого, необходимо использовать микроразметку (любые из доступных форматов). Примеры реализации кода представлены в соответствующей справке Google для вебмастеров. Если «хлебные крошки» не оптимизированы данным образом, то цепочка навигации в сниппете выглядит неинформативно (используются URL страниц) (Рис.4).

Рис. 4 Пример сниппета без использования микроразметки в «хлебных крошках»

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

Оформление «хлебных крошек»

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

• навигационная строка содержит ссылки, которые зрительно рекомендуется отделить от текста; достигается это стандартными приемами верстки – путем подчеркивания и/или выделения синим цветом (см. Рис. 5);

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

Рис. 5 Пример оформления «хлебных крошек»

• навигационную строку необходимо разместить на всех страницах сайта, кроме главной;

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

• для разграничения гиперссылок в цепочке навигации используются специальные знаки: тире, символ «больше чем» (>), закрывающие кавычки (»), реже – символ слеша (/);

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

Рис. 6 Дизайн «хлебных крошек» на сайте интернет-гипермаркета Walmart

27-28 мая 2015 в Известия Холл пройдет одно из самых долгожданных и масштабных мероприятий по маркетингу - Moscow Marketing Show.

Самые ожидаемые гости: шведский специалист по брендингу Томас Гэд (автор слогана Nokia: «Connecting people»), специалист по кризисному маркетингу Гарретт Джонстон, а также легендарный автор «Маркетинговых войн» Джек Траут!

Не стоит откладывать на завтра то, что можно сделать вчера;) Переходите на сайт и регистрируйтесь прямо сейчас по специальным условиям — marketingshow.ru

Семинар «Базовый курс SEO»
9 апреля, ведущий: Александр Митник

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

Семинар «Продвинутый курс SEO»
10 апреля, ведущий: Александр Митник

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

Вебинар «SEO для сайтов тематики "Недвижимость: продажа и аренда"»
15 апреля, ведущий: Евгений Костин

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

Семинар «Продвижение мобильных приложений»
17 апреля, ведущий: Егор Карпов

Данный семинар будет интересен специалистам по интернет-маркетингу, разработчикам и владельцам мобильных приложений, а также всем тем, чья работа так или иначе связана с Apple AppStore и Google Play Market. На семинаре вы узнаете о методах и инструментах продвижения приложений и получите дельные практические советы.

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

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

Google предлагает увеличить количество загрузок приложений
Информацию о доступном для скачивания приложении Google добавляет к рекламным объявлениям контекстно-медийной сети AdWords. Тесты показали, что добавление такой информации на 28% повышает количество скачиваний приложений рекламодателя. Новая функция удобна не только клиентам AdWords, но и пользователям поисковика, так как ряд сайтов удобнее просматривать через приложения.

«ФотоГазон»: новое пастбище фрилансеров
В студию программы «Бизнес Online» мы пригласили сооснователя и генерального директора онлайн-биржи FL.ru Антона Мажирина. Антон рассказал нам о своем новом проекте «ФотоГазон», который ориентирован на фрилансеров, занятых в области фото- и видеосъемок. Разговор в студии, в частности, шел о том, какие сложности возникли при работе с данным направлением фриланса и как удалось все организовать должным образом.

Электронные деньги: чем мы заплатим?
Последнее время правительство РФ обращает все большее внимание на сферу электронных пл�