JSON-LD BREADCRUMB SCHEMA GENERATOR

What is a Breadcrumb List Scheme?

If you apply schema markup to your continuous list of sitelinks, Google will use this to categorize the data provided and use it to refine your search results.

For example, the structured data markup page on this site has the following appearance on the SERP (search engine results page):

Without this mark-up, your search list will appear only as page URLs, for example:

What are the Benefits of a Breadcrumb Scheme?

Having a link-ordered scheme can have a big impact on the Click-Through Rate (CTR) of your site's pages from search. It's entirely possible for your site to steal clicks from pages ranked above it if you have breadcrumb markup and your competitors don't.

I've previously worked on a site that accidentally lost its markup when a new site template was implemented without a schema. Thus, their list loses its enhanced appearance until this issue is resolved.

You can see in the search analysis screengrab below their impact on CTR - the first arrow indicates when the new site template went live, while the second shows when the problem was resolved.

As you can see, CTR (and then traffic) took a hit even though the site maintained its ranking. It fell from 6.6% to 4.1% on a daily basis while slowly recovering from 3.5% when it improved back to 7% in 3 weeks.

As usual with search engine optimization, performance quickly degrades when problems first appear, and only recovers relatively slowly once they are resolved.

While CTR may or may not be a direct ranking factor, its impact on sites with potential impressions and clicks like the one in the screenshot above means that increasing search listings via schema mark-up is not an opportunity, not to be missed.

Example of How to Apply a Breadcrumb List Scheme

A breadcrumb list schema can be implemented in several ways. Make sure to check the official markup page for a list of links and a list of items to get a better understanding of the following code samples:

Via HTML

HTML link sequence items that are not optimized usually appear as follows:

            
              <ul id="breadcrumblist">
                 <li><a href="https://cmlabs.co/">Home</a>/</li>
                 <li><a href="https://cmlabs.co/about-us/">About Us</a>/</li>
               </ul>
            
          

Items:

The key elements to be implemented on the code are:

Breadcrumb List Optimised

• Item List Element

List Item

• 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://cmlabs.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://cmlabs.co/about-us/"><span itemprop="name">About Us</span></a><meta itemprop="position" content="2" />/</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://cmlabs.co/",
                    "name": "Home"
                  }
                },{
                  "@type": "ListItem",
                  "position": 2,
                  "item": {
                    "@id": "https://cmlabs.co/about-us/",
                    "name": "About Us"
                  }
                }]
              }
              </script>
            
          

What Happens After the Schema Is Implemented?

Once implemented, you can test your implementation at the page or code level using Google's Rich Snippet Testing Tool. Once live, you can ask Google to crawl your modified page - once indexed, watch your CTR and traffic levels soar.