Семантически правильныe Breadcrumbs на pdoCrumbs
Верстая очередной проект для замороченных на SEO клиентов, столкнулся с тем, что pdoCrumbs конечно хорош в своей программной логике, но приведенные в документации примеры не совсем верно построены с точки зрения SEO и архитектуры HTML.
Под катом сам код, мои заметки и несколько полезных комментариев.

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

[[pdoCrumbs?
&showHome=`1`
&outputSeparator=`<li> / </li>`
&tplWrapper=`@INLINE <ul itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs">{$output}</ul>`
&tpl=`@INLINE
<li><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a>
</span></li>`
&tplCurrent=`@INLINE
<li><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}">
</span></li>`
]]
на FENOM
{'pdoCrumbs' | snippet : [
'showHome' => 1,
'outputSeparator' => '<li> / </li>',
'tplWrapper' => '@INLINE <ul itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs">{$output}</ul>',
'tpl' => '@INLINE
<li><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a>
</span></li>',
'tplCurrent' => '@INLINE
<li><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}">
</span></li>'
]}
Вот два нюанса, которые я добавил.
- В разметку кода я добавил семантическую разметку schema.org для хлебных крошек. Здесь думаю комментарии излишни. Поисковики будут счастливы.
- Также проходя валидацию стандартного кода из инструкции к pdoCrumbs на validator.w3.org/ я с удивлением заметил ошибку, которая в общем то логична, но почему то я не задумывался. Суть ошибки в том, что разделитесь тоже нужно оформлять как элемент списка (если мы конечно используем списки). Разделитель по умолчанию — это просто \n
Поблагодарить автора
Отправить деньги
Комментарии: 27
лично я использую в качестве разделителя css, чтобы не засорять контент ненужными для контента знаками
.breadcrumbs > li + li:before {
content: "\00bb\00a0";
}
достаточно content: "/"
из коробки компонент имеет верстку под бутстрап, и там разделитель встроен.
из коробки компонент имеет верстку под бутстрап, и там разделитель встроен.
Думаю {$menuindex} не совсем корректно использовать, правильней будет {$idx}. Так position указывает на позицию ресурса в своем уровне, а вроде как должен на позицию в серии.
Резонное замечание. Учту
Подскажи, а по семантической разметке иной навигации, например Neighbors (соседние материалы) есть ли проверенные рецепты?
{'!pdoNeighbors' | snippet : [
'sortby' => 'menuindex',
'field' => 'pagetitle',
'sortdir' => 'asc',
'toPlaceholder' => 'articleNeighbors',
'tplPrev' => '@INLINE <nav id="Neighbors-left" itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement" class="pull-left"><i class="fa fa-arrow-left"></i> <span class="link-prev"><a itemprop="url" href="{{+link}}" title="{{+menutitle}}" ><!--noindex-->Предыдущая <!--/noindex--> <span class="metaspan" itemprop="name"> {{+menutitle}} </span></a></span></nav>',
'tplUp' => '@INLINE <nav id="Neighbors-Up"></nav>',
'tplNext' => '@INLINE <nav id="Neighbors-right" itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement" class="pull-right"><span class="link-next"><a itemprop="url" href="{{+link}}" title="{{+menutitle}}"><!--noindex-->Следующая<!--/noindex--> <span class="metaspan" itemprop="name"> {{+menutitle}} </span> </a> </span><i class="fa fa-arrow-right"></i></nav>',
'id' => $_modx->resource.id,
]}
Я сделал как указал выше, т.е. разметка для навигации и скрытая в CSS подсказка .metaspan {position:absolute;left:-99999px;top:-99999px;
}
Но валидатор видит так sitenavigationelement
itemType = http://www.schema.org/SiteNavigationElement
url href = https://site.tld/culture/20150623853-чпу-урл
text = Предыдущая Заголовок [...] статьи
name = Заголовок [...] статьи
sitenavigationelement
itemType = http://www.schema.org/SiteNavigationElement
url href = https://site.tld/culture/20150625863-чпу-урл
text = Следующая Заголовок [...] статьи
name = Заголовок [...] статьи
Смущают попадающие в микроразметку «Предыдущая/Следующая»
Соседями пользоваться не приходилось, потому рецептов пока нет.
Единственное, мне на глаза попалось, что ты несколько раз используешь тэг nav. Это неверно.
Тэг Nav как и h1 должен быть один на странице. Валидатор по моему даже ругается на дубли.
Единственное, мне на глаза попалось, что ты несколько раз используешь тэг nav. Это неверно.
Тэг Nav как и h1 должен быть один на странице. Валидатор по моему даже ругается на дубли.
Вроде нет ни где этого указания
PS Собственно, вот: «Тег nav задает навигацию по сайту. Если на странице несколько блоков ссылок, то в nav обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов nav в документе. Запрещается вкладывать nav внутрь address.»
Тэг Nav как и h1 должен быть один на странице.. Наоборот, я читал рекомендации как можно чаще использовать nav для того, что бы все блоки навигации обозначить таким образом для поисковиков. И это работает. Т.е. выделенные nav блоки не портят так называемый поисковый сниппет, туда не попадают заголовки не относящиеся к основной статье. Меню на сайте может быть сколько угодно. Ели не так, буду признателен за ссылки на полезный материал.
PS Собственно, вот: «Тег nav задает навигацию по сайту. Если на странице несколько блоков ссылок, то в nav обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов nav в документе. Запрещается вкладывать nav внутрь address.»
Да ты прав. Я что-то путаю.
Валидатор по моему даже ругается на дубли— нет, ни один валидатор на дубли nav не ругается, это точно, проверенно.
Доброго дня! Я новичок в сфере вебмастеров, но стараюсь активно учиться и впитывать знания. Очень надеюсь что автор прочитает меня и ответит.
Есть такая вещь как циклические ссылки, очень часто встречаются в меню. Можно ли от них избавиться, прописав в tplHere атрибут rel=«nofollow»? Или это не поможет?
Есть такая вещь как циклические ссылки, очень часто встречаются в меню. Можно ли от них избавиться, прописав в tplHere атрибут rel=«nofollow»? Или это не поможет?
&tplCurrent=`@INLINE
<li><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$menuindex}">
</span></li>`
если не ошибаюсь этот участок отвечает за последний пункт хлебных крошек, там нет ссылки, так что циклическая ссылка не образуетсявот ссылка на документацию по чанкам для хлебных крошек docs.modx.pro/components/pdotools/snippets/pdocrumbs#Параметры
P.S. tplHere не встерчается в доках и на текущей страницы, вы путаете со сниппетом из pdoMenu
P.S.S Ни разу не встречал чтобы убирали ссылку из текущего меню. но что мешает взять чанк tplHere, туда прописать
@INLINE <li[[+classes]]><a href="[[+link]]" [[+attributes]]>[[+menutitle]]</a>[[+wrapper]]</li>
обыкновенный инлайновый код и дописать уже все необходимое
На код, который используется в этой статье, ругается Google валидатор, Яндекс пропускает. Проблема в последней ссылке. Используйте такой код и оба поисковика будут довольны.
[[pdoCrumbs? &showHome=`1` &showAtHome=`0` &tplWrapper=`@INLINE <ol class="breadcrumb" itemscope="" itemtype="http://schema.org/BreadcrumbList">[[+output]]</ol>` &tplHome=`@INLINE <li class="breadcrumb-item"><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a> </span></li>` &tpl=`@INLINE <li class="breadcrumb-item"><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a href="[[+link]]" itemprop="item"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a></li>` &tplCurrent=`@INLINE <li class="breadcrumb-item active"><span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"> <a style="pointer-events: none;cursor: default;" title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span><meta itemprop="position" content="{$idx}"></a> </span></li>` ]]
Привет Никита. Что ты понимаешь под циклическими ссылками? Ссылка страницы на саму себя?
Да, совершенно верно. Часто встречается в меню сайтов, том числе и тут. например на главной странице в меню ссылка на главную кликабельна и ведет на саму себя. Их наличие является небольшим отрицательным фактором
Поисковики кажется не учитывают сквозняки (сквозные ссылки в менюшках)…
Ну это еще как бы не юзерфреднли.
А для меня часто именно отсутствие ссылки и есть неюзерфриендли. То есть если я перешел по этой ссылке в меню, то я часто нажимаю туда же чтобы снова загрузить эту ошибку. Не всегда дотягиваюсь до F5 или кнопки перезагрузки. И не я один такой, встречал много таких людей.
Вот пример с самого Яндекса: yandex.ru/support/webmaster/controlling-robot/robots-txt.xml — там в левом меню выделен пункт меню с текущей страницей, но он является ссылкой! То есть Яндекс сам активно использует сквозняки и понимает где они.
Вот пример с самого Яндекса: yandex.ru/support/webmaster/controlling-robot/robots-txt.xml — там в левом меню выделен пункт меню с текущей страницей, но он является ссылкой! То есть Яндекс сам активно использует сквозняки и понимает где они.
Этот вопрос, конечно, в целом не однозначный. Но вот более глобальный премер: логотип яндекса на странице поисковой выдачи, впрочем, и на любой другой «внутренней странице» – ссылка на главную. А на главной логотип (неожиданно?) уже не ссылка на главную.
Ты в этом уверен?
Возьми другой сервис Яндекса, например Яндекс.Вебмастер.
Вот сколько ни нажимаю на логотип Вебмастера joxi.ru/krD9XYbuEGnLkm — меня посылает на список сайтов, и это всегда, даже когда я нахожусь на этой самой страничке списка.
Возьми другой сервис Яндекса, например Яндекс.Вебмастер.
Вот сколько ни нажимаю на логотип Вебмастера joxi.ru/krD9XYbuEGnLkm — меня посылает на список сайтов, и это всегда, даже когда я нахожусь на этой самой страничке списка.
Я говорю именно о главной странице яндекса. А касетаельно других сервисов(вебмастера в том числе) там как и на остальных страницах лого самого ядекса ссылка на yandex.ru, а не на «главную» сервиса, обрати внимание там ссылка из 2 частей.
Вот именно. Лого Яндекса как бренда и лого Вебмастера как текущего сервиса. Но ты прав, что ситуация неоднозначна, думаю мы с тобой останемся каждый при своём мнении ;)
В сниппетах, не поддерживающих tplHere, в шаблон можно добавлять проверку из серии:
<a href="[[+id:is=`[[*id]]`:then=`#`:else=`[[+link]]`]]" </a>
На ваш код ругался Гугл
Вот вызов на который ни яндекс ни гугл не ругаются
schema.org/BreadcrumbList
Вот вызов на который ни яндекс ни гугл не ругаются
{'pdoCrumbs' | snippet : [
'outputSeparator' => '<li> / </li>',
'showHome' => 1,
'tplWrapper' => '@INLINE <ul itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb">{$output}</ul>',
'tpl' => '@INLINE
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span></a>
<meta itemprop="position" content="{$idx}">
</li>',
'tplCurrent' => '@INLINE
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a title="{$menutitle}" itemprop="item" href="{$link}"><span itemprop="name">{$menutitle}</span></a>
<meta itemprop="position" content="{$idx}">
</li>'
]}
Схема:schema.org/BreadcrumbList
Спасибо.
Вот вчера Гугл навалил ошибок вида: Строки навигации, отсутствует поле «item».
В коде оно есть, но он его не видит из того, что парсер добавлет в код =""
и на выходе имеем
В коде оно есть, но он его не видит из того, что парсер добавлет в код =""
и на выходе имеем
<ul itemscope="" itemtype="https://schema.org/BreadcrumbList">
Как избавиться от этих назойливых ="" нужно что бы было так<ul itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
тогда валидация проходит
Тоже прилетело. Вы неверно описали проблему, по ссылке ниже читайте.
webinmind.ru/modx/packages-extras/pdotools/snippets/pdocrumbs#Вариант-без-пункта-текущей-страницы
Я просто убрал неактивный пункт меню. В schema.org, в Google и вроде даже в Яндексе, все примеры крошек без неактивного элемента. По всей видимости так модно.
webinmind.ru/modx/packages-extras/pdotools/snippets/pdocrumbs#Вариант-без-пункта-текущей-страницы
Я просто убрал неактивный пункт меню. В schema.org, в Google и вроде даже в Яндексе, все примеры крошек без неактивного элемента. По всей видимости так модно.
Угу… у меня опять как всегда всё через одно место походу.
Подскажите пожалуйста, а как мне сделать? в шаблоне вывод вот так
Подскажите пожалуйста, а как мне сделать? в шаблоне вывод вот так
{'pdoCrumbs_ext' | snippet : ['fromUrl' => ('url_breadcrumbs' | placeholder)]}
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.