Adding schema markup for breadcrumbs in Drupal 8

Now you will not surprise anyone with micro-markup on sites, and for sites on version 8 of Drupal we have our own corporate self-written module, light, fast, simple and with markup, but it is completely tailored to the structure of an online store.

The same task arrived on one site, on 8 Drupal, to add micro-markup to bread crumbs.

Ready-made crumbs were displayed by the easy breadrumb module. The module is not bad, but for some reason there was no markup support out of the box. Digging a little on Drupal Org. I found topics where people finished the necessary functionality for this module and allegedly added it to the beta of the module. I downloaded it, installed it, there is a treasured checkbox in the settings, there is also a markup code in the module files, but after turning on the checkbox on the page, nothing has changed at all. At first I thought, maybe it's a crooked client site, which, by the way, was really made some kind of pervert maniac ...

But no, I put it on my pair of sites, on the eight, with easy breadcrumb, the same thing. There is a check mark on the markup, but it is not displayed on the site.

As a result, the solution found on drupalsun.com helped - in the theme templates, create a breadcrumb.html.twig file with the following content

{#
/**
 * @file
 * Theme override for a breadcrumb trail.
 *
 * Available variables:
 * - breadcrumb: Breadcrumb trail items.
 */
#}
{% if breadcrumb %}
  <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
    {% for item in breadcrumb %}
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        {% if item.url %}
          <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="{{ item.url }}">
            <span itemprop="name">{{ item.text }}</span>
          </a>
        {% else %}
          <span itemprop="name">{{ item.text }}</span>
        {% endif %}
        <meta itemprop="position" content="{{ loop.index }}" />
      </li>
    {% endfor %}
    </ol>
  </nav>
{% endif %}

We clear the cache and open the source code of the page, the markup should appear.