Сегодня я расскажу о плагине для WordPress под народным названием "Хлебные крошки", официальное название Breadcrumb NavXT. Это пожалуй самый востребованный и популярный плагин среди веб мастеров. Его популярность связана с двумя причинами.
Первая причина популярности плагина "Хлебные крошки"
Это удобство для навигации по . После установки и настройке плагина Breadcrumb NavXT в верхней части страницы появляется удобное меню навигации которое поэтапно показывает пользователю не только название страницы на которой он находится но и последовательно все страницы сайта на которых он побывал ранее. Что безусловно очень удобно, особенно при изучении большого количества материала и просмотра нескольких страниц.
Вторая причина востребованности этого плагина
Дополнительная перелинковка страниц, и как следствие + в ранжировании поисковиков. (Собственно, прозвище "Хлебные крошки" произошло от сказки братьев Гримм под названием Гензель и Гретель по сюжете которой дети чтобы не заблудится в лесу бросали хлебные крошки… Но это так, лирическое отступление.) Вернёмся всё же к нашему плагину.
Скачиваем и устанавливаем плагин Breadcrumb NavXT.
Скачать плагин Breadcrumb NavXT лучше всего, найдя его через свою панель управления введя в строке поиска "Breadcrumb NavXT "
Установка обычная ничем не отличается от установки остальных плагинов. А вот с настройками придётся повозиться.
Переходим по вкладке "Параметры"…
… и попадаем в панель настроек плагина Breadcrumb NavXT. В данном случае нас интересует только вкладка"Основные" , все остальные вкладки настроек: "Записи и страницы", "Таксономии", "Другое" , можно оставить пока без изменений. Возможно вам когда то придётся к ним вернуться чтобы более продвинуто настроить Хлебные крошки, но а пока оставляем всё как есть. Ну а настройки вкладки "Основные" изменяем как показано на картинке ниже:
Сохраняем изменения настроек, и на этом здесь все.
Теперь приступаем к самому интересному.
Необходимо отредактировать шаблон вашей темы.
К сожалению без этого никак нельзя. Плагин Breadcrumb NavXT, "просто так" работать не будет.
Переходим в консоль и выбираем «Внешний вид»→«Редактор»:
В результате переходим в раздел редактирования тем. В этом разделе для редактирования необходимо выбрать именно ту тему которую вы сейчас используете. Как правило многие администраторы сайтов устанавливают несколько шаблонов сайтов но используется всего один. Поэтому редактировать следует тот который используется.
Редактировать необходимо такие шаблоны: single.php, index.php и page.php (если есть специально созданная страница, например, category.php, то и этот тоже)
Выглядит это так:
Сначала выбираем необходимый шаблон. (На данном примере показаны шаблоны имеющиеся в моей теме, у вас их может быть больше или меньше. Редактировать необходимо все что имеются согласно списка: single.php, index.php и page.php, category.php Если какой то из перечисленных шаблонов в вашем списке не отображён, значит просто пропускаем.)
Затем берём код:
И вставляем его в каждом из перечисленных шаблонов примерно в одно и тоже место, после заголовка (header ):
Естественно сохраняем каждый изменённый файл. После чего плагин Breadcrumb NavXT начнёт работать.
Ну вот и всё, почти… Почти, потому что как правило этих настроек вполне достаточно.
Но бывают случаи когда дизайн вашей темы сайта не совпадает с дизайном отображаемой строки Хлебных крошек.
В этом случае придётся подгонять Хлебные крошки под дизайн сайта отдельно.
Делается это так. Берём этот код:
.breadcrumb {
font:bolder 12px "Trebuchet MS", Verdana, Arial;
padding-bottom: 10px;
}
.breadcrumb a{
color: #1B7499;
} .breadcrumb a:hover {
color: #EF0E0E;
}
Изменяем в нём параметры отображения размера текста, шрифта и цвета на необходимые. Затем копируем изменённый код, идём по вкладке "Таблица стилей" вашей темы
… и вставляем код в самом низу редактора
… сохраняемся, нажав "Обновить файл" Конечно, для получения удовлетворительного результата придётся немного поэкспериментировать.
Ну вот, теперь пожалуй всё.
Так называемые «Хлебные крошки» служат для улучшения навигации по сайту и помогают посетителю сайта разобраться, где он сейчас находиться. Посетитель, находящийся на любой странице сайта, с помощью хлебных крошек понимает свое местонахождение в структуре блога.
Хлебные крошки являются еще одним элементом внутренней перелинковки сайта. Упрощается навигация по сайту, что удобно посетителю сайта, и в связи с этим повышаются поведенческие факторы.
Сам термин «Хлебные крошки» взят из сказки братьев Гримм «Гензель и Гретель», в которой детей заводили в лес. В первый раз, когда отец по воле злой мачехи заводит брата и сестру в лес, они находят дорогу обратно, благодаря тому, что оставляли по своему пути камешки. Во второй раз у детей камешков не оказалось, и они оставляли на своем пути вместо камешков хлебные крошки, которые склевали лесные птицы и дети заблудились в лесу. После различных приключений детям все-таки удалось вернуться домой.
Обычно навигация Хлебные крошки (по-английски Breadcrumbs) представляет из себя полосу в верхней части страницы, которая имеет примерно такой вид:
Все разделы сайта, кроме последнего являются ссылками. Последний раздел навигации является именно той страницей, на которой вы сейчас находитесь. На эту страницу гиперссылку делать не нужно.
Этот последний элемент может быть не обязательно отдельной страницей, а например названием рубрики, если вы вошли в какую-нибудь рубрику. В этом случае название рубрики уже не будет гиперссылкой.
Хлебные крошки на сайт можно установить с помощью плагина, а также без использования для этого специального плагина. Вначале рассмотрим установку хлебных крошек с помощью плагина Breadcrumb NavXT.
Плагин Breadcrumb NavXT
Для установки плагина Breadcrumb NavXT нужно войти в «Админ-панель WordPress» => «Плагины» => «Добавить новый». В поле «Поиск» нужно ввести выражение «Breadcrumb NavXT», а после этого нужно нажать на кнопку «Поиск плагинов».
В окне «Установить плагин» под названием плагина «Breadcrumb NavXT» следует нажать на ссылку «Установить».
В открывшемся окне «Установка плагина: Breadcrumb NavXT» необходимо нажать на ссылку «Активировать плагин». После этого в боковой панели «Админ-панели WordPress» появился новый пункт «Breadcrumb NavXT». Если нажать на этот пункт, то тогда можно будет войти в настройки плагина хлебных крошек.
В окне «Настройки Breadcrumb NavXT» расположено довольно много настроек этого плагина. Настройки Breadcrumb NavXT можно оставить сделанными по умолчанию. Во вкладке «Основные» можно, если вы хотите, изменить пункт «Ссылка на главную».
Теперь нужно вставить в файлы вашей темы, в те места, где должны будут отображаться хлебные крошки, следующий код:
Этот код желательно вставить в такие файлы вашей темы: «Одна запись (single.php)», «Шаблон страницы (page.php)», «Архивы (arhvie.php)», «Результаты поиска (search.php)».
Для того, чтобы вставить этот код нужно войти в «Админ-панель WordPress» => «Внешний вид» => «Редактор» => «Шаблоны».
В шаблон «Одна запись (single.php)», который отвечает за страницы со статьями, код вставляется так, как показано на этом изображении.
После вставки кода, нажимаете на кнопку «Обновить файл».
Код вставлен, затем нужно нажать на кнопку «Обновить файл».
В файл «Архивы (arhvie.php)», который отвечает за рубрики, также нужно будет вставить этот код.
После того, как код вставлен, нажимаете на кнопку «Обновить файл».
И в завершении установки кода в файлы темы WordPress, код вставляется в файл «Результаты поиска (search.php)», который отвечает за поиск по сайту. Вставляете код в то место, как это показано на изображении.
На этом изображении видно как выглядит навигация хлебные крошки. Имя главной страницы не было изменено на название сайта.
Можно также вставить в файл «Таблица стилей (style.ccs)» такой код (это делать необязательно):
Breadcrumb { font:bolder 12px "Trebuchet MS", Verdana, Arial; padding-bottom: 10px; } .breadcrumb a{ color: #1B7499; } .breadcrumb a:hover { color: #EF0E0E; }
В этом коде можно менять размер и шрифт (font:bolder 12px «Trebuchet MS», Verdana, Arial), отступы (padding-bottom: 10px), а также цвет ссылок хлебных крошек в статическом состоянии и при наведении на них курсора мыши (можно менять цифровые значения).
Показания в этом коде можно менять по своему усмотрению, или найти другой подобный код в Интернете. Также можно вообще обойтись и без установки этого кода в файл «Таблица стилей (style.ccs)». В установленной у меня теме, после установки кода, немного изменился шрифт.
В этой статье было рассмотрена установка хлебных крошек на сайт с помощью плагина Breadcrumb NavXT. В следующей статье будет рассмотрен такой вопрос - как установить без использования плагина.
Выводы статьи
При помощи плагина Breadcrumb NavXT на сайт устанавливается навигация, так называемые «хлебные крошки», которая помогает пользователю понять в каком разделе сайта он находится в данный момент времени.
Добрый день читатели блога о заработке в интернете сайт Продолжаем крутить, вертеть и развивать блог с помощью самых необходимых плагинов на WordPress. Я не стал скакать с одной темы на другую, стараюсь расписывать все уроки по порядку, в определенной последовательности, для лучшего восприятия потенциальными вебмастерами и манимейкерами.
Поэтому хочу до конца рассмотреть тему оптимизации в начале карьеры вебмастера. Сегодня как вы поняли мы продолжим разговор о внутренней перелинковке сайта. Более подробно об оптимизации сайта, как внешней так и внутренней, а так же о внутренней перелинковке вы можете ознакомится во вчерашнем уроке.
Я стараюсь писать новые посты каждый день, для той же самой оптимизации. По моему мнению ежедневные посты, особенно на начальном этапе будут благоприятно сказываться на продвижении и развитии сайта , особенно если вы будете писать достаточно качественные оптимизированные статьи.
Давайте немного отметим основные моменты seo оптимизации блога или сайта, если вы уже ознакомлены со вчерашним уроком, то можете пропустить этот абзац. Ключевыми моментами во внутренней оптимизации сайта будут являться:
- Постановка ссылок с текста всей статьи, постановка именно тематических ссылок;
- Постановка ссылок в конце статьи, желательно так же тематических;
- Постановка ссылок вверху или шапке сайта, а также в сайдбаре, в котором нам необходимо ссылаться на сами статьи или категории.
Внутренняя перелинковка сайта, оптимизация контента
Внутренняя перелинковка хорошо подходит для низкочастотного продвижения, хоть мы и получаем при этом с каждого запроса маленький трафик, но этих самых ключей получается очень много, и бывает, что низкочастотное продвижение порой обходит высокочастотные запросы. А уж если взять цену подхода...
При продвижении НЧ запроса можно обойтись всего лишь вашими способностями, бюджета не надо, достаточно произвести грамотную оптимизацию контента . А вот при ВЧ бюджеты могут достигать огромных финансовых затрат, помимо которых все равно будет необходима внутренняя перелинковка сайта.
Следует обратить внимание, если вы ссылаетесь с одинаковыми анкорами на статью, то поисковая система может слить такие ссылки, и слить не в физическом смысле, а в плане передачи статического веса, поэтому многие оптимизаторы стараются для продвижения своих ресурсов использовать различные анкоры, дабы больше веса получить на свои страницы, именно анкорного веса.
Если кто не знает, то рекомендую прочитать . Кстати, никто не скажет алгоритм работы поисковых систем, поэтому возможно проставление без анкорных, а также не тематических анкоров, таких как посмотреть тут
, в тексте статей.
Думаю также положительным моментом в , будет являться проставление ссылок от одной статьи к другой, и от последней на первую, придется конечно делать это ручным способом, но вы сможете замкнуть круг, я так делаю и считаю это неплохим подспорьем во внутренней перелинковке сайта.
Одно неудобство так это ручной метод, когда то давно был у меня плагин который делал это автоматически, сейчас что то лень его найти и поставить, поэтому пока некоторые элементы внутренней перелинковки делаю вручную. (пока не забыл если кому интересно прочитать про для людей и для роботов, прошу. Поэтому чтобы особо себя не мучать будем совмещать, как ручные так и автоматические способы внутренней перелинковки сайта.
Дополнение. После получение определенного опыта в сфере создания сайта, хочу сказать, что ручная перелинковка, эффективнее и лучше любой автоматической, так как:
- Мы сами контролируем весь процесс.
- Самостоятельно выбираем анкоры, причем нужные нам.
- Можем сделать ее любой, на свое усмотрение.
Правда есть и минус, мы потратим очень много своего времени.
Одним из очень оригинальных, простых по своей задумке и достаточно эффективных во внутренней перелинковке плагинов, является плагин Breadcrumb NavXT, который в переводе с английского означает хлебные крошки.
Сегодня задумался почему у него такое странное название, погуглил маленько эту тему и оказалось, что есть рассказ хлебные крошки, вернее есть немецкая сказка "Гензель и Гретта" , в которой родители хотели увести детей в лес и там оставить, ну а сын Гензель услышав разговор родителей припас себе кусочек хлеба, с помощью которого они смогли с сестрой выбраться из леса, оставляя за собой хлебные крошки.
Этот рассказ хорошо показывает работу хлебных крошек - цепочка ссылок друг за другом, но причем тут интернет тематика и такая сказка про хлебные крошки я че то не понял.
Кстати имейте ввиду что использование правильной внутренней перелинковки, использование таких сео плагинов как хлебные крошки, помогут значительно повысить вам Page Rank, один из показателей качества сайта, который присваивает поисковая система Google.
Да к тому же этот PR, будет не только у главной страницы сайта, но и добавится на различные страницы, конечно же если вы будете использовать внутреннюю перелинковку и те вещи, которые я говорю. А повышение PR приведет к тому, что если вы будете зарабатывать деньги с помощью продаж ссылок, то вы увеличите свой доход, причем прилично.
Так что есть смысл использовать внутреннюю перелинковку, ведь у любого человека помимо цели сделать жизнь людей лучше, есть и корыстная в какой-то степени цель - заработать денег. Я сделал специально этот блог, чтобы каждый смог видеть что может добиться любой новичок следуя поэтапно за каждым уроком.
Установка Breadcrumb NavXT на WordPress
Разместить хлебные крошки плагина Breadcrumb NavXT можно практически в любом месте, старайтесь чтобы они размещались для удобства пользователей, все таки размещение их в футере будет как-то неуместно. У меня на сайте вы можете видеть их в верхней части шапки, это заложено самой темой, спасибо разработчикам.
Там расположено меню хлебных крошек, которое обычно имеет вид Главная > страница . Некоторые сайты располагают меню хлебных крошек в файле Single.php, который отвечает за вывод статьи, у меня вы можете видеть там же пример хлебных крошек .
Совет! Если вы хотите продвигаться без рубрик и главной странице, только по статьям, следует не использовать хлебных крошек, так как они разбавляют ссылочный вес.
Так же по желанию есть возможность добавить код вызова в файлы Arhive.php, Page и Search. Устанавливаем плагин Breadcrumb NavXT хлебные крошки, делаем мы это уже не первый раз и думаю большинство уже запомнило этот процесс. Активируем плагин Breadcrumb NavXT. Код вызова данного плагина такой:
а вставить его необходимо в приведенные файлы под приблизительно такую строку
Ниже на рисунке вы можете увидеть куда вставлен Html код хлебных крошек
Настройка плагина Breadcrumb NavXT
У плагина Breadcrumb NavXT достаточно много настроек, давайте попробуем по порядку разобраться с каждой из них
В главе разделитель обозначен мнемокод который будет выводится между ссылками хлебных крошек в данном случае он будет меть такой вид "ссылка > ссылка ". Если вы вставите этот код · то вид между ссылочном пространством будет иметь такой вид "ссылка ссылка ".
Поле максимальная длина заголовка вашей ссылки, можно ограничить каким нибудь числом, для большей уникализации ссылки. Если поставить галочку в поле Ссылка на главную то вы сможете указать название главной ссылки. Изначально она идет с именем Home, если я не ошибаюсь. Основные настройки хлебных крошек на данном этапе закончены.
Переходим к настройке текущая позиция, там настроек немного и нам необходимо поставить галочку для отображения текущей позиции в виде ссылки. Остальные настройки оставляем в не измененном виде, можете конечно поэкспериментировать. Единственное что хочу сказать, так это то, что Шаблон ссылки на запись поможет нам составить анкор для рубрик, архивов или главной страницы плагина Breadcrumb NavXT хлебные крошки в соответствующих разделах.
Заканчиваю сегодняшний урок о хлебных крошках посредством плагина Breadcrumb NavXT. Если у вас возникли вопросы по тематике, задавайте их пожалуйста в комментариях.
Следующий урок: .
Предыдущий урок.
Термином «хлебные крошки» называется иерархическая система навигации меню, представленная в форме цепочки ссылок. Она позволяет посетителям понять, в каком разделе блога они находятся. На Wordpress «хлебные крошки» часто используются в качестве вспомогательной навигации, с помощью которой пользователи перемещаются по страницам сайта. В этой статье рассказывается о том, как вывести ссылки в блоге посредством плагинов.
Функции
Перед тем как добавить в Wordpress «хлебные крошки», нужно понять, для чего это делается. С помощью вспомогательного меню можно указать посетителю, где находится заметка или товар, которые он рассматривает в данный момент. При необходимости пользователь мгновенно возвращается в нужную категорию, не прибегая к поиску более сложных элементов навигации. Таким способом можно повысить удобство использования сайта.
«Хлебные крошки» страниц Wordpress позволяют создать правильную перелинковку. Это мероприятие является одним из самых высокоэффективных способов продвижения блога. С помощью «хлебных крошек» можно распределять ссылочный вес между главной страницей, категориями и статьями.
Поисковая система Google уже начала отображать вспомогательную навигацию под названиями сайтов в результатах выдачи. Это предоставляет веб-ресурсу возможность переместиться на верхние позиции. Подробное описание процесса дано в официальной справке компании Google. Не все так легко, как кажется. Поисковая система не всегда может понять, нужно ли отображать «хлебные крошки» Wordpress в выдаче.
Стоит ли добавлять вспомогательную навигацию на сайт
Если пользователю удается разбить тему блога на 3-4 рубрики, то устанавливать блок со ссылками необязательно. Структура веб-ресурса останется простой и понятной. В этом случае не рекомендуется использовать «хлебные крошки» Wordpress. Вспомогательную навигацию нужно добавлять, только если сайт имеет сложную структуру.
«Хлебные крошки» в Wordpress выводятся на страницы блога с помощью плагинов. Существует множество расширений, позволяющих устанавливать дополнительный блок со ссылками на сайте. В этом обзоре будут рассмотрены только некоторые из них.
Breadcrumb NavXT
Этот программный продукт является самым популярным и мощным плагином, позволяющим создавать в Wordpress «хлебные крошки». С его помощью можно генерировать вспомогательное меню, которое будет широко настраиваемым. Плагин подойдет как новичкам, так и специалистам в сфере Wordpress. Он обладает большим количеством функций. Пользователь может задавать уникальные классы и идентификаторы для продвинутой стилизации вспомогательного меню.
Плагин имеет поддержку нескольких языков. К недостаткам следует отнести отсутствие встроенных тем оформления. Этот недочет можно исправить путем использования стилей, предлагаемых в сообществах. Последние версии программного продукта на русском языке. Авторы проекта предлагают работать с большим количеством тонких настроек.
При необходимости можно включить функцию генерирования кода в соответствии с принятым Google стандартом RDFa. Подобная разметка панели вспомогательного меню не будет гарантией того, что система применит «хлебные крошки» при создании поискового сниппета, однако шансы на это существенно возрастут. Ссылки отображаются только в виджете. Добавить вспомогательное меню в начало страницы не удастся. Стоит учитывать, что «хлебные крошки» не поддерживаются поисковой системой «Яндекс».
Yoast Wordpress SEO
Создание вспомогательного меню - это одна из функций данного программного продукта. Большое количество инструментов позволяет выполнять расширенную SEO-оптимизацию. Этот плагин используют люди, настроенные на качественное продвижение блога. Редактирование блока со ссылками у некоторых владельцев сайтов может вызвать затруднения. Чтобы выполнить эту задачу, нужно открыть административную панель Wordpress, перейти в раздел «SEO» и выбрать строку «дополнительно».
Будет загружена страница с дополнительными настройками плагина. Здесь необходимо перейти на вкладку «навигационная цепочка». Пункт «включить» следует отметить галочкой. Для появления вспомогательного меню на сайте требуется добавить в код блога PHP-функцию, отвечающую за вывод. В поле «разделитель» можно ввести любой символ, который поддерживается HTML5.
В качестве текста ссылки на основную страницу сайта следует указать домен или просто слово «Главная». В поле «основной префикс» нужно вписать несколько букв или символов. Они будут отображаться перед всеми ссылками вспомогательного меню. Таким же образом заполняются поля префиксов навигационных цепочек для архивов и страниц с результатами поисковой выдачи. В подразделе «таксономия» необходимо выбрать пункт «рубрики», «метки» или «форматы».
Breadcrumb Trail
С помощью плагина от Джастина Тэдлока можно быстро создавать в Wordpress «хлебные крошки». Начинавшееся с небольшого скрипта, это программное обеспечение переросло в продвинутую систему.
Плагин позволяет выводить вспомогательное меню для любой структуры. Он автоматически выполняет поиск постоянных ссылок для блога. Основываясь на полученной структуре, плагин выводит на сайт «хлебные крошки». Ссылки добавляются на каждую страницу. Плагин автоматически обнаруживает таксономии, типы заметок и т.п.
Yummi «хлебные крошки»
Этот программный продукт можно установить прямо из панели администратора в Wordpress. Для этого следует перейти на страницу «плагины». Затем нужно кликнуть по кнопке «добавить новый», ввести название в строку поиска, нажать Enter и установить ПО. После активации необходимо настроить плагин. С этой задачей справится даже начинающий пользователь.
Сначала нужно указать тип установки блока со ссылками. Чтобы «хлебные крошки» Wordpress плагин вывел автоматически, следует выбрать соответствующий пункт. Если пользователь укажет тип «ручная установка», то он должен будет вставить код на сайт самостоятельно. Затем требуется выбрать внешний вид блока со ссылками. Далее следует указать, на каких страницах будут отображаться «хлебные крошки».
При желании можно включить показ всплывающих подсказок и ссылки Home. Пользователю также следует выбрать стиль шрифта для «хлебных крошек» и основных категорий. Здесь же находится опция включения атрибута title для ссылок. Чтобы удалить со страниц сайта информацию об авторе плагина, необходимо указать пункт «спрятать» рядом с графой «ваша благодарность» и сохранить результат. Можно заметить, что настройки плагина достаточно просты и понятны.
Really Simple Breadcrumb
Этот программный продукт - еще одно простое решение для Wordpress. Плагин работает корректно и без ошибок, отображается согласно коду используемой темы. Установить программное обеспечение можно через панель администратора. Для того чтобы «хлебные крошки» отображались на статических страницах, необходимо прописать над строкой вывода заголовка соответствующий код. Если пользователю нужно изменить тип разделителя, то он может редактировать 17 строчку файла breadcrumb.php.
В этом варианте добавления вспомогательного меню отсутствует микроразметка. С нею «хлебные крошки» будут отображаться в сниппете поисковой выдачи Google вместо URL. Это повысит кликабельность. Поэтому пользователю необходимо добавить микроразметку или использовать другой вариант.
DP RDFa Breadcrumb Generator
Плагин был создан для поисковой оптимизации сайта. Как и в случае с Yoast Wordpress SEO, «хлебные крошки» отображаются в сниппете выдачи автоматически.
После установки программного обеспечения нужно открыть панель администратора и перейти в настройки. Затем следует выбрать плагин. В появившемся окне создатель рекламирует свой продукт. Далее идет код для копирования. Его необходимо вставить там, где нужно отобразить цепочку навигации.
Всем привет!
Еще одним способом улучшения внутренней перелинковки и юзабилити сайта являются хлебные крошки. Такое название данный вид навигации по сайту приобрел благодаря сказке братьев Гримм про Гензель и Гретель. Если помните, для того, чтоб найти дорогу домой, дети оставляли на дорожке хлебные крошки. Точно также одноименный метод навигации не даст пользователям заблудиться на вашем сайте. Подробнее о назначении и способах добавления хлебных крошек на блог пойдет речь в сегодняшней статье.
Значение и пример хлебных крошек
Для того чтоб вы имели представление о том, как выглядят хлебные крошки на сайте, приведу пример со своего блога:
Хлебные крошки выделены оранжевой рамочкой. Их также называют навигационной цепочкой.
Чаще всего такую цепочку можно найти под шапкой сайта, непосредственно перед заголовком статьи.
Так, посетитель может легко понять, в каком разделе находится статья, которую он просматривает. Общая структура навигации «Хлебные крошки» следующая: Главная страница -> Раздел -> Название статьи . Она может быть усложнена, если, к примеру, в разделе появится подраздел, тогда структура будет такой: Главная страница –> Раздел –> Подраздел –> Название статьи .
Кроме навигации по сайту, в SEO хлебные крошки также играют не последнюю роль. Они улучшают юзабилити сайта, перелинковку, также иногда они могут попасть в . Это позволит повысить кликабельность в выдаче, а также поможет поисковикам быстрее распознать структуру вашего ресурса. Для этого нужна микроразметка хлебных крошек. О том, как ее сделать, поговорим ниже.
Хлебные крошки: как сделать на своем блоге?
Для того чтоб добавить на Вордпресс хлебные крошки, можно использовать плагин, либо написать необходимый код для их вывода.
Для начала рассмотрим, как вывести хлебные крошки с php-кодом. Сразу скажу, что ниже будет приведен этот же код, но с элементами микроразметки, советую сразу взять .
Вот образец кода, который нужно вставить в файл functions.php:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | " " ; } |
Русские названия в коде можно заменить на свои. Например, вместо «Главная» подставить название сайта.
| 1 2 3 4 5 |
После этого на вашем сайте должна появиться навигационная цепочка. Однако чтоб получились красивые хлебные крошки, понадобиться внести изменения в файл стилей. Например, чтобы получилось, как на моем блоге, нужно вставить в 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: плагин
Наиболее распространенные плагины для вывода хлебных крошек: Yoast WordPress Seo, BreadCrumb NavXT. Плагин WordPress SEO by Yoast является многофункциональным и хлебные крошки в его арсенале – лишь малая часть. Поэтому, если данный плагин у вас уже установлен, то вы можете использовать и эту его функцию.
После установки в настройках вы сможете задать вариант пути (рубрики, даты, метки), максимальную длину заголовка, символы между разделами. Кроме того, можно отключить вывод названия страницы, на которой находится посетитель, чтобы не дублировать заголовок статьи. Для того чтобы хлебные крошки отображались на странице, вам опять-таки нужно прописать код в файле single.php или header.php.
| 1 2 3 4 5 6 7 8 |
Внести изменения в стили можно по аналогии с тем, как это было описано выше.
Микроразметка хлебных крошек
Мы уже говорили о том, насколько важна . Хлебные крошки в сниппете моего блога выглядят так:
Такой вид более понятен и приятен для пользователя, нежели просто url страницы.
Поисковые системы могут автоматически принять ту структуру хлебных крошек, которая сделана на вашем сайте и соответственно выводить ее в сниппете. Для того чтоб это проверить нужно воспользоваться валидаторами Гугл и Яндекс.
Если поисковики не распознали хлебные крошки, тогда им нужно помочь. На своем блоге я использую код, приведенный в начале статьи. В него я добавила элементы микроразметки. Если вы тоже выводите хлебные крошки php-кодом, можете заменить свой код на этот:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | function
my_breadcrumb()
{
echo
" |
function my_breadcrumb() { echo "
Делать микроразметку для навигационной цепочки, созданной с помощью плагина, я не пробовала. Но, думаю, это не сложно. Можно по-аналогии с моим кодом видоизменить код плагина. Давайте разберем приведенный код.
Данный код позволяет поисковым системам определить, что это элемент «Хлебные крошки».
Каждый отдельный элемент цепочки обернут в div, содержащий код: itemscope itemtype="https://data-vocabulary.org/Breadcrumb" .
itemprop="url" – определяет значение url, его нужно добавить в каждый тег a
itemprop="title – определяет значение заголовка элемента цепочки
Весь код оборачивается в div с параметром xmlns:v="https://rdf.data-vocabulary.org/#"> , чтобы подключить словарь schema.org.
После добавления кода снова проверьте, распознали ли хлебные крошки Яндекс и Гугл.
Если у вас возникнут дополнительные вопросы по теме данной статьи, обязательно спрашивайте в комментариях.
Напоследок предлагаю посмотреть видео о внутренней перелинковке.
