Игры с выводом денег
Регистрация
Обзор
Видео
Регистрация
Обзор
Видео
Регистрация
Обзор
Видео
Регистрация
Обзор
Видео
Регистрация
Обзор
Видео
Регистрация
Обзор
Видео
Бинарные опционы
Введение
Webmoney
Wmmail
Полезные статьи
Всё о социальных сетях
Создание сайта
Счетчики
               

Система хлебных крошек
2.01.2013

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

Данных способов существует много, начиная от учета ключевых слов, заканчивая внутренней перелинковкой, которая может быть выполнена в различном структурировании или отражать некоторую систему.

Одной из таких систем является система хлебных крошек, которую используют большинство веб мастеров.

Система хлебных крошек

 Правильная навигация сайта

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

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

Суть этой системы довольно проста, на каждой странице вам потребуется отражать путь пользователя в виде: Главная-раздел-категория-страница.

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

Правильная навигация сайта


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

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

Каждому веб мастеру предоставляется бесплатное использование такого функционала и это займет минимум времени при максимуме эффективности.

Как поставить хлебные крошки WordPress?

Лучше добавить новый элемент интерфейса без плагинов, чтобы не было лишней нагрузки. Сделать это не так сложно, потребуется добавить специальный код в файл functions.php:

function my_breadcrumb() {
echo '<div class="breadcrumb"><a href="/"><span>Pro-wordpress</span></a>&nbsp;»&nbsp;</div>
<div class="breadcrumb">';
$categories = get_the_category();
if($categories[0]){
echo '<a href="' . get_category_link($categories[0]->term_id ) . '">
<span>'. $categories[0]->name . '</span></a>&nbsp;»&nbsp;';
}
echo '</div>
<div class="breadcrumb">
<span>';
echo the_title();
echo '</span></div>';
}

Вы можете менять названия разделов и страниц, к примеру, переименовать главную страницу. Чтобы хлебные крошки отображались, нужно ещё добавить код на страницу или добавить их в файл header.php:

<div class="breadcrumbs">
<?php
my_breadcrumb();
?>
</div>

Выполнив эти действия, на сайте уже должна появиться строчка с дополнительной навигацией. Выглядеть она будет совсем по-простому, рекомендую ещё и в файл styles.css добавить небольшой кусок кода:

.breadcrumbs{
margin: -5px 0 5px 3px; /* отступы */
overflow: hidden;
}
.breadcrumbs a {
color: #34a6d2; /* цвет ссылок - голубой */
text-decoration: underline;
}
.breadcrumb > span {
color: #000; /* цвет конечного пункта - черный */
}
.breadcrumb{
float:left;
}

В итоге у вас должна получиться строчка, где последний адрес отображается черным цветом, а предыдущие разделы голубым:

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

Плагин хлебные крошки для WordPress

Есть один интересный плагин WordPress SEO by Yoast, в котором много разных функций, в том числе добавляются хлебные крошки. Но если вам не нужен лишний функционал, то проще использовать BreadCrumb XT.

Настроек в нем достаточно, можно выбрать максимальную длину заголовков, вид пути и многое другое. Выглядит результат так:

После установки расширения, необходимо добавить небольшой код в файле header.php или single.php (в зависимости от того, где вы хотите видеть навигацию):

<div class="breadcrumb">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>

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

Микроразметка хлебных крошек

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

Если устанавливаете хлебные крошки вручную (по инструкции выше), то поисковики должны их определить автоматически. С плагином я не проверял, работает ли это. А вообще, лучше использовать для этого специальный код:

<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/" rel="v:url" property="v:title">Главная</a> ›
</span>
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/football/" rel="v:url" property="v:title">Футбол</a> ›
</span>
<span typeof="v:Breadcrumb">
<a href="http://www.example.com/football/zenit/" rel="v:url" property="v:title">Зенит</a> ›
</span>
</div>

Больше узнать о хлебных крошках в сниппетах Google можно на этой странице. А у Яндекса вообще есть отдельный инструмент, чтобы сразу проверить, правильно ли сделана микроразметка хлебных крошек webmaster.yandex.ru/microtest.xml.

Если решили улучшить свой проект, подумайте над оптимизацией сайта под мобильный трафик.

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

Советую посетить следующие страницы:
- За что можно попасть под АГС
- Для чего сайту нужен траст
- Удаленная работа в сети

Рубрика: Создание сайта
Бинарные опционы
Регистрация
Обзор
Видео
Регистрация
Обзор
Видео
Регистрация
Обзор
Видео
Способы заработка
Рубрики
Заработай с нами