How to add metadata to your breadcrumbs in Drupal 8

Posted 15/03/2017

I have created a video explaining how you can add breadcrumb metadata to your Drupal 8 website. It quickly explains how to add the metadata to your theme and how you test the results.

If you don't need the explanations and details, feel free to just copy the code below.

You will need a twig template in your theme that overwrites the standard breadcrumb twig template. The name has to be "breadcrumb.html.twig".

Creating the file you can use the following code to have the metadata included in the Microdata format.

{#
/**
 * @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 %}

Make sure to test your changes in Google's structured data testing tool:

https://search.google.com/structured-data/testing-tool

More information regarding breadcrumb metadata can be found on

https://developers.google.com/search/docs/data-types/breadcrumbs

Here you have the tutorial. We hope you enjoy it!

 

Add new comment

HTML Restringido

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.