Разное

Разметка хлебных крошек: Настройка микроразметки хлебных крошек Schema.org

04.08.2021

Содержание

Настройка микроразметки хлебных крошек Schema.org

Директ Лайн

Кто мы

Крупнейшее агентство
интернет-маркетинга за МКАДом:

1200+ проектов

65 специалистов

14 лет на рынке

Что такое хлебные крошки

Хлебные крошки (ХК) — это последовательные ссылки, показывающие структуру вложенности текущей страницы относительно всего сайта. Этот навигационный элемент обычно располагается в верхней части страницы перед основным контентом.


Пример хлебных крошек

Зачем нужно размечать хлебные крошки

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

Кроме того, микроразметку хлебных крошек стоит использовать по следующим причинам:

  1. Правильное формирование расширенного сниппета в поисковой системе Google. Помимо заголовка и описания, к странице с валидной микроразметкой могут добавиться хлебные крошки, которые улучшат внешний вид сниппета, что приведет к увеличению его CTR.
    Обратите внимание: Яндекс, к сожалению, не учитывает микроразметку хлебных крошек при формировании сниппетов.
  2. Улучшение индексации ресурса в целом. Поисковый робот будет лучше «понимать» иерархию сайта, а в процессе сканирования ему будет проще переходить к странице на уровень выше.

Поэтому мы рекомендуем применять данный инструмент практически на всех многостраничных сайтах.

Как добавить микроразметку Shema.org в хлебные крошки

Разметка Schema.org помогает поисковикам понимать разные типы данных, отделять их друг от друга. Словарь данного синтаксического языка состоит из различных сущностей (например, цена товара), предназначенных в том числе и для разметки ХК.

Чтобы внедрить Schema.org в хлебные крошки, нужно обрамить их
HTML-код в специальные блоки. К примеру, пропишем код для крошек вида «Главная — Смартфоны — XIAOMI — Mi 9T» и разберем, из чего он состоит:

<ul itemscope itemtype="https://schema.org/BreadcrumbList">
 
<li itemprop="itemListElement" itemscope itemtype="https://schema. org/ListItem">
<a href="/" title="Главная" itemprop="item">
<span itemprop="name">Главная</span>
<meta itemprop="position" content="0">
</a></li>
 
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/phones/" title="Смартфоны" itemprop="item">
<span itemprop="name"> Смартфоны </span>
<meta itemprop="position" content="1">
</a></li><
 
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a href="/phones/xiaomi/" title="XIAOMI" itemprop="item">
<span itemprop="name"> XIAOMI</span>
<meta itemprop="position" content="2">
 
</a>
</li>
</ul>

Как видно из примера, конечная страница не указывается в разметке:

  • Itemscope и itemtype показывают объект и его тип, а также наличие разметки Shema. org;
  • http://schema.org/BreadcrumbList указывает на то, что это хлебные крошки;
  • ItemListElement показывает, что описываемый элемент относится к определенной иерархии;
  • Itemprop=»item» определяет ссылку элемента;
  • Itemprop=»name» — название элемента.
  • Itemprop=»position» — порядковый номер элемента в общей иерархии крошек.

Как проверить правильность разметки

Для проверки валидности кода микроразметки у Google есть специальный инструмент. Его можно использовать как для проверки фрагмента кода, так и для разметки на уже существующей странице сайта по ее URL.


Проверка микроразметки по фрагменту кода


Проверка микроразметки по URL


Отчет о проверке валидатором микроразметки

После запуска теста валидатор покажет ошибки и предупреждения, если таковые присутствуют. Найти ошибки можно также в Google Search Console в разделе «Улучшения» => «Строки навигации».

Рекомендации

