Updated on December 2nd, 2024 at 12:40 pm
Here’s an example of the different types of breadcrumb schema markup you can use on your website to add structured data to breadcrumbs on your pages.
Breadcrumb schema markup can be valuable because it helps search engines to categorise products within a relevant section of your website, even if they exist on generic URLs.
For example, if your site uses /products/luxury-tea-pot/ as the URL structure
You can help encourage the SERP (search engine results page) to show a pathway like: Tea Making Accessories > Luxury Tea Pots
Which offers much more specificity than the URL path being displayed in SERP.
Our examples will cover all types of schema markup and different examples of breadcrumb styles.
JSON-LD Structured Data Example
The simplest structured data code is JSON-LD, if you’re coming here from my course documentation, this is the easiest and simplest schema markup type for your website.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"name": "Google Tag Manager SEO",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Search Natural",
"item": "https://searchnatural.co.uk/"
},{
"@type": "ListItem",
"position": 2,
"name": "SEO Courses and Products",
"item": "https://searchnatural.co.uk/seo-course-product/"
},{
"@type": "ListItem",
"position": 3,
"name": "Google Tag Manager SEO"
}]
}
</script>JSON-LD Multiple Path Example
You can consider adding markup to multiple breadcrumb trails if you have a product which appears in multiple category pages, however, generally, you’re better off selecting a single section, i.e. the most relevant section and creating a single breadcrumb which details the pathway to the page.
<script type="application/ld+json">
[{
"@context": "https://schema.org",
"name": "Google Tag Manager SEO",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Search Natural",
"item": "https://searchnatural.co.uk/"
},{
"@type": "ListItem",
"position": 2,
"name": "SEO Courses and Products",
"item": "https://searchnatural.co.uk/seo-course-product/"
},{
"@type": "ListItem",
"position": 3,
"name": "Google Tag Manager SEO"
}]
},
{
"@context": "https://schema.org",
"name": "Google Tag Manager SEO All",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "All Products",
"item": "https://searchnatural.co.u/all-products/"
},{
"@type": "ListItem",
"position": 2,
"name": "Google Tag Manager SEO"
}]
}]
</script>
In this case, give each breadcrumb set a name, indicated by the highlighted sections, which is reflective of the product and pathway to the product, so each breadcrumb set has a different name.
In this example and all of our multiple path examples, the product is also linked from: https://searchnatural.co.uk/all-products/
So the markup reflects how breadcrumb schema for this pathway could be implemented.
RDFa Schema Markup Example
Here’s what the same markup would look like translated into RDFa. This alternative code style allows you to add markup as part of the HTML on your pages.
<html>
<head>
<title>Google Tag Manager SEO</title>
</head>
<body>
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
<span property="name">Google Tag Manager SEO</span>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://searchnatural.co.uk/">
<span property="name">Search Natural Home</span></a>
<meta property="position" content="1">
</li>
›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://searchnatural.co.uk/seo-course-product/">
<span property="name">SEO Courses and Products</span></a>
<meta property="position" content="2">
</li>
›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://searchnatural.co.uk/seo-course-product/google-tag-manager-seo/">
<span property="name">Google Tag Manager SEO</span></a>
<meta property="position" content="3">
</li>
</ol>
</body>
</html>RDFa Multiple Path Example
Multiple pathway markup is also possible in RDFa however, this involves displaying two breadcrumb pathways on the page, something you’re unlikely to get sign off for from many designers. So unless this is critical to your pages we’d always recommend sticking with a single breadcrumb trail.
<html>
<head>
<title>Award Winners</title>
</head>
<body>
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
<span property="name">Google Tag Manager SEO</span>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://searchnatural.co.uk/">
<span property="name">Search Natural Home</span></a>
<meta property="position" content="1">
</li>
›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://searchnatural.co.uk/seo-course-product/">
<span property="name">SEO Courses and Products</span></a>
<meta property="position" content="2">
</li>
›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="">
<span property="name">Google Tag Manager SEO</span></a>
<meta property="position" content="3">
</li>
</ol>
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
<span property="name">Google Tag Manager SEO All</span>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://searchnatural.co.uk/all-products/">
<span property="name">All Products</span></a>
<meta property="position" content="1">
</li>
›
<li property="itemListElement" typeof="ListItem">
<span property="name">Google Tag Manager SEO</span>
<meta property="position" content="2">
</li>
</ol>
</body>
</html>Make sure you include a name element in both of your breadcrumb lists as per our highlights. This will ensure you don’t get all of your breadcrumbs indexed as “unnamed item”.
Microdata Markup Example
Here’s the same schema markup example but in Microdata format. Microdata is similar in format to RDFa however, it substitutes “<span property=”name” for “<span itemprop=”name” and some other changes.
<html>
<head>
<title>Google Tag Manager SEO Course</title>
</head>
<body>
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
<span itemprop="name">Google Tag Manager SEO</span></a>
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://searchnatural.co.uk/">
<span property="name">Search Natural</span></a>
<meta property="position" content="1">
</li>
›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://searchnatural.co.uk/seo-course-product/">
<span property="name">SEO Courses and Products</span></a>
<meta property="position" content="2">
</li>
›
<li property="itemListElement" typeof="ListItem">
<span property="name">Google Tag Manager SEO Course</span>
<meta property="position" content="3">
</li>
</ol>
</body>
</html>Microdata Multiple Pathway Breadcrumb Schema
Microdata can also be configured with multiple breadcrumb pathways to reflect your product or page existing in multiple website categories. Here’s how below.
<html>
<head>
<title>Google Tag Manager SEO</title>
</head>
<body>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<span itemprop="name">Google Tag Manager SEO</span></a>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://searchnatural.co.uk/">
<span itemprop="name">Search Natural</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://searchnatural.co.uk/seo-course-product/"
href="https://searchnatural.co.uk/seo-course-product/">
<span itemprop="name">SEO Courses and Products</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://searchnatural.co.uk/seo-course-product/google-tag-manager-seo/">
<span itemprop="name">Google Tag Manager SEO</span></a>
<meta itemprop="position" content="3" />
</li>
</ol>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<span itemprop="name">Google Tag Manager SEO All</span></a>
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://searchnatural.co.uk/all-products/">
<span itemprop="name">All Products</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">Google Tag Manager SEO</span>
<meta itemprop="position" content="2" />
</li>
</ol>
</body>
</html>Check and Validate your Schema Markup
Once you’ve created your schema markup, specific to the pages and breadcrumbs you’d like marked up and given additional visibility to in search engine results, you will want to verify that your schema mark up is working.
Here is how to check whether your schema markup is working and more information about the rich results test tool.
Interested in more Schema?
If you’ve enjoyed this schema markup example, then checkout some of our other content related to schema markup.
Find out more about what product schema markup is and what it can do.
Here is how to write schema markup for your website.
Still undecided about which types of schema you need for your website and pages? Check our schema markup picker tool to help you choose.
Learning how to deploy schema markup across your website will be much faster and easier with our course how to add schema markup to your website.