Логотип imagecms

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

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

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

Пример кода как сделать хлебные крошки на 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 – можете красиво оформить навигационные цепочки, органично встроив хлебные крошки на сайте в дизайн. В любом случае, в результате всех тестирований результатом было отличное понимание пользователями предназначения этого элемента навигации. Такая структура ненавязчива и всегда доступна.
Никогда не поздно поинтересоваться как сделать хлебные крошки на сайте, таким образом, улучшив его юзабилити и сделав более удобным для посетителей.

Читайте также:
06 Март‎а 2013 38053 0
Подпишитесь на еженедельную рассылку и получайте скидки на популярные e-commerce продукты
И совсем скоро Вы станете гуру в e-commerce, веб-разработке, SEO и в интернет-маркетинге! Развивайте свой бизнес с актуальной информацией, успешными кейсами и вдохновляющими примерами.
(Комментарии: 0)
Вы должны , чтоб присоединиться к разговору
Давайте дружить!

Узнавайте все новости, получайте обзоры, кейсы
и другие полезные материалы по e-commerce через социальные сети!

Консультация по ImageCMS Shop
 
Уже уходите? Еще секундочку!

Зарегистрируйтесь, и вам навсегда обеспечены скидки на популярные
e-commerce продукты! Также мы будем делиться с вами самой ценной
информацией для развития вашего бизнеса.

или