Занимаясь разметкой хлебных крошек, не забудьте о наших советах:

  • Последнюю ссылку в хлебных крошках (текущую страницу) делайте неактивной. Активная ссылка может повлиять на поведенческие факторы, ухудшить юзабилити, а также зациклить индексацию. Таким образом, последняя страница в микроразметке — это почти всегда фактически предпоследняя страница в иерархии.
  • Поскольку ХК представляют собой список вложенных страниц, то и оформлять их лучше в тегах <ul>, а не в <div> и т.д.
  • Чтобы сделать сниппет еще более заметным, используйте в разметке эмодзи. Взять их можно, например, здесь. Однако применяйте их с осторожностью: слишком пестрый сниппет может, напротив, оттолкнуть пользователя.
Кстати, микроразметка Shema.org часто присутствует в плагинах для формирования хлебных крошек в популярных CMS-системах. Кроме того, можно установить плагины, которые внедрят микроразметку к остальному контенту сайта. К примеру, для WordPress используйте Schema.

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

Сегодня поговорим о микроразметке хлебных крошек, не тех крошек, которые собираются в клавиатуре любителей есть за компьютером :), а хлебных крошек, которые показывают на сайте путь к странице.


Я расскажу, как добавить к ним семантическую разметку.

Зачем нужно размечать Хлебные крошки (ХК)?

  1. Чтобы наш ресурс стал понятней для роботов поисковых систем.
  2. Чтобы сделать индексацию сайта более быстрой и легкой.
  3. Чтобы ХК отображались в сниппете поисковой выдачи, как дополнительная информация с сайта — пользователю удобнее, если адрес страницы отображается не просто ссылкой, а навигационной цепочкой, в которой видны названия разделов и которая показывает путь вложенности материала.
    Посмотрите примеры:
    Размеченные ХК:

    Не размеченные ХК:
  4. Чтобы поисковый робот смог построить правильную структуру сайта (Главная – Категория – Запись).
  5. Как правило, ХК содержат ключевые слова, а добавляя к ним микроразметку, мы сообщаем поисковому роботу, что это именно Хлебные крошки, т.е. путь от Главной к данной странице, а не просто спамный перечень ключей.

Таким образом, семантическая разметка выполняет на сайте несколько важных задач.
Сейчас, микроразметку хлебных крошек Яндекс не понимает, но, несмотря на это, исправно отображает размеченные крошки в поисковой выдаче.
А Google, как всегда, впереди планеты всей — он понимает все виды разметки.

Как добавить микроразметку Shema org в Хлебные крошки?

Предположим, что у нас такой путь к записи:
Главная — Оптимизация (Категория) – Микроразметка хлебных крошек (Запись)

  1. В div, содержащий ХК, нужно добавить itemscope=»» itemtype=»http://schema.org/BreadcrumbList». Вот так:
    <div itemscope="" itemtype="http://schema.org/BreadcrumbList">

    <div itemscope=»» itemtype=»http://schema.org/BreadcrumbList»>

    Itemscope означает, что данный блок описывает определенный элемент.
    Itemtype сообщает тип элемента (в нашем случае элемент для навигации.
    BreadcrumbList – список пунктов в ХК).

  2. Каждую ссылку нужно обернуть тегами span. Вот так:
    <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
            <a title="Главная" href="//prodengiblog.ru">На Главную </a>
    </span>

    <span itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»> <a title=»Главная» href=»//prodengiblog.ru»>На Главную </a> </span>

    Параметр itemprop=»itemListElement» сообщает, что это отдельный пункт списка элементов.

  3. К ссылке добавляем параметр itemprop=»item», вот так:
    <a itemprop="item" title="Главная" href="//prodengiblog.ru">

    <a itemprop=»item» title=»Главная» href=»//prodengiblog.ru»>

  4. Текст ссылки окружаем тегами span и добавляем к тегу параметр itemprop=»name».
    Вот так:
     <span itemprop="name">На Главную</span>

    <span itemprop=»name»>На Главную</span>

    Этот параметр говорит о наименовании ссылки: name – имя.

  5. Сразу же за ссылкой вставляем тег мета с паметром content, вот так:

    Он обозначает номер пункта в списке — №1.

