«Хлебные крошки» (breadcrumbs) помогают пользователям ориентироваться в структуре сайта. Хотя, стоит заметить, что в современном дизайне их встречаешь всё реже и реже. Но сейчас они могут оказаться полезными не только пользователям, но и поисковикам.
Поисковики и сами прекрасно умеют определять структуру сайта. Google, например, может построить «крошки» от главной страницы сайта до целевой страницы из цепочки ссылок и вывести их в сниппете. Но, лучше всего «хлебные крошки» разметить с помощью microdata. В словаре Data-Vocabulary.org есть специальный тип для этого — Breadcrumb .
<div class="breadcrumbs">
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://noteskeeper.ru" itemprop="url">
<span itemprop="title">Свежие заметки</span>
</a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://noteskeeper.ru/topic/markup/" itemprop="url">
<span itemprop="title">Вёрстка</span>
</a> ›
<span itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://noteskeeper.ru/527/" itemprop="url">
<span itemprop="title">Вёрстка независимыми блоками</span>
</a>
</span>
</span>
</span>
</div>
В примере видно, что под ссылкой на целевую страницу есть ещё две ссылки: на корень сайта, и на страницу категории статьи. Таких промежуточных ссылок может быть больше.
Формат разметки, возможно, ещё будет меняться. На текущий момент, все объекты типа Breadcrumb
неявно связываются между собой. Последовательность в цепочке определяется их последовательностью в документе. Для явного связывания объектов есть поле child
. В этом случае объекты должны быть вложены друг в друга (как в моём примере).
Казалось бы, с разметкой хлебных крошек в виде неупорядоченного списка можно было распрощаться. Однако я нашёл способ, как создать требуемую связанную структуру. На помощь приходит свойство itemref.
<ul class="breadcrumbs">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
itemref="breadcrumb-1">
<a href="http://noteskeeper.ru" itemprop="url">
<span itemprop="title">Свежие заметки</span>
</a>
</li >
<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
id="breadcrumb-1" itemref="breadcrumb-2">
<a href="http://noteskeeper.ru/topic/markup/" itemprop="url">
<span itemprop="title">Вёрстка</span>
</a>
</li>
<li itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
id="breadcrumb-2">
<a href="http://noteskeeper.ru/527/" itemprop="url">
<span itemprop="title">Вёрстка независимыми блоками</span>
</a>
</li>
</ul>
Технически, получилась точно такая же структура — чётко связанный список «крошек». Осталось только проверить на практике, как к нему отнесётся Google.
Обновление: Гугл нормально связал между собой крошки, через аттрибут itemref.
Ну, и напоследок напомню, что если «хлебные крошки» всё же не желательны в дизайне страницы, то их можно спрятать классом «visuallyhidden ». Поисковик прекрасно воспринимает контент, скрытый такой техникой.
Коментарии к заметке
Не пойму что-то, data-vocabulary.org — это тот же schema.org? Их можно комбинировать вместе?
Это не одно и тоже. Комбинировать можно (на разных элементах, разумеется).
Словарь data-vocabulary.org , на сколько я понял, Гугл использует как песочницу для экспериментов. Словарь schema.org каким-то образом аффилирован W3C и поднимается многими поисковиками. Яндекс, например, понимает только микроформат schema.org. О data-vocabulary.org у них в помощи нет ни какой информации.
Технически, можно самому придумать какой-то уникальный объект, описать его свойства на страничке и, в дальнейшем, указывать её URL в поле
itemtype. Возможно, кто-нибудь когда-нибудь захочет реализовать в своём веб-сервисе парсинг таких объектов. Профит!Хочу добавить что новая разметка достаточно быстро появляется в поиске. На личном примере: с утра обновил шаблоны — к вечеру и яндекс и гугл уже показывали красивые «крошки» в серпе
У Яндекса обнаружил свои словари: отзывы об организациях и энциклопедические стати и термины.
А зачем во что бы то ни стало, ценой лишних id-ов и меньшей очевидности структуры, делать хлебные крошки списком, да еще и неупорядоченным?
SelenIT, несколько лет назад среди меня была популярна идея максимум декораций выносить в стили, фоновые изображения и т.п. Тогда мне очень явно (сейчас явности значительно убавилось) представлялось, что разделитель между «крошками» — это что-то из области оформления и никак не контент.
Чтобы крошки не слились в одно предложение, получается, их нужно было верстать блочными элементами. Оговорюсь, что под «блочными» я подразумеваю элементы, имеющие соответствующий дефолтный стиль. Так как крошки связаны между собой по смыслу, то список вполне подходящая структура для их разметки.
Особой избыточности в атрибутах я не вижу. Ну, таков формат микроданных. Лучшей альтернативы нет. Они все на своих местах и решают конкретные задачи, которые на них возлагаются.
Расскажи пожалуйста как тебе видится вёрстка хлебных крошек.
Дело в том, что я как раз воспринимаю крошки как одно предложение, описывающее текущее местоположение пользователя на сайте — подобно тому, как файловый путь описывает положение файла в файловой системе:). И представление их списком равноранговых ссылок скорее сбивает пользователя с толку — «где я и что это еще за непонятное меню?».
Идеальной структурой для «крошек», полностью отражающей их суть, я считаю «мини-карту сайта», часть дерева, вырожденную до одной ветки на уровень («матрёшка» вложенных списоков с одним элементом каждый). Однако для 99% реальных задач я, как и автор древней статьи, считаю такую дотошность лишней. Но «одно предложение» последовательных ссылок (рекомендованное спецификацией HTML5) я считаю явно более приемлемым, чем одноранговый (тем более неупорядоченный) список явно разноранговых (иерархически подчиненных друг другу) сущностей.
А избыточными я назвал исключительно id-ы, нужные только для передачи иерархической связи между элементами во избежание вложенности. Имхо, как раз в этом случае честная вложенность всё же уместнее.
Это же для машины список. Пользователь увидит его в одну строчку с разделителями, я думаю.
Интересный вариант. Всё выглядит вполне логично.
Если я правильно понимаю, то разделители будут вешаться на вложенные псевдо-элементы
ul:before. Если хлебные крошки будут занимать несколько строк текста, то этот разделитель будет переноситься на новую строку, тогда как по логике должен оставаться в конце старой строки. Наa:afterвешать его нельзя, так как он будет частью ссылки. По этому для ссылки понадобится ещё одна обёртка. В результате получится в 2 раза больше элементов, чем могло бы быть. Я прав?Машина не увидит в простом списке главного ключевого отличия крошек — иерархичности. Разве что через всё тот же
itemref, но, на мой взгляд, в данном случае он подозрительно смахивает на костыль. А иерархичность ей важна, особенно в случае, когда путь «крошек» можно построить несколькими способами.При
display:inlineчтоul:before, чтоli:beforeбудет переноситься как обычный текст: есть место на пред. строке — останется там, нет — перенесется на след. строку. Лично для меня такое поведение приемлемо, но если надо непременно переносить разделитель вместе с предыд. пунктом, у меня получилось вот такое решение.Но опять же, имхо, для реальной жизни это излишний перфекционизм. Та же schema.org, насколько я могу судить, заносит в свойство
breadcrumb«одно предложение» ссылок (с разделителями как частью контента, этаким сокращением слова «содержит») и вполе этим обходится…В твоём фиддле разделитель переносится на новую строку в любом случае. Похоже, что ты экспериментировал с «non-breakable space» и поставил его не туда. Он нужен после разделителя, а не перед. Я изменил его немного и стало видно, что крошки из нескольких слов переносятся целиком. Зато разделитель всегда остаётся на предыдущей строке. Почти идеал. Может быть, так даже правильнее всего.
Я же имел в виду вариант , когда крошки из нескольких слов переносятся по словам, а разделитель нет. Но тут нужен, как я писал ранее, дополнительный элемент.
Разумеется. Я уже даже согласился с этим. :)
Смотри, что получается. Мы разговариваем о разных слоях семантики.
Отбросим микроразметку и оставим одни теги. В этом случае машина может узнать об иерархии объектов только по вложенности их друг в друга. Когда ссылки будут перечислены в строку, то никакой иерархии, очевидно, не будет. Более того, машина лишь сможет догадаться о границах фразы по разделителям. Когда крошки свёрстаны плоским списком (упорядоченным или нет, я не готов рассуждать сейчас), границы фраз и общность элементов по смыслу тоже очевидна для неё. Иерархия объектов не определена (о ней машина можно сделать предположение на основании порядка следования отдельных фраз, что Гугл и практикует).
Добавив микроразметку, мы сразу оказывается в совершенно другой плоскости. Машина однозначно понимает иерархию, названия и ссылки указанных объектов. Семантика уже определяется не тегами, а микроразметкой. По этому даже из простого перечисления ссылок в строку можно сделать связанную цепочку.
Видимо, умные люди из W3C и Schema.org сочли сематику тегов несущественной в данном конкретном случае и упростили всё до строки текста. Я склонен согласится с ними и верстаю хлебные крошки обычными ссылками. Как-то так.
Думаю, в заметку надо добавить ещё два примера для полноты картины: с вложенными списками и ссылками через запятую.
В каком браузере? У меня в Fx 23, Chrome 28, IE11pre (Win 7) всё переносится только по надобности. Более того, неразрывный пробел, похоже, вообще не нужен, разделитель и так привязывается к концевому пробелу предыдущего элемента. Но многословные названия переносятся целиком, да, как побороть — пока не придумал…
Я считаю, что полное отсутствие определенной семантики (особенно, если можно компенсировать ее дефицит в другом слое) — меньшее зло, чем явно чуждая семантика (определенная для другого случая). У плоского списка, на мой взгляд, есть явная семантика одноранговости, равнозначности элементов (альтернатив). Для «крошек», по-моему, она только мешает. Ну а если анализаторы извлекают семантику из другого слоя, то тем более, зачем загружать канал ничего не значащими тегами? :)
Вдогонку: кажется, сообразил, как заставить переноситься многословные ссылки (по крайней мере, у меня работает:).
В Safari и Chrome последних версий на OSX. На Windows действительно переносов нет.
Благодарю тебя за интересную дискуссию и примеры.
Почему-то яндексовский валидатор http://webmaster.yandex.com/microtest.xml не хочет воспринимать itemref, ругается такими словами: «ERROR: unable to determine affiliation of these fields. There are two possible reasons: this fields are incorrectly placed or an orphan itemprop attribute is indicated» Он не знает это свойство? Ни один пример употребления itemref не проходит у него валидацию. Если так, то получается, что твой пример с точки зрения Яндекса невалиден.
Валидатор Яндекса уже давно сломался на этот счёт. Раньше было всё хорошо. Я на Web Standatds Days как раз общался c Сергеем Мезенцевым . Он посоветовал писать в саппорт подобные кейсы. Надо будет заняться этим.
Тут в комментариях мы, вроде, договорились, что крошки лучше делать одной строкой. По этому можно обойтись без обратных ссылок. Можно даже попробовать RDFa:
Яндекс всё равно не понимает разметку хлебных крошек. Он строит их исходя из своих внутренних соображений. А Гугл прекрасно читает их в формате RFDa с словарём http://rdf.data-vocabulary.org/#
Ясно, спасибо. Уже написал им в саппорт.
В настоящее время следует размечать хлебные крошки в Microdata или RDF (Resource Document Framework) — ссылка developers.google.com/structured-data/breadcrumbs?rd=1.
Для звеньев крошек используется мета тег с атрибутом "position", благодаря чему звену ставится в соответствие порядковый номер, независимо от особенностей вёрстки.
Пожалуйста помогите настроить хлебные крошки, уже несколько дней мучаюсь. Сайт создал сам, я новичек поэтому не знаю где прописать этот скрип что дает гугл. Когда проверяю пишет что нет структуированых данных, а когда breadcrums.phtml прописываю коды с разных сайтов, то пишет всякие ошибки.
вот такое пишет
Я бы мог посмотреть что там у вас происходит. Но, вы, к сожалению, забыли указать адрес страницы, где добавляете разметку.
Спасибо!!! Автор, мне очень помог Ваш код! У меня сайт без движка, на простом html, и стандартные «хлебные крошки» всё время перескакивали с каждой позиции на новую строку.
Главная >
Услуги
А не так:
Главная > Услуги
Спасибо!
Спасибо за вашу статью — очень мне помогла!
Благодарю за статью