Микроразметка хлебных крошек

Автор:
(Людмила Лунева)

Веб-дизайнер и разработчик сайтов на wordpress

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

Я расскажу, как добавить к ним семантическую разметку.

Сниппет для яндексаЧто такое сниппет для Яндекса и как управлять им в выдаче ПС

Зачем нужно размечать Хлебные крошки (ХК)?

  1. Чтобы наш ресурс стал понятней для роботов поисковых систем.
  2. Чтобы сделать индексацию сайта более быстрой и легкой.
  3. Чтобы ХК отображались в сниппете поисковой выдачи, как дополнительная информация с сайта - пользователю удобнее, если адрес страницы отображается не просто ссылкой, а навигационной цепочкой, в которой видны названия разделов и которая показывает путь вложенности материала.

    Посмотрите примеры:

    Размеченные ХК:

    Микроразметка хлебных крошек

    Не размеченные ХК:
    Отсутствие микроразметки хлебных крошек

  4. Чтобы поисковый робот смог построить правильную структуру сайта (Главная – Категория – Запись).
  5. Как правило, ХК содержат ключевые слова, а добавляя к ним микроразметку, мы сообщаем поисковому роботу, что это именно Хлебные крошки, т.е. путь от Главной к данной странице, а не просто спамный перечень ключей.

Таким образом, семантическая разметка выполняет на сайте несколько важных задач.

Сейчас, микроразметку хлебных крошек Яндекс не понимает, но, несмотря на это, исправно отображает размеченные крошки в поисковой выдаче.

А Google, как всегда, впереди планеты всей - он понимает все виды разметки.

Как добавить микроразметку Shema org в Хлебные крошки?

Предположим, что у нас такой путь к записи:

Главная — Оптимизация (Категория) – Микроразметка хлебных крошек (Запись)

  1. В div, содержащий ХК, нужно добавить itemscope="" itemtype="http://schema.org/BreadcrumbList". Вот так:

    <div itemscope="" itemtype="http://schema.org/BreadcrumbList">

    Itemscope означает, что данный блок описывает определенный элемент.
    Itemtype сообщает тип элемента (в нашем случае элемент для навигации.
    BreadcrumbList – список пунктов в ХК).

  2. Каждую ссылку нужно обернуть тегами span. Вот так:
    <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
            <a title="Главная" href="http://prodengiblog.ru">На Главную </a>
    </span>

    Параметр itemprop="itemListElement" сообщает, что это отдельный пункт списка элементов.

  3. К ссылке добавляем параметр itemprop="item", вот так:
    <a itemprop="item" title="Главная" href="http://prodengiblog.ru">
  4. Текст ссылки окружаем тегами span и добавляем к тегу параметр itemprop="name". Вот так:
     <span itemprop="name">На Главную</span>

    Этот параметр говорит о наименовании ссылки: name – имя.

  5. Сразу же за ссылкой вставляем тег мета с паметром content, вот так:

    Он обозначает номер пункта в списке - №1.

В итоге, мы получили первый элемент навигационной цепочки:

<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
    <a itemprop="item" title="Главная" href="http://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="http://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="http://prodengiblog.ru/optimizaciya">
          <span itemprop="name">Оптимизация</span>
          <meta itemprop="position" content="2">
       </a>
   </span> 
</div>

↓ Как всегда, готовый, уже размеченный, код Хлебных крошек доступен для загрузки моим подписчикам

Уже скачали 90 раз(а)

Открыть ↓

Добавьте его в самый низ файла functions.php, после закрывающего ?>.

Вызвать функцию крошек можно, добавив в файлы single.php, page.php, category.php или archive.php:

<?php the_breadcrumb() ?>

Продолжение следует …

Узнайте больше о пользе микроразметки:

Хотите получать сообщения о скидочных акциях,
новых постах и темах для wordpress?
  1. Вот что получилось после добавления вашего кода !
    Сайт http://businessgrant.com.ua

    • Не вижу никакой проблемы на вашем сайте.
      Или это вы так пиарите его?

  2. Ошибку выбило после того как добавил код. Код удалил и заказал у вас услугу.

  3. Добрый день. Спасибо за полезный материал. Подскажите, почему не приходит код доступа к скрытому содержимому блога? Я оформила подписку еще вчера, а его все нет((. В инструкции написано, что придет в течении нескольких минут.

  4. Вопрос снят, недавно код пришел, спасибо! Вопрос - почему Вы добавляете кавычки параметру itemscope=""? Он же идет без них, вроде?

    • Если кавычки не добавить, их автоматически добавляет браузер, так что разницы особой нет, с кавычками или без.

  5. Здравствуйте, Ксана!
    Вставила Ваш код (тот, что доступен к скачиванию по подписке, и который автоматически проставляет всем ссылкам ХК нужные атрибуты) в конец 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, после закрывающего ?>", а не перед.

  6. Добрый вечер! Благодарю за ответ! Простите, не заметила надпись после ссылки, куда нужно вставить. Вот и поставила как обычно перед закрытым тегом ?>. Видимо, сказывается усталость и бессонные ночи, проведенные над сайтом))
    Можно еще немного Вашего внимания?
    Я думала, что Ваш код реализует только микроразметку ХК, а не выводит сами ХК.
    1. Мне непонятно, где добавлять микроразметку в код, реализуемый плагином. Где он прячет этот самый код, отвечающий за вывод каждой ссылки ХК. А получается, значит, что я дважды их вывожу, Вашим кодом и тем, что дает плагин.
    2. Может быть, существует код, отвечающий не за вывод ХК (раз они уже есть), а автоматически проставляющий атрибуты/свойства микроразметки к каждой ссылке ХК? Что-то вроде кода, проставляющего автоматически микроразметку к каждому изображению на сайте.

    • 1. По этому поводу лучше обратиться к автору плагина.

      2. У меня такого кода, к сожаления, нет.

      • Спасибо.

  7. Здравствуйте!
    Может быть подскажите как разметить текущий (последний) пункт ХК, который не должен являться ссылкой?

    • Никак - последний пункт размечать не нужно.

      • Как я понял, последний пункт не требуется размечать только в случае со старым форматом разметки (http://data-vocabulary.org/Breadcrumb). Различная документация по schema.org указывает на обратное. Однако, как правило, во всех примерах последний элемент крошек является ссылкой и ведет сам на себя, что не есть хорошо.
        На w3.org есть другой пример (https://www.w3.org/wiki/WebSchemas/BreadcrumbsDesign1#Resolving_problems), но как мне видится, он тоже не первой свежести и уже неактуален. Поэтому вопрос по-прежнему открыт :-)

Внимание: все отзывы проходят модерацию.

Топ комментаторов
АватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватарАватар
Самые комментируемые записи
Самые читаемые записи

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

В каждом письме публикуется код разблокировки.

Пользуйтесь кодом только из последних, пришедших вам на Email, писем. Закрыть »

Постов 195
Отзывов 4349