В итоге, мы получили первый элемент навигационной цепочки:

<span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
    <a itemprop="item" title="Главная" href="//prodengiblog.ru">
        <span itemprop="name">На Главную</span>
        <meta itemprop="position" content="1">
    </a>
</span>

<span itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»> <a itemprop=»item» title=»Главная» href=»//prodengiblog.ru»> <span itemprop=»name»>На Главную</span> <meta itemprop=»position» content=»1″> </a> </span>

Все остальные пункты хлебных крошек меняем по аналогии и получаем полноценные хлебные крошки, размеченные микроданными:

<div itemscope="" itemtype="http://schema. org/BreadcrumbList">
   <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
       <a rel="nofollow" itemprop="item" title="Главная" href="//prodengiblog.ru">
          <span itemprop="name">На Главную</span>
          <meta itemprop="position" content="1">
       </a>
   </span>
   <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem">
       <a itemprop="item" title="Оптимизация" href="//prodengiblog.ru/optimizaciya">
          <span itemprop="name">Оптимизация</span>
          <meta itemprop="position" content="2">
       </a>
   </span>
</div>

<div itemscope=»» itemtype=»http://schema.org/BreadcrumbList»> <span itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.org/ListItem»> <a rel=»nofollow» itemprop=»item» title=»Главная» href=»//prodengiblog.ru»> <span itemprop=»name»>На Главную</span> <meta itemprop=»position» content=»1″> </a> </span> <span itemscope=»» itemprop=»itemListElement» itemtype=»http://schema.

org/ListItem»> <a itemprop=»item» title=»Оптимизация» href=»//prodengiblog.ru/optimizaciya»> <span itemprop=»name»>Оптимизация</span> <meta itemprop=»position» content=»2″> </a> </span> </div>

↓ Как всегда, готовый, уже размеченный, код Хлебных крошек доступен для загрузки моим подписчикам

Уже скачали 151 раз(а)

Открыть ↓

Добавьте его в самый низ файла functions.php, после закрывающего ?>.
Вызвать функцию крошек можно, добавив в файлы single.php, page.php, category.php или archive.php:

<?php the_breadcrumb() ?>

<?php the_breadcrumb() ?>

Продолжение следует …

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

org — Digital-агентство ADVEGITAL

Микроразметка — это дополнительные данные в виде тегов и атрибутов, указываемых в HTML коде, которые помогают поисковым роботам лучше понимать содержимое страницы или ее элементов. Тем самым повышается релевантность сайта, оптимизируются сниппеты в результатах поисковой выдачи, и улучшается вид страницы при репосте в различные социальные сети.

Микроразметка состоит из словаря и синтаксиса. Словарь определяет, какими словами описывать те или иные объекты и их свойства. Например, на странице содержится информация о фильме. В словаре Schema.org для его описания используется слово Movie. У фильма также есть свойства: например, режиссер, год выпуска. Для их обозначения используются слова director, dateCreated. Кроме Schema.org существуют такие словари как Open Graph, микроформаты, FOAF и другие.

Синтаксис — это правила написания разметки. Разновидности: микроданные, RDFA, JSON-LD, микроформаты.

Пример микроразметки страницы о фильме «Возвращение»:

Зачем нужно размечать хлебные крошки

Микроразметка хлебных крошек выполняет несколько функций: Во-первых, сообщает поисковому роботу, что данный элемент кода — это именно хлебные крошки, а не просто набор ссылок. Во-вторых, с помощью разметки «крошки» добавляются в информационный блок ссылки в результатах поисковой выдачи (в сниппет). Вместо адреса страницы отображается навигационная цепочка — она в отличие от url читаема и сразу дает представление о структуре сайта. В-третьих, она помогает поисковому роботу построить структуру сайта.

Как сделать разметку хлебных крошек schema.org

