Как установить Хлебные крошки на Blogger (Blogspot) 2020

Хлебные крошки на сайте что это такое
Хлебные крошки на сайте, что это такое и для чего их нужно устанавливать на свой сайт - блог.

В связи с неизбежным развитием веб-дизайна, на сайтах и блогах стало появляться все больше и больше новых элементов, которые существенно упрощают взаимодействие пользователей с веб-ресурсом. Одним из таких элементов являются "Хлебные крошки" он же более известный вебмастерам, как Breadcrumbs.

Хлебные крошки на сайте что это такое?

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

Красная стрелка указывает на сам виджет. Как видите много места он не занимает. Состоит виджет из следующих частей:

  1. Ссылка ведущая на главную страницу
  2. Ссылка ведущая на страницы разделов в которых находится данная статья
  3. Заголовок читаемой статьи (порой виджет может не содержать его)

Итак, на данный момент мы с вами узнали, что такое Хлебные крошки и для чего они нужны. Так же стоит отметить, что в веб-дизайне существует такое понятие, как юзабилити оно означает удобство просмотра вашего сайта или блога. По-этому прежде всего Хлебные крошки относятся именно к юзабилити.

Влияние Хлебных крошек на продвижение в поисковых системах

Многие начинающие вебмастера и блогеры, часто спрашивают, влияют ли Хлебные крошки на SEO оптимизацию сайта. И здесь мнения бывалых верстальщиков разделились. Одни говорят, что да, другие утверждают обратное. Я же больше склоняюсь к той группе, которая утверждает, что данный элемент влияет на оптимизацию. Смотрите сами, виджет способствует дополнительным переходам по сайту, что само по себе повышает поведенческий фактор. К тому же на сегодняшний день "Хлебные крошки" выделяют для поисковых роботов микроразметкой schema.org (помогает поисковым ботом понять для чего нужен тот или иной элемент сайта). И напоследок, Breadcrumbs это навигация, которая принимает участие в перелинковке страниц, а перелинковка, как все мы знаем один из самых важных процессов SEO.

Как добавить Хлебные крошки в блог на Blogger 

  1. Откройте панель управления Blogger
  2. Перейдите в раздел Тема
  3. Выберите пункт Изменить HTML
  4. Чуть ниже найдите и откройте файл с HTML кодом хлебных крошек
  5. Следуйте указаниям в видео инструкции

Установка виджета для старых и новых тем (Soho, Notable, Emporio, Contempo) blogger немного отличается. Но я покажу вам, как это можно сделать для обеих вариантов. Первое, что нужно сделать, скачать файл с HTML кодом breadcrumbs. Что делать дальше смотрим на видео:



URL есть в индексе Google, но есть проблемы 

У некоторых пользователей Blogger и не только, в консоле гугла начала появляться ошибка "URL есть в индексе Google, но есть проблемы". Это происходит из-за того, что в начале 2020 года Google отказался от испольования разметки data-vocabulary в пользу schema.org. Поскольку виджет хлебные крошки включал разметку data-vocabulary в консоле появлялась данная ошибка, а точнее предупреждение. Чтобы устранить проблему нужно заменить большую часть HTML кода виджета хлебных крошек. Для этого скопируйте представленный ниже код и следуйте указаниям на видео.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> 
<span itemprop='name'> <i aria-hidden='true' class='fa fa-home'/> Home</span></a>
<meta content='1' itemprop='position'/>
</span> <span class='meta-divider'>x</span>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item'>  
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<span class='meta-divider'>x</span>  
</b:if>
</b:loop>
</div> 
</b:if> 
</b:loop> 
</b:if> 
</b:includable>

Видео инструкция:



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

10 Коммент.

Оставить комментарий
avatar
denn0055
июля 30, 2018

жаль но не работает

Ответить
avatar
Mark Korvin
июля 30, 2018

Значит где-то допустили ошибку.

Ответить
avatar
Евгений
июля 31, 2018

не подскажешь, как заменить слово "Home" на "Главная" ? чтобы главная по-русски написано было как у тебя на сайте. Если просто в скачанном файле Home на Главная поменять, как понимаю не прокатит?

Ответить
avatar
Mark Korvin
августа 01, 2018

Должно прокатить. Выделил на скрине Home его и меняете - i.paste.pics/ba9d915416fec249eb1308b979ad247a.png

Ответить
avatar
Евгений
августа 01, 2018

Пробовал сразу, но что-то не поменялось ). Да и ладно пусть хотя бы так будет.

Ответить
avatar
Александр Хальзов
января 21, 2019

не получается т.к. после блог 1 у меня нет
http://funkyimg.com/i/2Qq6Q.png

Ответить
avatar
Mark Korvin
января 21, 2019

Тогда вставьте после строки:
<b:include name='noContentPlaceholder'/>

Ответить
avatar
Дарю радость
апреля 21, 2020

Все работает, спасибо

Ответить
avatar
Максим Волченко
апреля 26, 2020

Все работает, но что делать если я не использую страницы, а только сообщения?
В таком случае хлебные крошки не отображаются, тк они заточены на страницы

Ответить
avatar
Mark Korvin
апреля 27, 2020

Да, почти так, только ровно наоборот. Хлебные крошки в первую очередь заточены под Сообщения, потому что только сообщениям можно присвоить ярлык(категорию).

Ответить