How To: Implement Breadcrumb List Schema Mark Up (And Why)

What Is A Breadcrumb Trail?

You probably already know this, but breadcrumb trails are implemented on websites to assist users in navigating and finding their way around a site using links at the top of the page, which indicates your current position within the site’s hierarchy. 

You can see breadcrumbs in action on each page across this website.   If you wish to navigate back to the main blog index page, simply click “Blog”.   If you want to go to the home page and discover non-blog content relating to technical SEO, click “home” (but wait until you’ve finished reading the rest of this post first).

They are particularly useful on, for example, on an ecommerce site where if you land on a product page via clicking on a search result, you can easily navigate your way back up through relevant categories and sub categories to find similar content to the page you landed on.

What Is Breadcrumb Schema?

The breadcrumb schema is a structured data markup that helps search engines understand the hierarchy and organization of a website’s pages. The breadcrumb schema not only enhances user experience but also provides search engines with valuable information about the website’s structure and content organization, making it easier for them to index and rank the site’s pages accurately. Overall, implementing the breadcrumb schema is an effective way to improve website usability and optimize its visibility in search engine results pages.

If you apply schema mark up to your site’s breadcrumb lists, Google will use this to categorise the data provided and use this to enhance your search result.

For example, the structured data mark up page on this site has the following appearance in the SERPs (search engine results page):

Without this mark-up in place, your search listings will appear as just the URL of the page, for example:

When I’m carrying out my Website SEO Audits this is on of the key things I look out for because of the huge benefits they offer.

What Are The Benefits Of Breadcrumb Schema?

Having breadcrumb schema in place can have a massive impact on your site page’s Click Through Rate (CTR) from search.   It is quite possible for your site to steal clicks from pages ranking above it if you have breadcrumb mark up in place and your competitors don’t.

I have previously worked on a site which inadvertently lost its mark up when a new site template was applied with no schema in place.   As such, their listings lost their enhanced appearance until this was resolved.

You can see in the search analytics screengrab below the impact this had on CTR – the first arrow denotes when the new site template went live, whilst the second denotes when the issue was resolved:

As you can see, the CTR (and subsequently traffic) took a hit even though the site maintained it’s rankings.  It fell from 6.6% to 4.1% in matter of days whilst slowly recovering from 3.5% when it was fixed back up to 7% within 3 weeks.

As always with search engine optimisation, performance was quick to drop when the issue first appeared, and only relatively slowly recovered once it was resolved.

Whilst CTR may or may not be a direct ranking factor, the impact it can have on a site with the impressions and potential clicks such as the one in the screen grab above means that enhancing search listings via schema mark-up is not an opportunity not to be missed.

Examples of How To Implement Breadcrumb List Schema

Breadcrumb list schema can be implemented a number of ways.  Be sure to check out the official mark up pages for breadcrumb lists and list items to get a better understanding of the following code examples:

Via HTML

Un-optimised HTML breadcrumb items generally appear as follows:

<ul id="breadcrumblist">

<li><a href="https://organicdigital.co/">Home</a>/</li>

<li><a href="https://organicdigital.co/services/">Services</a>/</li>

<li><a href="https://organicdigital.co/services/structured-data.php">Structured Data</a></li>

</ul>

Optimised items:

The key elements to be implemented on the code are:

• BreadcrumbList
  • itemListElement
    
• ListItem
  • item
  • name
  • position

These are implemented as follows:

<ul id="breadcrumblist" itemscope itemtype="http://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="https://organicdigital.co/"><span itemprop="name">Home</span></a>/<meta itemprop="position" content="1" /></li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="https://organicdigital.co/services/"><span itemprop="name">Services</span></a><meta itemprop="position" content="2" />/</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="https://organicdigital.co/services/structured-data.php"><span itemprop="name">Structured Data</span></a><meta itemprop="position" content="3" /></li>

</ul>

Via JSON-LD

A snippet such as the following can be placed anywhere on the page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://organicdigital.co/",
      "name": "Home"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://organicdigital.co/services/",
      "name": "Services"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://organicdigital.co/services/structured-data.php",
      "name": "Structured Data"
    }
  }]
}
</script>

Via WordPress Plugin

There are a number of WordPress plugins to help with this and the implementation of other schema:

https://wordpress.org/plugins/schema/

https://en-gb.wordpress.org/plugins/schema-breadcrumbs/

https://wordpress.org/plugins/wpsso-breadcrumbs/

There is also an excellent plug in here:

https://codecanyon.net/item/snip-structured-data-plugin-for-w ordpress/3464341

And a tutorial on how to implement using SNIP:

https://codecanyon.net/item/snip-structured-data-plugin-for-wordpress/3464341

Via Magento Plugin

There are a number of Magetno plugins to help with this and the implementation of other schema:

https://amasty.com/magento-google-rich-snippets.html

https://marketplace.magento.com/magestyapps-module-advancedbreadcrumbs.html

https://www.magmodules.eu/schema-org-rich-snippets.html

What Happens Once The Schema Is Implemented?

Once implemented, you can test the implementation at page or code level using Google’s Rich Snippet Testing Tool.  When live, you can request Google crawls your amended pages – once they have been indexed, watch your CTR and traffic levels soar*

*This may or may not happen