Разберем на конкретном примере. Например, нам нужно добавить разметку в хлебные крошки на странице «Создание сайтов». Навигационная цепочка при этом выглядит так: Главная>Услуги>Создание сайтов

Микроразметка на языке Schema.org с помощью микроданных будет выглядеть так:

    Теги itemscope, itemtype и itemprop указывают на соответственно:
  • размечаемый элемент и на используемый словарь (в данном случае, хлебные крошки и schema.org),
  • на свойства этого элемента
  • и тип элемента через ссылку на schema.org

Что значат отдельные строки этой разметки:
itemscope itemtype=»http://schema. org/BreadcrumbList» — сообщает поисковику, что перед ним хлебные крошки.
a itemprop=»item» href=»/» — Ссылка на страницу-пункт навигационной цепочки
span itemprop=»name» — Наименование пункта в хлебных крошках
meta itemprop=»position» content=»1″/ — Порядок пункта

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

После настройки микроразметки нужно убедиться, что она работает и поисковые роботы правильно считывают структурированные данные. Для проверки используются валидаторы микроразметки. У Google этот инструмент называется «Проверка структурированных данных», у Яндекса — «Валидатор микроразметки». В валидаторы можно вставить как адрес страницы, так и часть кода. В результате они покажут, как роботы обрабатывают разметку, и есть ли в ней ошибки.

Нужен настоящий SEO-сайт и интернет-реклама? Пишите, звоните:

Наша почта:
Единая справочная: 8 (843) 2-588-132
WhatsApp: +7 (960) 048 81 32
Оставить заявку

Микроразметка хлебных крошек schema org — что это и для чего нужно

Сегодня SEO-продвижение охватывает практически все стороны сайта: и контент, и структуру текстов, и интересные заголовки, и репутационные материалы, и ссылочную массу, и юзабилити сайта… Для успешного продвижения внешняя, внутренняя и техническая оптимизации идут рука об руку. Только используя все возможности, ресурсы, фишки, можно добиться результатов в условиях жесткой конкуренции практически в любой нише. Именно для этого привлекаются профи из разных областей, а над сайтом работает целая команда, каждый из которых выполняет свою функцию, прямо как пчелки в улье.

Мы занимаемся созданием, всесторонним развитием и продвижением сайтов и не только. На базе digital агентства Dial действует Академия, в которой преподается, в том числе, курс SEO. В его рамках мы рассказываем не только об основах работы SEO специалиста, но и о мелких, но важных нюансах, типа микроразметки хлебных крошек, которая может сэкономить массу времени на доработку ресурса. И о ней сегодняшняя статья.

Хлебные крошки — что это?

Помните сказку про Гензель и Гретель, которые вернулись домой по хлебным крошкам? Хлебные крошки в интернет-ресурсе, выводящиеся в виде навигационной строки, — это группа ссылок, расположенная в определенной последовательности, по которым посетитель может отследить свой путь по сайту. Как мы ориентируемся в оффлайн магазине, или в метро в котором оказались впервые? Используем для этого указатели и навигацию. На сайте такими подсказками становятся хлебные крошки. Они помогают не заблудиться в структуре ресурса, и обычно размещаются вверху страницы.

Навигация показывает путь с главной к той странице, на которой вы сейчас находитесь, и обеспечивает пользователю возможность вернуться домой или к предыдущему подразделу с любого места сайта. Такие ссылки должны выделяться из всего остального текста. Поисковики напрямую рекомендуют прописывать такую навигационную строку.

