Готовые хлебные крошки с микроразметкой

Здравствуйте, уважаемые читатели.

В сегодняшней статье мы сделаем микроразметку для хлебных крошек.

Статья по большей части будет для сайта на WordPress, так как я дам уже готовые коды хлебных крошек с микроразметкой для этого движка. Вам придется лишь установить их на сайт и ждать индексации поисковой системой google. Но также затронем и общие моменты, чтобы вы знали, как должен выглядеть код крошек, если у вас другой движок сайта или простой html ресурс.

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

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

Хлебные крошки являются элементом навигации сайта и его очень любит google. До недавнего времени я был сторонником в сторону отсутствия крошек на ресурсе, так как ими пользуются в пределах 5ти процентов людей. Вместо использования данного навигационного элемента можно освободить место в верху сайта и дать пользователям контент, как можно раньше, так как именно за ним они и пришли на сайт.

Но все таки я решил разместить хлебные крошки, чтобы дать поисковым системам понять структуру ресурса и вставил их в самом низу страницы под формой комментариев, чтобы они не занимали место перед контентом. Принял решение я их разместить, когда внедрил разметку в них.

Статья в тему: микроразметка сайта

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

Теперь, кроме рейтинга в сниппете у меня еще и красивый вид ссылок, который замечательно воспринимают поисковые системы. А Google даже выводит цепочку ссылок в сниппет, что очень круто с точки зрения привлечения внимания и повышение его кликабельности в выдаче. Кстати, Яндекс также это делает.

к содержанию ↑

Основные виды разметки для навигации

Сейчас я опишу вкратце основную суть, которая вам понадобиться на этапе практики. Если же хотите ознакомиться с описанием разметки для навигации полностью, то сделайте это на странице справки Google о расширенном описании для элементов навигации.

Существует 2 варианта разметки навигации:

  1. микроданные;
  2. язык RDFa.

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

к содержанию ↑

Разметка с микроданными

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

Как вид из кода, то должна выдерживаться структуру навигации, то есть ее иерархия. Сначала идет код страницы самого верхнего уровня (в моем случае - главная страницы). Далее идет раздел (рубрика) и только потом подрубрика, если имеется.

На практике, готовый код имеет следующий вид (взято с моего сайта).

Каждая ссылка на страницу заключается в блок с атрибутами itemscope itemtype="http://data-vocabulary.org/Breadcrumb", который описывает элемент, как навигационный. Внутри бока имеется ссылка с атрибутом itemprop="url", дающий понимание, что это ссылка. Название же страницы выводится не между ссылочным тегом <a>, а в теге span с атрибутом itemprop="title", который говорит, что это имя страницы.

Должна выдерживаться строго такая структура, если хотим разместить хлебные крошки с помощью микроданных. Таких блоков может быть и больше, если у вас более глубокая структуру сайта. У меня, например, пока нет материалов в подрубриках, поэтому код состоит всего из 2х размеченных блоков, а в выдаче, как вы можете видеть на изображении выше, идет адрес сайта и всего одно название элемента навигации - рубрики. Если бы была подрубрика, то после рубрики вывелось бы и ее название.

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

к содержанию ↑

Разметка с RDFa

С данным типом разметки также все довольно просто. Должны выдерживаться структуру иерархии в навигационной цепочке, а также:

  1. Вся цепочка хлебных крошек заключена в блок с атрибутом xmlns:v="http://rdf.data-vocabulary.org/#";
  2. Каждая ссылка помещена в тег span с атрибутом typeof="v:Breadcrumb";
  3. Внутри ссылочного тега <a> прописаны атрибуты rel="v:url" и property="v:title".

Вот вся структура разметки с помощью RDFa целиком.

На практике это выглядит так.

Как видим, принцип тот же. Заключать ссылку на текущий материал в атрибуты не нужно, так как она в сниппете не должна отображаться.

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

к содержанию ↑

Готовые хлебные крошки с разметкой микроданными

