Семантически правильныe Breadcrumbs на pdoCrumbs

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

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




[[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>'
]}

Вот два нюанса, которые я добавил.

  1. В разметку кода я добавил семантическую разметку schema.org для хлебных крошек. Здесь думаю комментарии излишни. Поисковики будут счастливы.
  2. Также проходя валидацию стандартного кода из инструкции к pdoCrumbs на validator.w3.org/ я с удивлением заметил ошибку, которая в общем то логична, но почему то я не задумывался. Суть ошибки в том, что разделитесь тоже нужно оформлять как элемент списка (если мы конечно используем списки). Разделитель по умолчанию — это просто \n
Ну вот собственно и вся заметка. Можете смело пролистывать ее и читать комментарии, а если стало совсем скучно, тогда идем наливаем себе очередную порцию кофе и идем работать.
Николай Савин
27 января 2017, 19:12
modx.pro
46
8 057
+20
Поблагодарить автора Отправить деньги

Комментарии: 26

Viktor
27 января 2017, 23:02
1
+4
лично я использую в качестве разделителя css, чтобы не засорять контент ненужными для контента знаками

.breadcrumbs > li + li:before {
  content: "\00bb\00a0";
}
    mngatoff
    30 января 2017, 03:43
    0
    достаточно content: "/"
    из коробки компонент имеет верстку под бутстрап, и там разделитель встроен.
    Андрей Коробков
    28 января 2017, 12:13
    +1
    Думаю {$menuindex} не совсем корректно использовать, правильней будет {$idx}. Так position указывает на позицию ресурса в своем уровне, а вроде как должен на позицию в серии.
    Владимир
    28 января 2017, 13:16
    0
    Подскажи, а по семантической разметке иной навигации, например 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 = Заголовок [...] статьи
    Смущают попадающие в микроразметку «Предыдущая/Следующая»
      Николай Савин
      29 января 2017, 01:03
      0
      Соседями пользоваться не приходилось, потому рецептов пока нет.
      Единственное, мне на глаза попалось, что ты несколько раз используешь тэг nav. Это неверно.
      Тэг Nav как и h1 должен быть один на странице. Валидатор по моему даже ругается на дубли.
        Владимир
        29 января 2017, 01:09
        0
        Вроде нет ни где этого указания
        Тэг Nav как и h1 должен быть один на странице.
        . Наоборот, я читал рекомендации как можно чаще использовать nav для того, что бы все блоки навигации обозначить таким образом для поисковиков. И это работает. Т.е. выделенные nav блоки не портят так называемый поисковый сниппет, туда не попадают заголовки не относящиеся к основной статье. Меню на сайте может быть сколько угодно. Ели не так, буду признателен за ссылки на полезный материал.

        PS Собственно, вот: «Тег nav задает навигацию по сайту. Если на странице несколько блоков ссылок, то в nav обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов nav в документе. Запрещается вкладывать nav внутрь address.»
        Владимир
        29 января 2017, 01:21
        +1
        Валидатор по моему даже ругается на дубли
        — нет, ни один валидатор на дубли nav не ругается, это точно, проверенно.
      Никита
      29 января 2017, 15:37
      0
      Доброго дня! Я новичок в сфере вебмастеров, но стараюсь активно учиться и впитывать знания. Очень надеюсь что автор прочитает меня и ответит.
      Есть такая вещь как циклические ссылки, очень часто встречаются в меню. Можно ли от них избавиться, прописав в tplHere атрибут rel=«nofollow»? Или это не поможет?
        Здоров Александр
        29 января 2017, 15:54
        +1
        &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>
        обыкновенный инлайновый код и дописать уже все необходимое
          Oleg Pimanov
          21 ноября 2018, 11:19
          0
          На код, который используется в этой статье, ругается 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>`
                                  ]]
          
          Николай Савин
          29 января 2017, 17:49
          0
          Привет Никита. Что ты понимаешь под циклическими ссылками? Ссылка страницы на саму себя?
            Никита
            30 января 2017, 03:03
            0
            Да, совершенно верно. Часто встречается в меню сайтов, том числе и тут. например на главной странице в меню ссылка на главную кликабельна и ведет на саму себя. Их наличие является небольшим отрицательным фактором
              Василий Столейков
              30 января 2017, 09:19
              0
              Поисковики кажется не учитывают сквозняки (сквозные ссылки в менюшках)…
                Гриборий
                01 февраля 2017, 21:05
                0
                Ну это еще как бы не юзерфреднли.
                  Василий Столейков
                  02 февраля 2017, 23:14
                  1
                  +2
                  А для меня часто именно отсутствие ссылки и есть неюзерфриендли. То есть если я перешел по этой ссылке в меню, то я часто нажимаю туда же чтобы снова загрузить эту ошибку. Не всегда дотягиваюсь до F5 или кнопки перезагрузки. И не я один такой, встречал много таких людей.

                  Вот пример с самого Яндекса: yandex.ru/support/webmaster/controlling-robot/robots-txt.xml — там в левом меню выделен пункт меню с текущей страницей, но он является ссылкой! То есть Яндекс сам активно использует сквозняки и понимает где они.
                    Гриборий
                    02 февраля 2017, 23:23
                    0
                    Этот вопрос, конечно, в целом не однозначный. Но вот более глобальный премер: логотип яндекса на странице поисковой выдачи, впрочем, и на любой другой «внутренней странице» – ссылка на главную. А на главной логотип (неожиданно?) уже не ссылка на главную.
                      Василий Столейков
                      02 февраля 2017, 23:30
                      1
                      0
                      Ты в этом уверен?
                      Возьми другой сервис Яндекса, например Яндекс.Вебмастер.
                      Вот сколько ни нажимаю на логотип Вебмастера joxi.ru/krD9XYbuEGnLkm — меня посылает на список сайтов, и это всегда, даже когда я нахожусь на этой самой страничке списка.
                        Гриборий
                        02 февраля 2017, 23:39
                        0
                        Я говорю именно о главной странице яндекса. А касетаельно других сервисов(вебмастера в том числе) там как и на остальных страницах лого самого ядекса ссылка на yandex.ru, а не на «главную» сервиса, обрати внимание там ссылка из 2 частей.
                          Василий Столейков
                          02 февраля 2017, 23:48
                          1
                          0
                          Вот именно. Лого Яндекса как бренда и лого Вебмастера как текущего сервиса. Но ты прав, что ситуация неоднозначна, думаю мы с тобой останемся каждый при своём мнении ;)
            Гриборий
            01 февраля 2017, 21:10
            0
            В сниппетах, не поддерживающих tplHere, в шаблон можно добавлять проверку из серии:
            <a href="[[+id:is=`[[*id]]`:then=`#`:else=`[[+link]]`]]" </a>
            Константин Ильин
            03 декабря 2018, 10:51
            0
            На ваш код ругался Гугл

            Вот вызов на который ни яндекс ни гугл не ругаются

            {'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
            Просветов Игорь
            21 сентября 2019, 09:43
            0
            Вот вчера Гугл навалил ошибок вида: Строки навигации, отсутствует поле «item».
            В коде оно есть, но он его не видит из того, что парсер добавлет в код =""
            и на выходе имеем
            <ul itemscope="" itemtype="https://schema.org/BreadcrumbList">
            Как избавиться от этих назойливых ="" нужно что бы было так
            <ul itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
            тогда валидация проходит
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            26