Какую пользу несут хлебные крошки?

  • Благодаря хлебным крошкам повышается юзабилити сайта. Человек сразу видит структуру, ему удобнее и понятнее изучать ваш ресурс — ведь в любой момент он может переместиться на главную или на уровень выше. Анализируя хлебные крошки, пользователь понимает, в каком разделе находится статья, которую он читает, и как перейти к списку других статей. Даже бессознательно, перефирическим зрением, человек отмечает навигацию, и в случае необходимости может к ней обратиться.
    Не так давно основной считалась, собственно, главная страница, но с изменением принципов работы поисковиковых роботов изменилось и это. Теперь поисковики предлагают пользователю контент, который лучше всего отвечает его запросу, и ведут посетителя непосредственно на релевантную страницу. Без хлебных крошек пользователю будет практически невозможно понять, в каком конкретно разделе сайта он оказался.

  • Навигация помогает увеличить не только время нахождения на сайте, привлечь внимание к другому контенту со схожей тематикой, но и улучшить глубину просмотров, снизить количество отказов. Например, человек попал на релевантную статью, и по навигации видит, что раздел, в котором она находится, может содержать другие интересные материалы. Вероятность того, что он пойдет их читать гораздо выше, если выведены указатели.
  • В SEO важна перелинковка, и хлебные крошки — это самый элементарный способ ее сделать. Когда они находятся вверху страницы, люди кликают по ним чаще, и их ссылочный вес намного выше, чем при размещении в нижней части. При этом текущая страница ссылкой не является. Чтобы улучшить навигацию и кликабельность можно использовать выпадающее меню.
  • Увеличиваются шансы показов страниц в выдаче, так как навигационные ссылки зачастую одновременно являются ключевиками, или включают их в себя (например раздел “Пылесосы”, подраздел “Пылесосы <название>, конкретные модели). Но с этим нужно быть аккуратнее, чтобы не создать избыточную концентрацию ключей.

Для чего нужна микроразметка?

Микроразметка — это структурированные данные, которые помогают поисковым роботам узнать дополнительные сведения об информации, находящейся на конкретной странице. Что именно на ней расположено? Видео, фото, музыка, статья или новость, рецепт — микроразметка поможет поисковику разобраться, к какой именно категории относится контент. Также она является одним из способов, улучшающих сниппет, а привлекающий внимание сниппет — важный фактор, от которого в том числе зависит перейдет посетитель к вам на страницу или нет. Помимо тайтла, дескрипшна, фавикона, данных Яндекс.Справочника, принимается во внимание и удобная навигационная строка. Микроразметка дает несколько преимуществ:

  • красивый, понятный сниппет;
  • помощь посетителю в ориентации на сайте уже в выдаче;
  • помощь в оценке приблизительного объема информации на ресурсе;
  • переход в необходимый раздел в 1 клик.

С технической стороны использование микроразметки хлебных крошек тоже имеет свои плюсы:

  • быстрая индексация сайта поисковиком;
  • более понятная для поисковика навигация.

