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

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

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

Рекомендуем

23 Коммент.

Оставить комментарий
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

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

Ответить
avatar
Анонимно
октября 08, 2020

Привет дорогой друг, не могу поставить крошки на шаблон Contempo. Как минимум там проблема в поиске двух строк... Думаю у многих есть проблема

Ответить
avatar
Mark Korvin
октября 09, 2020

Привет. Нужно найти <b:includable id='post' var='post'> под которой будет <div class='post'> под это строкой нужно вставить первый кусок кода. Потом закрываем <b:includable id='post' var='post'> слева черным треугольником. И после закрытия сразу после <b:includable id='post' var='post'> .... </b:includable> ставим основной кусок кода.

Ответить
avatar
Анонимно
октября 09, 2020

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

Ответить
avatar
Mark Korvin
октября 10, 2020

CSS код для отступа:
.breadcrumbs {margin-bottom:20px;}

Ответить
avatar
Анонимно
октября 10, 2020

спасибо большое

Ответить
avatar
Валентина Сорокина
ноября 23, 2020

В теме Emporio нет варианта Blog1 для выполнения пункта 2 инструкции. Вариант строки встречается после строк:
, , , и еще в секции . Подскажите, пожалуйста, куда правильно будет вставить код в этом шаблоне?

Ответить
avatar
Mark Korvin
ноября 24, 2020

Находите строку <b:includable id='post' var='post'> нужна вторая по счету. Ниже после строки post-wrapper not-hero post-...... кидаете первую строку кода хлебных крошек. Закрываете <b:includable id='post' var='post'> нажав на треугольник слева и сразу после этой строки кидаете основной код хлебных крошек.

Ответить
avatar
Валентина Сорокина
ноября 27, 2020

Спасибо! Все получилось. Правда post-wrapper not-hero - такого не нашлось. После var=post (да, в коде их два) идет код сайдбара для ярлыков. Вот после него div class=post, вставила после фразы include data = post name=post meta. Вроде бы верно получилось. Еще вопрос, а как сделать, чтобы на статических страницах не отображалась строка с разделами?У меня на стат.странице над заголовком теперь дублируется название страницы.

Ответить
avatar
Папуш
декабря 06, 2020

Благодарю. Всё работает. Не знаете ли как крошки настроить не по алфавитному порядку, а по весу значимости? По сути я хочу разбить ярлыки на категории и подкатегории. Следовательно и порядок хлебных крошек должен быть соответствующий.

Ответить
avatar
Mark Korvin
декабря 07, 2020

Порядок может быть только по алфавиту.

Ответить
avatar
Папуш
декабря 07, 2020

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

Ответить
avatar
Mark Korvin
декабря 08, 2020

Нужно удалить строку <span><data:blog.pageName/></span>

Ответить
avatar
Папуш
декабря 12, 2020

Спасибо! Т.к. русскоязычный label это ужас в url bp % и т.п. символов, то хотела бы их писать латиницей, НО выводить русскоязычный вариант. Подумывала сделать проверку по 'data:label.url' и если он совпадает с конкретным адресом label то выводить моё название, т.е. данный ярлык, но под другим именем. Вопрос в том как верно оформить данный цикл проверки?

Как вписать мою ссылку?

Ответить