How to add metadata to your breadcrumbs in Drupal 8

04/25/2017
How to add metadata to your breadcrumbs in Drupal 8

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!

 

Comments

#329

There is no only solution…

There is no only solution but heaps of options - like I said
in the start, there's no hard and speedy manual that states to the idea answers into all of your issues.

Now in the event that you pose a specific problem to a panel of experts, then you are guaranteed to get many unique
comments and remedies in yield. This can turn out to be
vexing.

My weblog; Full Post

Add new comment

Restricted HTML

  • 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.