В основном применяется три стандартных схемы для разметки хлебных крошек:

  • Микроразметка хлебных крошек Schema.org;
  • RDFA;
  • JSON-LD
  • Их принципиальное различие — в стандарте вывода информации. Он может быть реализован в виде html-кода с расширенными параметрами или json-массива в любом месте кода страницы, в котором для вывода не нужны лишние элементы html (для вывода требуется только javascript-массив).

    Пример простых хлебных крошек в html-коде:

    Если применить микроразметку schema.org, хлебные крошки для пользователя имеют тот же вид, а вот код получается более сложным и громоздким:

    Зато микроразметка оформлена по всем правилам и будет правильно отображаться в выдаче поисковой системы. Проблема одна: прописывать разметку ручками для каждой страницы — безумно трудоемкое занятие. К счастью, для большинства современных CMS предусмотрены плагины:

    • Для WordPress — плагины Yoast SEO, Breadcrumb NavXT, Really Simple Breadcrumb.
    • Для Joomla — Krizalys Breadcrumbs.
    • Для Drupal — Easy Breadcrumb.
    • Для Magento есть несколько плагинов в домашнем маркетплейсе.

    Какие сложности с микроразметкой в 1С-Битрикс?

    Ответственным за вывод хлебных крошек в 1С-Битрикс является компонент “Навигационная цепочка”, но затруднение в том, что в его базовом шаблоне разметка отсутствует чуть более, чем полностью. При этом, он — часть Главного модуля, а значит он есть в любой установке.

    Поэтому внедрение микроразметки занимает дополнительное время программиста, как отдельная задача со своим бюджетом, а часто ее доработку оставляют на потом. Хотя микроразметка хлебных крошек (shema или другие), как небольшой, но важный для продвижения элемент внешней оптимизации, должна настраиваться как можно раньше. Помимо этого, если меняется дизайн или верстка, приходится вместе с ними обновлять и микроданные.

    В Битриксе есть возможность реализовать микроразметку хлебных крошек. Это делается путем доработки шаблона “Навигационной цепочки” и добавления функции, с включением которой на все страницы ресурса, кроме главной, будет добавляться невидимый компонент “Навигационная цепочка” с активной микроразметкой. В том случае, если страница уже имеет ее, там окажутся 2 строки, последняя из которых будет невидима для пользователя. Поисковик же сам выберет более подходящую для него микроразметку.

    Наличие такой функции в Битрикс впоследствии сэкономит деньги и время работы веб-программиста (например, при смене дизайна микроразметку можно будет включить и выключить в один клик). Пользователи при всех равных исходных, скорее выберут в выдаче сайт с видимыми хлебными крошками, а значит — скорее перейдут на страницу и выполнят желаемое действие. Для самих сайтов увеличится скорость индексации.

Онлайн-школа

Запишитесь на курс по маркетингу от Аллы Штауб и вы узнаете:

  • Какие инструменты давно устарели и сжирают бюджет

  • Какие каналы рекламы являются топовыми в 2021 году

  • Как начать получать стабильно растущую прибыль

Компания Dial занимается продвижением и созданием сайтов, в том числе недорогих готовых решений на 1С-Битрикс, уже более 10 лет. В команде над вашим детищем будет корпеть не менее 6 человек. Мы предлагаем своим клиентам уникальную возможность следить за всеми работами и получать полный своевременный отчет через личный кабинет. Стоимость услуг прозрачна и прописана в договоре. Мы выполнили более 1000 проектов в сотне ниш. Приглашаем и вас к работе с нами, если хотите повысить продажи на 40% и более, что особенно актуально в современной мировой обстановке.

Подпишитесь на наш блог

Быстрая разметка хлебных крошек в Opencart

В предыдущей статье мы описывали, как можно добавить на Opencart разметку хлебных крошек. У нас уже есть готовый мануал про внедрение микроразметки на сайт. В данном случае мы разберем реализацию на CMS Opencart. В ней мы это ранее делали при помощи «костылей» и у нас микроразметка выглядела следующим образом:

Домен → Название страницы (h2).

Это не совсем правильная реализация.

В этой статье я вам расскажу, как можно быстро сделать разметку хлебных крошек на CMS Opencart.

Первым делом заходим на FTP:

Находим нужные нам файлы в каталоге catalog/view/theme/ВАША ТЕМА/template/product.

Для работы нам необходимо изменять следующие файлы:

  • category.tpl — шаблон категории;
  • product.tpl — шаблон карточки товара;
  • manufacturer_list.tpl — список производителей;
  • manufacturer_info.tpl — страница производителя.

Перед тем, как приступить к внедрению микроразметки обязательно нужно сделать бэкап изменяемых файлов.

Стандартный код, который отвечает за вывод хлебных крошек мы комментируем (можно удалить):

div>

    ?php foreach ($breadcrumbs as $breadcrumb) { ?>

    ?php echo $breadcrumb[‘separator’]; ?>a href=»<?php echo $breadcrumb[‘href’]; ?>»>?php echo $breadcrumb[‘text’]; ?>/a>

    ?php } ?>

/div>

Вставляем код хлебных крошек, но уже с разметкой:

div xmlns:v=»http://rdf. data-vocabulary.org/#»>

