Главная / Блог / Обзоры / «Хлебные крошки» — эффективная навигация на сайте

«Хлебные крошки» — эффективная навигация на сайте

06 марта 13
Reading Time: 1
Комментариев нет
1 Star2 Stars3 Stars4 Stars5 Stars (3 votes)

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

Главная страница -> Рубрика — > Название статьи

Пример кода как сделать хлебные крошки на ImageCMS:
<div xmlns:v=»http://rdf.data-vocabulary.org/#»> <span typeof=»v:Breadcrumb»><a rel=»v:url» property=»v:title» href=»http://www.feko.com.ua/»>Магазин</a></span>&nbsp;&gt;&nbsp;<span typeof=»v:Breadcrumb»><a rel=»v:url» property=»v:title» href=»http://www.feko.com.ua/shop/category/otoplenie»>Интернет-магазин №❶ по ценам</a></span>&nbsp;&gt;&nbsp;<span typeof=»v:Breadcrumb»>Котлы</span></div>

Еще один пример разметки кода с использованием микроформатов:
<div itemscope itemtype=»http://data-vocabulary.org/Breadcrumb»>
 <a href=»http://mysite.com/clothes» itemprop=»url»>
   <span itemprop=»title»>Сорочки</span>
 </a> ›
</div>  
<div itemscope itemtype=»http://data-vocabulary.org/Breadcrumb»>
 <a href=»http://mysite.com/clothes/woman» itemprop=»url»>
   <span itemprop=»title»>Женские сорочки</span>
 </a> ›
</div>  
<div itemscope itemtype=»http://data-vocabulary.org/Breadcrumb»>
 <a href=»http://mysite.com/clothes/woman/yellow» itemprop=»url»>
   <span itemprop=»title»>Желтые </span
 </a>
</div>

Хлебные крошки на сайте помогают посетителю быстро понять, где именно он находится и в любой момент перейти назад, на другой уровень. Такая навигационная цепочка хороша не только положительно влияет на поведение пользователя, но и полезна в плане SEO. Хотя, тщательно проработанной навигационной структуры они однозначно не заменят, но для большинства сайтов хлебные крошки подходят просто идеально. Ну и в качестве дополнительного аргумента можно привести тот факт, что даже Яндекс использует их на своих сервисах.
Если вы обладаете небольшими знаниями CSS – можете красиво оформить навигационные цепочки, органично встроив хлебные крошки на сайте в дизайн. В любом случае, в результате всех тестирований результатом было отличное понимание пользователями предназначения этого элемента навигации. Такая структура ненавязчива и всегда доступна.
Никогда не поздно поинтересоваться как сделать хлебные крошки на сайте, таким образом, улучшив его юзабилити и сделав более удобным для посетителей.

Comments (0)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Более 3000 запущенных проектов

Вместе с нами многие уже развивают свой бизнес! Смотреть все отзывы
Перепробовав много CMS (opencart, Битрикс) и др. Мы увидим, как много в каждой из них недостатков. Где-то или очень сложно или очень дорого кастомизировать. Работая маркетологом, могу заверить, что в ImageCMS большинство нужны "фич" реализовано из коробки, без дополнительных надстроек. Посмотрев демо версию новой версии движка, был приятно удивлен скоростью работы (ооочень важно).
За время сотрудничества компания показала себя в качестве ответственного подрядчика, быстро воплотив в жизнь удобный интернет-магазин с учетом всех наших пожеланий.
Работой доволен. Отвечают всегда быстро и по сути, остаются только приятные впечатления от общения. Пара слов о новом движке: Быстро, красиво и интуитивно понятно. Полностью оправдывает вложенные средства. Рекомендую.
Доволен. Скрипт считаю перспективным. Считаю, что ваш коллектив работает на опережение: ваше предложение было оптимальным по цене/качеству.
Опертивная и четкая работа, своевременое предоставление дополнительных консультаций по работе с административной частью. Созданным магазином довольна. Рекомендую этот движок!
Заказать услугу
Персональная информация:

прикрепить файл

Создайте свой личный демо-магазин ImageCMS