How to update your BreadcrumbList schema – 2020

👋 Ciprian on Tuesday, July 14, 2020 in Blog, Marketing, Search Engine Optimisation
Last modified on Tuesday, July 14, 2020

Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

Breadcrumbs UI Example

Earlier this year, Google deprecated the old vocabulary-data breadcrumb list schema and replaced it with the official Schema.org BreadcrumbList one.

Structured data schemas such as schema.org and data-vocabulary.org are used to define shared meaningful structures for markup-based applications on the Web. With the increasing usage and popularity of schema.org we decided to focus our development on a single SD scheme. As of April 6, 2020, data-vocabulary.org markup will no longer be eligible for Google rich result features.

Google Webmaster Central Blog

This deprecation has been postponed until June 2020, due to the Coronavirus situation.

One month later, this seems to be live. If you’re getting warnings when checking for breadcrumbs rich results or via your Google Search Console, here’s what you need to do:

Old schema (before):

<p>
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="https://www.example.com/" itemprop="url"><small itemprop="title">Home</small></a>
    </span> &raquo;
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="https://www.example.com/about/" itemprop="url"><small itemprop="title">About</small></a>
    </span> &raquo;
    <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="https://www.example.com/contact/" itemprop="url"><small itemprop="title">Contact</small></a>
    </span>
</p>

New schema (after):

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="https://www.example.com" itemprop="item"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="https://www.example.com/about/" itemprop="item"><span itemprop="name">About</span></a>
        <meta itemprop="position" content="2">
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a href="https://www.example.com/contact/" itemprop="item"><span itemprop="name">Contact</span></a>
        <meta itemprop="position" content="3">
    </li>
</ol>

Note the more structured architecture, allowing for a parent element, no more rogue separators – use CSS for that – and a new numbering sequence.

Test your site now – https://search.google.com/test/rich-results – and see if your breadcrumbs are correctly implemented.

Additional reading:
https://developers.google.com/search/docs/data-types/breadcrumb

👋 Added by Ciprian on Tuesday, July 14, 2020 in Blog, Marketing, Search Engine Optimisation. Last modified on Tuesday, July 14, 2020.

Leave a Reply

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Privacy Policy