Что такое хлебная крошка и как ее установить на своем блоге?

1. 5 веских причин разместить крошку в своем блоге
2. 1. Хлебные крошки - ориентир для ваших посетителей
3. 2. Хлебные крошки расположены в верхней части страницы
4. 3. Тропинка с хлебными крошками подчеркивает архитектуру вашего сайта
5. 4. Хлебная крошка может помочь удержать посетителей
6. 5. Крошка проста в использовании
7. Как разместить крошку на своем блоге?
8. Создать хлебную крошку на WordPress
9. Добавьте крошечный след в Blogger

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

Например, посмотрите на эту статью на следе крошки. Если вы найдете его в Google, вы увидите, что поисковая система определяет, что он находится в категории «Создать блог» No Tuxedo:

Посмотреть хлебные крошки в Google

Но что такое хлебные крошки, также называемые по-английски «сухарями»? Для чего он нужен и как разместить его в своем блоге? В этой статье я предлагаю выяснить, почему это полезно для ваших посетителей и полезно для поисковых систем!

5 веских причин разместить крошку в своем блоге

Журнальная крошка рассказывает пользователям, где они находятся в вашем блоге. Это его основная миссия ... но на самом деле это имеет много аспектов.

1. Хлебные крошки - ориентир для ваших посетителей

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

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

2. Хлебные крошки расположены в верхней части страницы

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

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

3. Тропинка с хлебными крошками подчеркивает архитектуру вашего сайта

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

Google даже подал патент, касающийся демонстрации панировочных сухарей в своих результатах поиска, описывая их как «способ извлечь одну или несколько иерархических структур из веб-сайта».

4. Хлебная крошка может помочь удержать посетителей

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

Жуткий след, указывающий на наличие «родительского» раздела со статьями на ту же тему, может помочь вам удержать внимание этих посетителей и улучшить ваши показатель отказов ,

Тем не менее, это остается поведением меньшинства, потому что немногие люди используют навигацию по сайту.

5. Крошка проста в использовании

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

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

На очень больших веб-сайтах у вас иногда бывает огромная глубина, например: Мода> Женщины> Пальто и куртки> Пальто> Пальто средней длины> Пальто средней длины Comptoir des Cotonniers. Каждая часть крошки предлагает выбор продуктов.

Как разместить крошку на своем блоге?

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

Создать хлебную крошку на WordPress

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

Перейдите в меню «Расширения»> «Добавить WordPress», чтобы установить и активировать его.

После выполнения этого шага вы должны отредактировать код темы, включив в него следующие строки:

<div class = "breadcrumbs" xmlns: v = "http://rdf.data-vocabulary.org/#"> <? php if (function_exists ('bcn_display')) {bcn_display (); }?> </ div>

Где? В общем, панировочные сухари появляются в основном на статьях (а также то, что WordPress называет «статьями», как то, что он называет «страницами»).

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

Затем плагин предлагает вам множество параметров : вы можете, например, выбрать внешний вид «разделителя» между ссылками. Например, отобразите их в этой форме: Главная> Категория> Подкатегория ... или в этой форме: Главная | Категория | Подкатегория. Вы также можете выбрать для каждого типа страниц способ отображения или не отображения хлебных крошек (категории, ключевые слова, домашняя страница, страница поиска, страница автора и т. Д.).

Вы также можете отобразить панировочные сухари, если вы используете Yoast SEO плагин , активируя их из вкладки SEO> Настройки SEO> Хлебная крошка.

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

Сайт Yoast SEO предлагает более полное объяснение кода для вставки ,

На No Tuxedo я адаптировал код крошки, предложенный отличный блог SeoMix ,

Добавьте крошечный след в Blogger

Перейдите в раздел «Тема» меню и нажмите «Изменить HTML-код».

В Blogger при добавлении новой функции абсолютно необходимо, чтобы присутствовали два элемента: с одной стороны, код, начинающийся с «b: includedable», который соответствует содержанию рассматриваемой новой функции; с другой стороны, код, начинающийся с «b: include», где вы хотите отобразить эту функцию.

