«Хлебные крошки» — эффективная навигация на сайте
Одна из целей, которая стоит перед специалистом, занимающимся созданием сайта и его оптимизацией под поисковые системы – сделать его дружественным не только для пользователей, но и для поисковиков. Прежде всего, это касается структуры и навигации.
«Хлебные крошки» — такое название получил интересный вид навигации, который наглядно показывает иерархию сайта, отображая путь от главной и до конечной страницы. Если вы знаете зачем нужен сайт именно вам, то, соответственно, должны продумать все его ньюансы, и структуру — прежде всего.
Обычно они имеют вид горизонтальной строки такого вида:
Главная страница -> Рубрика — > Название статьи
Пример кода как сделать хлебные крошки на 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> > <span typeof=»v:Breadcrumb»><a rel=»v:url» property=»v:title» href=»http://www.feko.com.ua/shop/category/otoplenie»>Интернет-магазин №❶ по ценам</a></span> > <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 – можете красиво оформить навигационные цепочки, органично встроив хлебные крошки на сайте в дизайн. В любом случае, в результате всех тестирований результатом было отличное понимание пользователями предназначения этого элемента навигации. Такая структура ненавязчива и всегда доступна.
Никогда не поздно поинтересоваться как сделать хлебные крошки на сайте, таким образом, улучшив его юзабилити и сделав более удобным для посетителей.
- Бесплатный вебинар «Как экономить до 95% бюджета на ссылках?» «
- 10 бизнес-идей для создания Интернет-магазина »