?php foreach ($breadcrumbs as $breadcrumb) { ?>

?php echo $breadcrumb[‘separator’]; ?>

span typeof=»v:Breadcrumb»>

a href=»<?php echo $breadcrumb[‘href’]; ?>» rel=»v:url» property=»v:title»>?php echo $breadcrumb[‘text’]; ?>/a>

/span>

?php } ?>

/div>

Переходим по ссылке https://developers.google.com/structured-data/testing-tool/ и проверяем, что у нас получилось:

Видим, что у нас последняя ссылка в хлебных крошках активна. Если вы хотите, чтоб у вас были размечены хлебные крошки, но последняя ссылка была не активна, тогда вам нужно добавлять вот этот код:

div xmlns:v=»http://rdf.data-vocabulary.org/#»>

   ?php

   $breadcount =count($breadcrumbs)-1;

   foreach ($breadcrumbs as $iterator => $breadcrumb) {

    if ($iterator != $breadcount) {

echo $breadcrumb[‘separator’]. ».$breadcrumb[‘text’].»;

    } else {

echo $breadcrumb[‘separator’].$breadcrumb[‘text’];

    }

   } ?>

/div>

Смотрим, что у нас получилось:

Это мы сделали для страниц категорий. То же самое делам для страниц товара(product.tpl), производителей (manufacturer_list.tpl) и так далее.

В принципе — это всё, достаточно просто, не так ли? В случае если всё-таки есть вопросы — спрашивайте в комментариях.

На блоге мы также рассказываем, как установить eCommerce на CMS Opencart.

Разметка хлебных крошек для Opencart 3.0

Вариант №1. Купить и установить модуль

Например: https://opencart3x.ru/module/seo-smm/microdata. В данном модуле очень много возможностей:

Юля Залиховская

Руководитель отдела продаж

Узнайте о рекламе для вашего бизнеса!
Задайте Юле вопросы о продвижении сайта в интернете.

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь с политикой конфиденциальности

Вариант №2. Заменить старый код разметки на новый

Вот данный код:

ul>

{% for key, breadcrumb in breadcrumbs %}

{% if key + 1 breadcrumbs|length %}

li itemscope itemtype=»http://data-vocabulary.org/Breadcrumb»>

a itemprop=»url» href=»{{ breadcrumb.href }}»>span itemprop=»name»>{{

breadcrumb.text }}/span>/a>

/li>

{% else %}

li itemscope itemtype=»http://data-vocabulary.org/Breadcrumb»>

a itemprop=»url» href=»{{ breadcrumb.href }}»>span itemprop=»name»>{{

breadcrumb.text }}/span>/a>

/li>

  {% endif %}

{% endfor %}

/ul>

Нам необходимо зайти на ФТП и править следующие файлы:

category.twig
product.twig
manufacturer_info.twig

Например: открываем файл — product.twig и меняем данный код:

ul>

    {% for breadcrumb in breadcrumbs %}

    li>a href=»{{ breadcrumb.href }}»>{{ breadcrumb.text }}/a>/li>

    {% endfor %}

  /ul>

на вот этот:

    {% for key, breadcrumb in breadcrumbs %}

{% if key + 1 breadcrumbs|length %}

      li itemscope itemtype=»http://data-vocabulary.org/Breadcrumb»>

  a itemprop=»url» href=»{{ breadcrumb.href }}»>span itemprop=»name»>{{ breadcrumb.text }}/span>/a>

  /li>

{% else %}

            li itemscope itemtype=»http://data-vocabulary.org/Breadcrumb»>

a itemprop=»url» href=»{{ breadcrumb.href }}»>span itemprop=»name»>{{ breadcrumb.text }}/span>/a>

            /li>

    {% endif %}

    {% endfor %}

  /ul>

Получаем:

Сохраняем и смотрим результат:

Микроразметка хлебных крошек Schema.org (образец)