Щелкните мышью в области, где написан код, затем нажмите Ctrl + F (на ПК) или Cmd + F (на Mac). Появится поле поиска. Узнайте, присутствует ли следующая строка в коде или нет:

<b: include data = 'posts' name = 'breadcrumb' />

Если это не так, мы добавим его. Найдите строку <b: include data = 'top' name = 'status-message' /> в коде и сразу после этого скопируйте указанную выше строку, например:

Поскольку был добавлен код, начинающийся с include, теперь мы добавим код, начинающийся с includedable.

Посмотрите в коде этой строки: <b: includedable id = 'main' var = 'top'>. Выше этого времени вы скопируете весь код ниже. Он сообщает Blogger, что он должен отображать хлебную крошку везде (статьи, архивы, страницы, объединяющие все статьи с одним и тем же ярлыком), за исключением главной страницы.

<b: includedable id = 'breadcrumb' var = 'posts'> <b: if cond = 'data: blog.homepageUrl == data: blog.url'> <b: else /> <b: if cond = 'data : blog.pageType == "item" '> <div class =' ​​breadcrumbs '> <span itemscope =' 'itemtype =' http: //data-vocabulary.org/Breadcrumb '> <a expr: href =' data: blog.homepageUrl 'href =' 'itemprop =' url 'rel =' tag '> <span itemprop =' title '> Home </ span> </a> </ span> <b: значения цикла =' data: posts 'var =' post '> <b: if cond =' data: post.labels '> <b: значения цикла =' data: post.labels 'var =' label '> <b: if cond =' data: label .isLast == "true" '>> <span itemscope =' 'itemtype =' http: //data-vocabulary.org/Breadcrumb '> <expr: href =' data: label.url 'href =' 'itemprop = 'url' rel = 'tag'> <span itemprop = 'title'> <data: label.name /> </ span> </a> </ span> </ b: if> </ b: loop> <b: else /> </ b> if >> <span> <data: post.title /> </ span> </ b: loop> </ div> <b: else /> <b: if cond = 'data: blog.pageType == "archive"'> <div class = 'breadcrumbs'> <span itemscope = '' itemtype = 'http: //data-vocabulary.org/Breadcrumb'> <a expr: href = ' data: blog.homepageUrl 'href =' 'ite mprop = 'url'> <span itemprop = 'title'> Home </ span> </a> </ span >> Архивы на <data: blog.pageName /> </ div> <b: else /> <b : if cond = 'data: blog.pageType == "index"'> <div class = 'breadcrumbs'> <b: if cond = 'data: blog.pageName == ""'> <span itemscope = '' itemtype = 'http: //data-vocabulary.org/Breadcrumb'> <a expr:href='data:blog.homepageUrl'href='' itemprop='url'> <span itemprop = 'title'> Home </ span > </a> </ span >> Все статьи <b: else /> <span itemscope = '' itemtype = 'http: //data-vocabulary.org/Breadcrumb'> <a expr: href = 'data: blog.homepageUrl 'href =' 'itemprop =' url 'rel =' tag '> <span itemprop =' title '> Home </ span> </a> </ span >> Статьи по теме "<data: blog .pageName /> "</ b: if> </ div> </ b: if> </ b: if> </ b: if> </ b: if> </ b: includedable>

Затем, если вы хотите настроить отображение, вам нужно найти строку </ b: skin> и чуть выше нее добавить свои графические настройки . Например, следующий код позволит вам иметь поле размером 20 пикселей под крошкой и отображать его перед предложением «Вы здесь:»

.breadcrumbs {margin-bottom: 20px;}
.breadcrumbs: before {content: "Вы здесь:";}

И если все пойдет хорошо, ваша хлебная крошка будет выглядеть, как в примере ниже: статья «Это заголовок» имеет формулировку «Шоколад» ... так что все в порядке!

Конечно, наличие крошки не является необходимым, особенно если ваш блог все еще небольшой. Но когда вы начинаете иметь несколько сотен статей, это небольшой бонус, чтобы сделать архитектуру сайта более прозрачной.

Используете ли вы эту систему в своем блоге или, как посетитель, на сайтах, которые вы посещаете?

Похожие

Комментарии