Хлебные крошки на сайт

Хлебные крошки

Хлебные крошки на сайте что это

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

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

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

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

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

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

Этот элемент навигации имеет две важные функции, которые рассмотрены ниже.

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

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

Чтобы сделать "хлебные крошки" в блоге на Blogger, нужно пройти три этапа. А поскольку правится шаблон блога, то обязательно сделайте его резервную копию.

1. С помощью клавиш "Ctrl+F" находим в шаблоне следующий код:

]]></b:skin>

Выше него вставляем код:

.breadcrumbs {
padding:5px 10px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:1px solid #e6e4e3;
}
.breadcrumbs a {
text-decoration:underline;
}


2. Затем ищем такой код. Учтите, их в шаблоне два и оба заменяем.

<b:include data='top' name='status-message'/>

Заменяем их на следующий:

<b:include data='posts' name='breadcrumb'/>
<b:include data='top' name='status-message'/>


3. Далее, чтобы  добавить "хлебные крошки", снова находим код:

<b:includable id='main' var='top'>

Заменяем на этот:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Слово "Home", выделенное красным цветом - это название "Главной страницы". Можно заменить его на выбранное вами.

Если вами пройдены все три этапа, то сделать "хлебные крошки" в блоге вам удалось. Проверьте.