Сегодня поговорим о микроразметке хлебных крошек, не тех крошек, которые собираются в клавиатуре любителей есть за компьютером :), а хлебных крошек, которые показывают на сайте путь к странице.
Я расскажу, как добавить к ним семантическую разметку.
Что такое сниппет для Яндекса и как управлять им в выдаче ПСЗачем нужно размечать Хлебные крошки (ХК)?
- Чтобы наш ресурс стал понятней для роботов поисковых систем.
- Чтобы сделать индексацию сайта более быстрой и легкой.
- Чтобы ХК отображались в сниппете поисковой выдачи, как дополнительная информация с сайта - пользователю удобнее, если адрес страницы отображается не просто ссылкой, а навигационной цепочкой, в которой видны названия разделов и которая показывает путь вложенности материала.
Посмотрите примеры:
Размеченные ХК:
Не размеченные ХК:
- Чтобы поисковый робот смог построить правильную структуру сайта (Главная – Категория – Запись).
- Как правило, ХК содержат ключевые слова, а добавляя к ним микроразметку, мы сообщаем поисковому роботу, что это именно Хлебные крошки, т.е. путь от Главной к данной странице, а не просто спамный перечень ключей.
Таким образом, семантическая разметка выполняет на сайте несколько важных задач.
Сейчас, микроразметку хлебных крошек Яндекс не понимает, но, несмотря на это, исправно отображает размеченные крошки в поисковой выдаче.
А Google, как всегда, впереди планеты всей - он понимает все виды разметки.
Как добавить микроразметку Shema org в Хлебные крошки?
Предположим, что у нас такой путь к записи:
Главная — Оптимизация (Категория) – Микроразметка хлебных крошек (Запись)
- В div, содержащий ХК, нужно добавить itemscope="" itemtype="http://schema.org/BreadcrumbList". Вот так:
<div itemscope="" itemtype="http://schema.org/BreadcrumbList">
Itemscope означает, что данный блок описывает определенный элемент.
Itemtype сообщает тип элемента (в нашем случае элемент для навигации.
BreadcrumbList – список пунктов в ХК). - Каждую ссылку нужно обернуть тегами span. Вот так:
<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a title="Главная" href="//prodengiblog.ru">На Главную </a> </span>
Параметр itemprop="itemListElement" сообщает, что это отдельный пункт списка элементов.
- К ссылке добавляем параметр itemprop="item", вот так:
<a itemprop="item" title="Главная" href="//prodengiblog.ru">
- Текст ссылки окружаем тегами span и добавляем к тегу параметр itemprop="name". Вот так:
<span itemprop="name">На Главную</span>
Этот параметр говорит о наименовании ссылки: name – имя.
- Сразу же за ссылкой вставляем тег мета с паметром content, вот так:
Он обозначает номер пункта в списке - №1.
В итоге, мы получили первый элемент навигационной цепочки:
<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" title="Главная" href="//prodengiblog.ru"> <span itemprop="name">На Главную</span> <meta itemprop="position" content="1"> </a> </span> |
Все остальные пункты хлебных крошек меняем по аналогии и получаем полноценные хлебные крошки, размеченные микроданными:
<div itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs"> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a rel="nofollow" itemprop="item" title="Главная" href="//prodengiblog.ru"> <span itemprop="name">На Главную</span> <meta itemprop="position" content="1"> </a> </span> <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a itemprop="item" title="Оптимизация" href="//prodengiblog.ru/optimizaciya"> <span itemprop="name">Оптимизация</span> <meta itemprop="position" content="2"> </a> </span> </div> |
↓ Как всегда, готовый, уже размеченный, код Хлебных крошек доступен для загрузки моим подписчикам
Открыть ↓
Добавьте его в самый низ файла functions.php, после закрывающего ?>.
Вызвать функцию крошек можно, добавив в файлы single.php, page.php, category.php или archive.php:
<?php the_breadcrumb() ?> |
Продолжение следует …
Вот что получилось после добавления вашего кода !
Сайт http://businessgrant.com.ua
Не вижу никакой проблемы на вашем сайте.
Или это вы так пиарите его?
Ошибку выбило после того как добавил код. Код удалил и заказал у вас услугу.
Добрый день. Спасибо за полезный материал. Подскажите, почему не приходит код доступа к скрытому содержимому блога? Я оформила подписку еще вчера, а его все нет((. В инструкции написано, что придет в течении нескольких минут.
Вопрос снят, недавно код пришел, спасибо! Вопрос - почему Вы добавляете кавычки параметру itemscope=""? Он же идет без них, вроде?
Если кавычки не добавить, их автоматически добавляет браузер, так что разницы особой нет, с кавычками или без.
Здравствуйте, Ксана!
Вставила Ваш код (тот, что доступен к скачиванию по подписке, и который автоматически проставляет всем ссылкам ХК нужные атрибуты) в конец functions.php перед закрывающимся ?> (удалила из Вашего кода ) - я все правильно сделала? Или код нужно было располагать за ?>, соханив при этом его собственные ?
Прописала код в файлах single.php, index.php, page.php, archive.php (у меня там изначально был class, не стала менять на id).
Но валидатор выдает только breadcrumblist itemType = http://schema.org/BreadcrumbList, то есть не подхватывается код, прописанный в functions.php для каждой ссылки ХК. Ctrl+U тоже не видно кода для каждой ссылки (типа itemprop="itemListElement", itemprop="item", itemprop="name" и др.)
Помогите, пожалуйста, разобраться, почему.
ХК у меня реализованы в WP плагином YOAST SEO. Вот его код в single.php (и аналогичных файлах):
<?php if ( function_exists('yoast_breadcrumb') && !is_front_page() )
{yoast_breadcrumb('','');} ?>
Меняла уже в single.php "class" на "id" (у Вас в коде прописан id, думала, в этом причина несоотвествия). Не помогло.
Могут ли быть причиной кавычки в itemscope=""? (в длинном коде functions.php их нет). Кстати, а почему Вы ипользуете здесь кавычки, ведь этот атрибут вроде идет без них?
Может, причина в том, что где-то прописано "breadcrumbs", а где-то "breadcrumb" без "s" в окончании? Только понять, где можно это менять, а где не стоит...
Подскажите, пожалуйста, где можно искать причину, почему код не работает? Благодарю!)
Если ХК у вас реализованы плагином, тогда зачем вам мой код?
У вас теперь ХК используются 2 раза.
Кроме того, в посте написано:
"Добавьте его в самый низ файла functions.php, после закрывающего ?>", а не перед.
Добрый вечер! Благодарю за ответ! Простите, не заметила надпись после ссылки, куда нужно вставить. Вот и поставила как обычно перед закрытым тегом ?>. Видимо, сказывается усталость и бессонные ночи, проведенные над сайтом))
Можно еще немного Вашего внимания?
Я думала, что Ваш код реализует только микроразметку ХК, а не выводит сами ХК.
1. Мне непонятно, где добавлять микроразметку в код, реализуемый плагином. Где он прячет этот самый код, отвечающий за вывод каждой ссылки ХК. А получается, значит, что я дважды их вывожу, Вашим кодом и тем, что дает плагин.
2. Может быть, существует код, отвечающий не за вывод ХК (раз они уже есть), а автоматически проставляющий атрибуты/свойства микроразметки к каждой ссылке ХК? Что-то вроде кода, проставляющего автоматически микроразметку к каждому изображению на сайте.
1. По этому поводу лучше обратиться к автору плагина.
2. У меня такого кода, к сожаления, нет.
Спасибо.
Здравствуйте!
Может быть подскажите как разметить текущий (последний) пункт ХК, который не должен являться ссылкой?
Никак - последний пункт размечать не нужно.
Как я понял, последний пункт не требуется размечать только в случае со старым форматом разметки (http://data-vocabulary.org/Breadcrumb). Различная документация по schema.org указывает на обратное. Однако, как правило, во всех примерах последний элемент крошек является ссылкой и ведет сам на себя, что не есть хорошо.
На w3.org есть другой пример (https://www.w3.org/wiki/WebSchemas/BreadcrumbsDesign1#Resolving_problems), но как мне видится, он тоже не первой свежести и уже неактуален. Поэтому вопрос по-прежнему открыт 🙂
Подскажите обязательно ли указывать атрибут у ссылки itemprop="item" ?
я его не указывал и валидаторы google,яндекс показывают, что нету ошибок
Я думаю, что обязательно.
А как быть, если в конце навигационной цепочки, указано наименование страницы, но без ссылки. К примеру:
Главная страница (ссылка) - Страница раздела (ссылка) - Страница подраздела (ссылка)- Страница товара (без ссылки)
Создать ссылку я могу, но вроде как нет нужны, чтобы страница ссылалась саму на себя.
Как в таком случае прописать?
Я написал так, перепроверил и в яндекс валидаторе и в гугл, вроде ошибок нет, но и не наименование не отображается и ссылка естественно не отображается.
Посмотрел вашу разметку и понял, что на ссылаемую страницу, в разметке breadcrumblist указывать не нужно. И перечитал Google про breadcrumbs по ссылке https://developers.google.com/search/docs/data-types/breadcrumbs, увидел, что еще можно добавить изображения в разметку. Для интернет магазина, в самый раз.
И вроде как ошибкой не является и валидацию спокойно проходит, но у гугла стоит после закрывающего . Да и вы написали "Сразу же за ссылкой вставляем тег мета с паметром content", а в примере стоит перед, возможно это опечатка.
Здравствуйте !
Подскажите, как вывести хлебную крошку текущей страницы, но что бы она не была активной ?
Какой именно страницы?
К примеру на этой странице - matari.ua/generator.html, используя Ваш код, не выводится текущая страница в хлебных крошках, так же она не выводиться в результатах поиска, подскажите что поправить?
Текущая страница и не должна выводится, иначе получится ссылка на саму себя.
А нельзя текущую хлебную крошку сделать не активной !?