Сейчас я дам лишь коды, которые вы должны разместить в файлы своего сайта для отображения навигации. Объяснять, как и куда их вставить, не буду. Если вы не знаете, что с ними сделать, то изучите мою первую статью про хлебные крошки wordpress, в которой я показал все очень подробно.

Код функции для файла functions.php.

Если вам нужно, чтобы название категории на этой же странице также было размечено, тогда стоит заменить часть кода (строки 13-19) на следующую:

Но тогда название категории станет ссылкой, так как по мнению поисковой системы Google поле Url должно быть обязательно. Мне же ссылка в данном случае не нужна, поэтому я не стал заменять данную часть кода. Никаких лишних ссылок мы не делаем.

А вот код для вывода навигации на нужных страницах (разместить там, где необходимо отобразить хлебные крошки).

Стили оформления.

Теперь второй вариант реализации.

к содержанию ↑

Готовые хлебные крошки с разметкой языком RDFa

Код функции (очень большой).

Код для вывода навигации на нужных страницах.

Код стилей.

После внедрения хлебных крошек с микроразметкой остается только проверить корректность их работы.

к содержанию ↑

Проверка структурированных данных в google

Для проверки переходим сюда и вводим адрес любой страницы, которая находится минимум на 2м уровне вложенности (то есть статья, так как главная - 0 уровень, рубрика -1й, статья - 2й) и где выводится данный тип навигации.

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

Оба кода работают. Я лично проверил перед написанием сего мануала. Надеюсь, что и у вас все получится.

к содержанию ↑

Какой вариант разметки лучше выбрать

Принципиальной разницы между микроданными и языком RDFa для разметки хлебных крошек нету. Можете использовать тот, который вам ближе.

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

В общем, выбор за вами. Коды все рабочие. Лично проверил. Еще раз повторю, что я использую первый вариант.

Все, ребята. Если у вас остались какие-то вопросы, то пишите их в комментарии. Следующей статьей в данной теме, пожалуй, будет статья про микроразметку. Рассмотрим, какие бывают виды и разметим шаблон на практике.

Пока.

