Семантически правильны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 января 2017, 19:12
Поблагодарить автора
Отправить деньги
Комментарии: 27
Подскажи, а по семантической разметке иной навигации, например 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,
]}.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 = Заголовок [...] статьи
Вроде нет ни где этого указания
PS Собственно, вот: «Тег nav задает навигацию по сайту. Если на странице несколько блоков ссылок, то в nav обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов nav в документе. Запрещается вкладывать nav внутрь address.»
Тэг Nav как и h1 должен быть один на странице.. Наоборот, я читал рекомендации как можно чаще использовать nav для того, что бы все блоки навигации обозначить таким образом для поисковиков. И это работает. Т.е. выделенные nav блоки не портят так называемый поисковый сниппет, туда не попадают заголовки не относящиеся к основной статье. Меню на сайте может быть сколько угодно. Ели не так, буду признателен за ссылки на полезный материал.
PS Собственно, вот: «Тег nav задает навигацию по сайту. Если на странице несколько блоков ссылок, то в nav обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов nav в документе. Запрещается вкладывать nav внутрь address.»
Доброго дня! Я новичок в сфере вебмастеров, но стараюсь активно учиться и впитывать знания. Очень надеюсь что автор прочитает меня и ответит.
Есть такая вещь как циклические ссылки, очень часто встречаются в меню. Можно ли от них избавиться, прописав в 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 — меня посылает на список сайтов, и это всегда, даже когда я нахожусь на этой самой страничке списка.
На ваш код ругался Гугл
Вот вызов на который ни яндекс ни гугл не ругаются
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 и вроде даже в Яндексе, все примеры крошек без неактивного элемента. По всей видимости так модно.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
| Компонент | Текущая версия | Закачки |
| pdoTools | 2.12.10-pl от 09.02.2021 | 49 238 |
2 часа назад
вот так работает
<div class="product-thumb col-5 col-xs-5 col-sm-3 col-lg-3 col-md-3">
<a href="{$id | url}...
4 часа назад
С запросом справился)
9 часов назад
а индексацию перезапускали потом?
Сегодня в 11:47
решил просто получать данные из инпута на странице заказа (а не из properties)
case 'pod': $value = $_POST['extfld_srok']; break;так вроде ра...
Вчера в 19:27
Дружище!!! Спасибо, я месяц мучился))