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

Размечаем breadcrumbs в Opencart

май 22 , 2016

По моим наблюдениям первое что начали размечать в opencart - хлебные крошки. Почему же именно breadcrumbs стали точкой входа микроразметки в мир сайтов? Есть несколько причин.

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


Для разметки хлебных крошек в Opencart вручную надо в каждом файле шаблона product.tpl, category.tpl и т.д. прописать атрибуты микроразметки.

Синтаксис microdata

<ul itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/">
    <span itemprop="name">Главная</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/notebooks">
    <span itemprop="name">Ноутбуки</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ul>

Cинтаксис JSON-LD

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "https://example.com/",
    "name": "Главная"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "https://example.com/notebooks",
     "name": "Ноутбуки"
   }
  }
 ]
}
</script>

Код для Opencart

  <ul class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <?php foreach ($breadcrumbs as $key => $breadcrumb) { ?>
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/Thing" itemprop="item" href="<?php echo $breadcrumb['href']; ?>">
 <span itemprop="name"><?php echo $breadcrumb['text']; ?></span>
</a>
<meta itemprop="position" content="<?php echo $key+1; ?>" />
 </li>
    <?php } ?>
  </ul>

После этих действий в магазине уже будут размечены хлебные крошки breadcrumbs которые являются одними из основных и важных элементов навигации.

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

Расскажи друзьям!