С уважением, Константин Хмелев!

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 59
  • Здравствуйте. Код стилей оформления в тех хлебных крошках, которые вами используются (первый код в данном посте), я вставил в конце таблицы стилей у себя на сайте. Вот такое соединение:
    }

    /*** Стили для хлебных крошек ***/
    #breadcrumb {display: block;

    Правильно ли я все сделал?

    • Здравствуйте.

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

      • Спасибо большое! А код в стили же необязательно вставлять? Просто что с кодом стилей , что без кода, отображение остается тем же.

        • Если изменений нет, то не нужно. Зачем что-то лишнее?

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

    • Все норм) Если что, обращайся)

  • Здравствуйте Константин! Может вопрос будет несколько не по теме поста, тем не менее, нужна ваша помощь. Дело в том, что установка хлебных крошек прошла удачно, спасибо вам! Далее, я полностью поменял микроразметку на schema, проставив ее отдельными файлами и кодами вызова в самом шаблоне. На следующий день сайт полетел вниз в раздаче гугла. Теряюсь в вопросах, что может быть неправильным, когда валидаторы яндекса и гугла показывают, что ошибок нет. Старую микроразметку снес кодом, который разместил в functions.php, теперь только shema показывается гуглу и яндексу. Или может быть нужно время для переиндексации? При анализе сайте гугл видит еще старые тайтлы и разметку. Сколько нужно времени, чтобы понять, есть ли ошибки в разметке или это просто поведенческий фактор гугла, который после переиндексации пойдет вверх? Не могли бы вы глянуть, что я возможно сделал не так в микроразметке? Заранее вам благодарен!

    • Здравствуйте. По идее, сделано неправильно, так как в первый заголовок главной страницы добавлен тег ссылки itemprop="url". Зачем он нужен? Это же простой заголовок. Вторая ошибка (касается общих правил верстки) - наличие, как минимум, аж 2х тегов заголовка первого уровня H1. Верстка шаблона по данным параметрам уже неправильная. Бегло осмотрел лишь начало главной страницы сайта через исходный код.

      Вам кто-то внедрял разметку? Или же вы сами? Плагин использовали? Я так понимаю, что наделано много махинаций. Проще всего пойти в файлы шаблона, разметить область контента общим тегом (itemscope itemtype="http://schema.org/Article"), указать на сам контент (itemprop="articleBody"), комментарии (если нужны), заголовок страницы (itemprop="name"), дату (itemprop="datePublished") и так далее. Всякие плагины вообще не вижу, как способ облегчить сею задачу. Может потому, что я их и не тестил ни разу.

      Честно, я без понятия, влияет ли внедрение разметки на понижение позиций. Но на одном ресурсе, на который была внедрена ПРАВИЛЬНАЯ микроразметка, изменений не было (ресурс не мой). Может быть это связано с ошибками верстки, а может просто нужно подождать переиндексации.

      А вообще, задайтесь вопросом: "Нужна ли она вам, если она не то что толку не дает, а наоборот играет злую шутку с сайтом?" Или же проще заплатить, чтобы внедрили микроразметку в какой-то шаблон, если уж "поджимает", скажем так).

  • Спасибо вам за консультацию! Буду думать, что делать. Если честно, даже не знаю, кто делает разметку на заказ, не знаю к кому обратиться. Если не найду человека, готового оказать эту платную услугу, постараюсь самостоятельно сделать, хотя если честно, сколько времени, а все как рыба об лед. Спасибо вам!

    • Опять же вопрос. Вам нужна эта микроразметка? Она вам не даст тонны трафика. Это лишь один из тысяч факторов, который немножко поможет поисковым системам. Не более того.

    • На бирже фриланса напишите задание. Откликнется масса людей, которые этим занимаются.

  • А как отобразить категории второго уровня ?

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

      • Точнее не так.
        Должно бить так:
        Сайт => рубрика => подрубрика => статья
        А у меня отображается так:
        Сайт => подрубрика => статья

        • Какой вариант крошек используете?

          • Готовые хлебные крошки с разметкой микроданными

          • Попробуйте поставить 2й вариант и посмотрите, как работает. На нем 100% все работает в штатном порядке, так как данный вариант стоит на одном из блогов и там отображается полный путь. Если и на нем не будет отображаться полностью путь, то значит на вашем сайте так настроена структура.

          • Да, второй вариант работает, но при проверке яндекс ругается: ПРЕДУПРЕЖДЕНИЕ: префикс v задан с использованием атрибута xmlns. Используйте атрибут prefix для совместимости с RDFa 1.1
            type = http://rdf.data-vocabulary.org/#Breadcrumb
            http://rdf.data-vocabulary.org/#title

          • В 19й строке кода попробуйте заменить xmlns на prefix и проверьте. Это не ошибка, а предупреждение, чтобы код разметки работал с версией RDFs 1.1. Если ошибку выдавать не будет, то хорошо, но также рекомендую тогда проверить страницу в инструменте проверки структурированных данных Google, так как в справке данной поисковой системы показан вариант на префиксе с атрибутом xmlns.

            О результате отпишите, пожалуйста, потом в комментарии, если не сложно. Буду благодарен. Тогда придется изменить код в статье.

          • На атрибут "xmlns" ругался только яндекс - гугл пропускал. Ну а с "prefix" работает и гугл и яндекс. Спасибо!

          • Спасибо, что отписали, заменил код в статье)

        • Такая же проблема! Можно как-то решить для первого варианта?

          • Отвечал на почту. Скоро постараюсь сделать.

  • Установил первый вариант хлебных крошек, но при проверке категорий в микроразметке выводится только пункт "Главная" и самой категории нет. Как исправить?

    • Так быть и должно. Если проверяете рубрику, о покажет только главную. Проверите статью, то покажет главную + рубрику, в которой она находится.

      • Мне как раз нужно, чтобы на странице категории была и микроразметка категории. Можете подсказать как реализовать это?

        • Без проблем, только тогда категория будет ссылкой в хлебных крошках, так как в данном случае поле URL является обязательным для разметки по мнению Google.

          Замените часть кода (строки 13-19) на следующий:

          Upd: код плохо отобразился в комментариях, поэтому добавил его в статью, сразу под кодом для вставки в файл функций.

          • "Без проблем, только тогда категория будет ссылкой в хлебных крошках, так как в данном случае поле URL является обязательным для разметки по мнению Google."

            Ну по сути ничего не поменяется же? Т.е будет та же микроразметка, только немножко модернизированная?

            P.S спасибо за помощь!

          • Все будет абсолютно тоже с точки зрения микроразметки. Только в предыдущем варианте ссылка не текущее местонахождение (в вашем случае - категория) была просто текстом, то есть просто указывала на местонахождение. А теперь ссылка является именно ссылкой, т.е. по ней можно кликнуть и заново попасть в эту же рубрику. Меня такой вариант не устроил, так как это явная циклическая ссылка, которая заставляет ходить по кругу. Тут уже вам решать, как делать. У меня по этому поводу свои мысли. Больше склоняюсь анализировать другие популярные сайты и не видел, чтобы последний путь был кликабельным и размечался. Поэтому и сделал такой же вариант.

            Не за что. Будут вопросы или пожелания, обращайтесь!

          • Спасибо за совет. Есть еще один вопрос: "Нужен плагин, который позволяет загружать файлы по ссылке (архивы и тд). Т.е вставляешь ссылку и файл грузится на сайт. Такой функционал есть в плагине "WP-Filebase Download Manager", но он слишком громоздкий (нужен более легкий вариант) "

          • Только хотел предложить WP-Filebase, но вы уже откинули данный вариант) Честно, не знаком с плагинами в данной области кроме WP-Filebase. Обычно загружаю все файлы через Filezilla с компьютера в папку на хостинг.

          • Понятно, спасибо :)

  • Спасибо за полезную и интересную статью!

  • Такой вопрос. Материал лежит сразу в двух (трех) категориях. Можно ли это отобразить в крошках? И нормально ли будет это восприниматься поисковиками?

    • В крошках вряд ли вы это отобразите. По крайней мере стандартные коды хлебных крошек этого не подразумевают. Если имеется возможность, то можете обратиться на фриланс. Если это реально, то вам сделают подобное решение. Но это не несет никакой пользы поисковым системам. Материал может лежать в нескольких рубриках, но по факту он принадлежит лишь одной главной рубрике. Поисковик будет воспринимать лишь тот адрес страницы, на которую указывает rel="canonical". Все остальное лишь будет затруднять сканирование сайта. Зачем изобретать велосипед?

  • Еще такой вопрос по микроразметкам, но уже по рейтингу. Я так понимаю, сейчас гугл не очень охотно отображает в сниппете рейтинг? Реализовал на сайте с помощью плагина WP-PostRatings. В сниппете рейтинг вылез только к некоторым записям.

    • На данный момент, рейтинг - это как раз единственный момент, который показывается в 100% порядке, но при условии, что к странице стоит хотя бы одна оценка.

  • Очень благодарен. Только вот заменил строки с 13 по 19 на предложенные и никаких изменений не произошло. И до этого категории были ссылками и после этого остались. Или что должно было поменяться. Примера как у Вас на сайте, что-то не нашел на странице.

  • а, все разобрался, извините. Это касалось лишь страниц с категориями походу

  • Так какая схема разметки хлебных крошек работает сейчас и под Яндекс?
    Какие только не использовал для них уже, красиво не выводятся крошки в Яндексе хоть ты тресни.
    Подсматривал даже разметку у тех в ПС, у кого норм отображается, делал также и нифига...
    П.С. У Вас RSS ленты нет что ли?

    • Rss ленты нет и не будет. Работать может и та и та, но не 100%. На каких-то сайтах яндекс выводит цепочку в выдаче, а на каких-то нет. На моих сайтах цепочка выводится только в гугле. В яндексе ничего нет.

  • подскажите,

    У меня на странице записи отображается в хлебных крошках

    Рубрика /название статьи

    Как оставить только рубрику, а то как то получается что в хлебных крошках и в названии статьи дублируется

    • Во втором варианте реализации предусмотрена такая возможность. В строке 4 можно менять параметр, будет ли отображаться текущая страницы в крошках. В первом варианте хлебных крошек необходимо редактировать код. Установите второй вариант и все будет отлично, использую сейчас его на всех сайтах.

  • Спасибо наконец настроил микроразметку

  • Добрый день! Буквально на днях заметил, что вместо отображения хлебных крошек выскакивает вот такая ошибка Главная »
    Catchable fatal error: Object of class WP_Error could not be converted to string in /usr/home/apple-pnz/public_html/wp-content/themes/iPhone4S/functions.php on line 103 В чем может быть проблема? Ничего не в последние время не делал.

    • Добрый. Ошибка не может просто так появится. Советую проверить размещение кода хлебных крошек а файле функций, т.к. именно в этом файле обнаружена ошибка.

      • Я все это понимаю. Но проблема появилась с того ни с сего. Вот буквально сегодня. До этого несколько месяцев работало без проблем

        • Возможно, какой-то сбой в работе сайта, может файлы был изменен из-за наличия вредоносного кода и т.д. Тут нужно отслеживать. Имеется плагин, которые показывает, когда произошли изменения в файлах сайта - wordpress file monitor plus

  • Здравствуйте, заметил вы в коде самих "крошек" используете rel=nofollow. Но помню где-то читал, что поисковики не любят nofollow по причине, что подозревают сайты использующие подобные атрибуты в мошенничестве и попытках скрыть что-то от роботов. И такие сайты могут хуже ранжироваться. Скажите данная информация бесполезна, или этого стоит бояться ?

    • Здравствуйте. Я не использую нофоллоу в хлебных крошках у себя. Не знаю, где вы у меня увидели данный атрибут. Раньше скрывал, но сразу же убрал. Хлебные крошки должны быть полностью открыты, как для Яндекса, так и для Google.

  • Здравствуйте! Чем отличается вот от этого http://dimox.name/wordpress-breadcrumbs-without-a-plugin/,
    тем более там обновление есть?

    • Здравствуйте. От второго варианта по конечному итоге НИЧЕМ. Вся цепочка и разметка хорошо работают. стати на одном из сайтов я использую вариант крошек из этой статьи. А по поводу обновлений, ничего не вижу критичного. Крошки работают и разметка тоже без ошибок.

      • У меня почему-то работает ваш вариант, а тот вариант с другого сайта у меня не работает, после добавлении функции, появляется чистый белый экран!

        • Скорей всего, что вы неправильно добавляете код в файл функций, например, можете добавить его, когда мой уже размещен у вас, тогда будет конфликтация и как раз появится белый экран. Будьте внимательны.

  • Здравствуйте!
    Интересует такой вопрос.

    Смотрите, часто Google в сниппете в URL делает жирным ключевые слова. Если я поставлю хлебные крошки, и будет отображаться категория сайта, то не упадут ли из-за этого позиции в поиске?

    Спасибо.

    • Здравствуйте. Нет, на позиции негативным образом это не скажется.

  • Подскажите пожалуйста как вместо слова главная вывести название блога?
    То есть здесь echo '" >Главная';
    Поменять главная на что то такое
    Спасибо.

  • Поменять главная на что то такое (Добавил a так как код обрезается в комментарии)

  • И ещё такой вопрос. Как в коде "Готовые хлебные крошки с разметкой языком RDFa" в случае слишком длинного названия текущей статьи/страницы/рубрики ограничить её до определённого количества символов, а в конце проставлять троеточие?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *