Хлебные крошки на сайте, что это такое и для чего их нужно устанавливать на свой сайт - блог.
В связи с неизбежным развитием веб-дизайна, на сайтах и блогах стало появляться все больше и больше новых элементов, которые существенно упрощают взаимодействие пользователей с веб-ресурсом. Одним из таких элементов являются "Хлебные крошки" он же более известный вебмастерам, как Breadcrumbs.
Красная стрелка указывает на сам виджет. Как видите много места он не занимает. Состоит виджет из следующих частей:
Итак, на данный момент мы с вами узнали, что такое Хлебные крошки и для чего они нужны. Так же стоит отметить, что в веб-дизайне существует такое понятие, как юзабилити оно означает удобство просмотра вашего сайта или блога. По-этому прежде всего Хлебные крошки относятся именно к юзабилити.
Установка виджета для старых и новых тем (Soho, Notable, Emporio, Contempo) blogger немного отличается. Но я покажу вам, как это можно сделать для обеих вариантов. Первое, что нужно сделать, скачать файл с HTML кодом breadcrumbs. Что делать дальше смотрим на видео:
В связи с неизбежным развитием веб-дизайна, на сайтах и блогах стало появляться все больше и больше новых элементов, которые существенно упрощают взаимодействие пользователей с веб-ресурсом. Одним из таких элементов являются "Хлебные крошки" он же более известный вебмастерам, как Breadcrumbs.
Хлебные крошки на сайте что это такое?
Хлебные крошки - это HTML виджет или плагин, который помогает пользователю определить место его нахождение на сайте. Так же, благодаря этому виджету посетитель может в один клик открыть разделы к которым относиться читаемая им статья, где он сможет найти для себя еще какой нибудь интересный материал. На рисунке ниже вы можете посмотреть, как выглядит виджет Breadcrumbs на демо блоге.Красная стрелка указывает на сам виджет. Как видите много места он не занимает. Состоит виджет из следующих частей:
- Ссылка ведущая на главную страницу
- Ссылка ведущая на страницы разделов в которых находится данная статья
- Заголовок читаемой статьи (порой виджет может не содержать его)
Итак, на данный момент мы с вами узнали, что такое Хлебные крошки и для чего они нужны. Так же стоит отметить, что в веб-дизайне существует такое понятие, как юзабилити оно означает удобство просмотра вашего сайта или блога. По-этому прежде всего Хлебные крошки относятся именно к юзабилити.
Влияние Хлебных крошек на продвижение в поисковых системах
Многие начинающие вебмастера и блогеры, часто спрашивают, влияют ли Хлебные крошки на SEO оптимизацию сайта. И здесь мнения бывалых верстальщиков разделились. Одни говорят, что да, другие утверждают обратное. Я же больше склоняюсь к той группе, которая утверждает, что данный элемент влияет на оптимизацию. Смотрите сами, виджет способствует дополнительным переходам по сайту, что само по себе повышает поведенческий фактор. К тому же на сегодняшний день "Хлебные крошки" выделяют для поисковых роботов микроразметкой schema.org (помогает поисковым ботом понять для чего нужен тот или иной элемент сайта). И напоследок, Breadcrumbs это навигация, которая принимает участие в перелинковке страниц, а перелинковка, как все мы знаем один из самых важных процессов SEO.Как добавить Хлебные крошки в блог на Blogger
- Откройте панель управления Blogger
- Перейдите в раздел Тема
- Выберите пункт Изменить HTML
- Чуть ниже найдите и откройте файл с HTML кодом хлебных крошек
- Следуйте указаниям в видео инструкции
Установка виджета для старых и новых тем (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 == "item"'>
<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 + "?&max-results=8"' 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 != "true"'>
<span class='meta-divider'>x</span>
</b:if>
</b:loop>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
Видео инструкция:
23 Коммент.
Оставить комментарийжаль но не работает
ОтветитьЗначит где-то допустили ошибку.
Ответитьне подскажешь, как заменить слово "Home" на "Главная" ? чтобы главная по-русски написано было как у тебя на сайте. Если просто в скачанном файле Home на Главная поменять, как понимаю не прокатит?
ОтветитьДолжно прокатить. Выделил на скрине Home его и меняете - i.paste.pics/ba9d915416fec249eb1308b979ad247a.png
ОтветитьПробовал сразу, но что-то не поменялось ). Да и ладно пусть хотя бы так будет.
Ответитьне получается т.к. после блог 1 у меня нет
Ответитьhttp://funkyimg.com/i/2Qq6Q.png
Тогда вставьте после строки:
Ответить<b:include name='noContentPlaceholder'/>
Все работает, спасибо
ОтветитьВсе работает, но что делать если я не использую страницы, а только сообщения?
ОтветитьВ таком случае хлебные крошки не отображаются, тк они заточены на страницы
Да, почти так, только ровно наоборот. Хлебные крошки в первую очередь заточены под Сообщения, потому что только сообщениям можно присвоить ярлык(категорию).
ОтветитьПривет дорогой друг, не могу поставить крошки на шаблон Contempo. Как минимум там проблема в поиске двух строк... Думаю у многих есть проблема
ОтветитьПривет. Нужно найти <b:includable id='post' var='post'> под которой будет <div class='post'> под это строкой нужно вставить первый кусок кода. Потом закрываем <b:includable id='post' var='post'> слева черным треугольником. И после закрытия сразу после <b:includable id='post' var='post'> .... </b:includable> ставим основной кусок кода.
ОтветитьОоо спасибо, сразу поставил.
ОтветитьТам такой нюанс небольшой появился.
Под хлебными крошками линия есть и она теперь немного заходит на название сообщения как можно поправить? Вроде мелоч а глаза мозолит)
CSS код для отступа:
Ответить.breadcrumbs {margin-bottom:20px;}
спасибо большое
ОтветитьВ теме Emporio нет варианта Blog1 для выполнения пункта 2 инструкции. Вариант строки встречается после строк:
Ответить, , , и еще в секции . Подскажите, пожалуйста, куда правильно будет вставить код в этом шаблоне?
Находите строку <b:includable id='post' var='post'> нужна вторая по счету. Ниже после строки post-wrapper not-hero post-...... кидаете первую строку кода хлебных крошек. Закрываете <b:includable id='post' var='post'> нажав на треугольник слева и сразу после этой строки кидаете основной код хлебных крошек.
ОтветитьСпасибо! Все получилось. Правда post-wrapper not-hero - такого не нашлось. После var=post (да, в коде их два) идет код сайдбара для ярлыков. Вот после него div class=post, вставила после фразы include data = post name=post meta. Вроде бы верно получилось. Еще вопрос, а как сделать, чтобы на статических страницах не отображалась строка с разделами?У меня на стат.странице над заголовком теперь дублируется название страницы.
ОтветитьБлагодарю. Всё работает. Не знаете ли как крошки настроить не по алфавитному порядку, а по весу значимости? По сути я хочу разбить ярлыки на категории и подкатегории. Следовательно и порядок хлебных крошек должен быть соответствующий.
ОтветитьПорядок может быть только по алфавиту.
ОтветитьКазус: хлебные крошки повторяют заглавие статических страниц. Как их там убрать? При этом они наследуют полностью свойства названий страниц.
ОтветитьНужно удалить строку <span><data:blog.pageName/></span>
ОтветитьСпасибо! Т.к. русскоязычный label это ужас в url bp % и т.п. символов, то хотела бы их писать латиницей, НО выводить русскоязычный вариант. Подумывала сделать проверку по 'data:label.url' и если он совпадает с конкретным адресом label то выводить моё название, т.е. данный ярлык, но под другим именем. Вопрос в том как верно оформить данный цикл проверки?
ОтветитьКак вписать мою ссылку?