Categories
SEO

3 Easy Steps to Implementing JSON Breadcrumb Schema Code

In my opinion, one of the biggest struggles of search engines has been to understand 2 things: context, and intent. We all know that they have come a long way in that, for instance, deciphering what the page may be about based on the h1, but even today, they are not entirely up to speed on how humans interact, and most importantly, what they expect out of those interactions. In my mind, search engines will always sort of play catch-up to understanding the language behavior of humans.

And that makes sense, because primarily, it is based on machine learning. That said, one of the most significant factors in search engines coming very close to real intentions, real expectations, and real context from users’ search queries is the collaboration between Google, Yandex, Bing, and Yahoo in creating schema.org.

Schema.org became a game changer! All of a sudden, we now had a way to tell search engines about what exactly our page, or what exactly different elements on our pages are, for example, recipes, price, etc. (before it was relied on nothing but crawling). This was a win-win situation because it allowed users to signal to search engines about the relevancy of their page. In return, search engines more thoroughly assimilated the context of that page for their SERPS. For example, if a rating score of a product is 8 out of 10, the users can see that on your page. But search engines may not necessarily get that, unless you implement a rating schema code.

There are tons and tons of markups out there, but one of the important ones, and quite easy to be frank, is implementing JSON Breadcrumb Schema. However, before we get into the details, let’s do a quick FAQ about breadcrumbs.

What Are Breadcrumbs?

Breadcrumbs are trails on a web page that does 2 things. Shows the users where they are, and more importantly, from a technical standpoint, tells the search engines about the pages’ site architecture. Enabling search engines to understand your site architecture is beneficial for your SEO performance. To understand this visually, see screenshot below: Breadcrumb Explanation

What Are the Different Schema Methodologies You Can Use to Implement This Code?

Different organizations have different processes, and coding methodologies in place. In light of that, Search Engines allow for 3 different schema codes
1. JSON-LD
2. RDFa
3. Microdata
With those laid out, it is said that search engines in general, prefer JSON-LD.

Now that we’ve laid out all the background and context about breadcrumbs, let’s start on learning to Implement JSON Breadcrumb Schema Code.

Step 1: Where Exactly Does This Code Go?

Before implementing json breadcrumb schema, the first and foremost thing to keep in mind is that no matter what, you always need to place your schema code in the <head></head> section. It doesn’t necessarily need to be the first thing inside your head, in fact, not even recommended, but make sure it’s within <head></head>

Step 2: Syntax & Example

The code below will give you an idea of the syntax and logic you’d need to follow using JSON code. To get you started, it’s only using 3 breadcrumbs, but you can follow the pattern, if you have more than 3.

Syntax:
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "name of your first breadcrumb",
        "item": "https://url-of-the-first-breadcrumb.com"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "name of your second breadcrumb",
        "item": "https://url-of-the-second-breadcrumb.com"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "so on and so forth"
      }]
    }
    </script>


What the actual code would be for https://feedthecuriosity.com/seo/what-is-the-importance-of-h1-tag-in-seo/
<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://feedthecuriosity.com/"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "SEO",
        "item": "https://feedthecuriosity.com/seo/"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "What Is the Importance of H1 Tag in SEO?"
      }]
    }
    </script>

Step 3: Test

Google has a rich snippets testing tool, where you can plug in a code to see what are the kinds of rich results your code is eligible for. As an example, you can take any of the codes from the link above, paste it in, and voila, you should see something like below:

Breadcrumb Schema Test

A word of caution: While your code may be fine, it may still not work in the larger context of having it implemented on a page. THE BEST WAY to make sure your code is working properly is to do this:

  1. Follow the 3 steps above.
  2. Then, go to the staging/test URL of the page where this code is implemented.
  3. Go to its source code.
  4. Copy the entire source code in rich snippets testing tool
  5. If, after doing so, you see success, that is when you can confidently say that it’s implemented correctly.

Pasting the code by itself is not the best way to test it. Things could get messed up, or logic could change when that same code is implemented on the page.

Side note: If you’re using WordPress, you may not need to code this in. There are lots of themes that, by default, support breadcrumb schema.

Expert Resources

  1. Google Developers
  2. Schema.org