Logo SEO Tools   for Writers for Webmaster
Early detection of anomalies of Google SERPs
Niche/market monitoring and prioritization
Continues learning of on-going lifetime risk in keyword
Changing the way you receive insight through tools and analyitcs

JSON-LD BREADCRUMB SCHEMA GENERATOR

Show Your Page More Specifically

Breadcrumb Generator

Invalid URL
Invalid URL

In the latest version of JSON LD, we added Breadcrumb Schema Generator. This tool is useful for allowing users to grab clicks from a page that is ranked above it if you have breadcrumb markup and competitors don't. Now users can add schemas. This scheme serves to test your implementation at page or code level with Google's Rich Snippet Testing Tool and ask it to crawl the modified pages of your website. With this tool, you can see your CTR and traffic levels soar.

Updated 15 Mar, 2021

In the latest version of JSON LD, we added Breadcrumb Schema Generator. This tool is useful for allowing users to grab clicks from a page that is ranked above it if you have breadcrumb markup and competitors don't. Now users can add schemas. This scheme serves to test your implementation at page or code level with Google's Rich Snippet Testing Tool and ask it to crawl the modified pages of your website. With this tool, you can see your CTR and traffic levels soar.

Updated 15 Mar, 2021

What Is a Breadcrumb Trace?

You may already know this, but link tracing is applied to websites to assist users in navigating and finding their way around the site using the links at the top of the page, indicating your current position in the site hierarchy.

You can see breadcrumbs in action on every page throughout this website. If you want to navigate back to the main blog index page, simply click "Blog". If you want to go to your home page and find non-blogging content related to technical SEO, click "home" (but wait until you finish reading the rest of this post first).

They are very useful, for example, on e-commerce sites where if you go to a product page by clicking on a search result, you can easily navigate back up through the relevant categories and subcategories to find content similar to your page. landed on.

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):

Informasi Perusahaan - PT CMLABS INDONESIA DIGITAL
CMLABS. PT CMLABS INDONESIA DIGITAL is a company specializing in SEO services, Digital
Marketing and tools to support SEO activities ...

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

Informasi Perusahaan - PT CMLABS INDONESIA DIGITAL
CMLABS. PT CMLABS INDONESIA DIGITAL is a company specializing in SEO services, Digital
Marketing and tools to support SEO activities ...

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.

breadcrumb-instruction

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.

robo-img

Writing Starter Guide

The Search Engine Optimization (SEO) Starter Guide provides best practices to make it easier for search engines to crawl, index, and understand your content.

Explore today?

What’s new on cmlabs JSON-LD BREADCRUMB SCHEMA GENERATOR