How To: How to Implement BreadcrumbList Schema Markup

TL;DR:
BreadcrumbList schema describes a page’s breadcrumb trail in a machine-readable format, helping search engines understand where the page sits within your website hierarchy. It can also be used by Google when displaying breadcrumb paths in search results. This guide explains the required properties, shows JSON-LD and HTML microdata implementations, and covers how to test your breadcrumb structured data.

Why use BreadcrumbList schema?

Breadcrumbs help users understand where a page sits within a website and navigate back through its hierarchy.

You can also describe that breadcrumb trail to search engines using BreadcrumbList structured data.

Google can use this markup to understand a page’s position within your site hierarchy and represent that path in search results. A typical breadcrumb might look something like:

Home → Services → Technical SEO → Structured Data

In this guide I’ll show you how BreadcrumbList schema works, the properties you need to include, how to implement it using JSON-LD or HTML markup, and how to test that Google can read it correctly.

What Is A Breadcrumb Trail?

A breadcrumb trail is a series of navigational links that shows users where the current page sits within a website’s hierarchy.

For example:

Home → Services → Technical SEO → Structured Data

Each step gives the user a way to navigate back to a broader section of the site without having to rely on the main navigation.

Breadcrumbs are particularly useful on larger websites such as ecommerce sites. If someone lands directly on a product page from Google, the breadcrumb trail can help them navigate back through the relevant subcategory and category to find similar products.

It’s important to distinguish the visible breadcrumb trail from BreadcrumbList schema. The breadcrumb is the navigation a visitor sees and uses on the page. Breadcrumb structured data describes that hierarchy in a machine-readable format that search engines can understand.

What is BreadcrumbList schema?

BreadcrumbList is a Schema.org structured data type used to describe a breadcrumb trail in a machine-readable format.

Each breadcrumb is represented as a ListItem, with a position showing its order in the trail and a name describing that step. The breadcrumb can also include the URL associated with that step using the item property.

For example, a breadcrumb trail such as:

Home → Services → Structured Data

can be represented as a BreadcrumbList containing three ListItem elements with positions 1, 2 and 3.

This helps Google understand how the current page fits into the hierarchy of your website. Google can then use that information when displaying the page’s breadcrumb path in search results.

Here’s an example of how one of my pages appeared in Google when its breadcrumb structured data was being used in the search result:

Breadcrumb implementation is also something I check when carrying out website SEO audits, particularly on larger sites where understanding the relationship between categories, subcategories and individual pages is important.

What are the SEO benefits of BreadcrumbList schema?

Breadcrumbs can help both users and search engines understand how a page fits within the wider structure of a website.

For users, a visible breadcrumb trail provides another way to navigate between related sections of the site. For search engines, BreadcrumbList structured data explicitly describes the relationship between those pages and can be used when presenting breadcrumb information in search results.

I’ve also seen cases where changes to breadcrumb markup have coincided with substantial changes in organic click-through rate, although I wouldn’t assume that implementing breadcrumb schema will automatically increase CTR.

One example came from a site I worked on where the existing structured data was inadvertently removed when a new website template was launched.

The site’s search appearance changed, and at the same time I saw a noticeable decline in organic CTR. The first arrow below marks the launch of the new template, while the second marks when the structured data issue was corrected:

During that period, CTR fell from around 6.6% to 4.1%, despite rankings remaining relatively stable. It subsequently fell as low as 3.5% before recovering to around 7% within three weeks of the issue being fixed.

That’s an interesting correlation and was one of the reasons the missing markup caught my attention, but I wouldn’t use it as evidence that breadcrumb schema alone caused the CTR changes. Search appearance, query mix and other factors can all affect click-through rate.

I saw a similar relationship between structured data changes and search performance in this schema case study.

Breadcrumbs are also only one type of structured data you might use across a site. Depending on the page and organisation, other relevant types can include Organisation schema.

How to implement BreadcrumbList schema

There are several ways to add breadcrumb structured data to a page. The important part is that the markup describes the breadcrumb hierarchy accurately and uses the correct BreadcrumbList and ListItem properties.

The main properties you’ll see in the examples below are:

• itemListElement — contains the individual breadcrumbs in the list
  
• ListItem — represents each step in the breadcrumb trail
  
• position — defines the order of each breadcrumb
  
• name — provides the name of the breadcrumb
  
• item — provides the URL represented by that breadcrumb

I’ll start with JSON-LD, as it’s generally the easiest implementation to understand and maintain, before showing the equivalent markup within HTML.

BreadcrumbList JSON-LD example

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

In this example, itemListElement contains three ListItem objects representing the breadcrumb trail.

Each ListItem has a position and name. The preceding breadcrumbs also have an item containing the URL for that step in the trail.

Notice that the final breadcrumb doesn’t need an item URL. It represents the current page, so its name and position are sufficient for Google’s breadcrumb implementation.

BreadcrumbList schema using HTML microdata

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

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

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

  <li itemprop="itemListElement"
      itemscope
      itemtype="https://schema.org/ListItem">
    <span itemprop="name">Structured Data</span>
    <meta itemprop="position" content="3">
  </li>

</ul>

This describes the same breadcrumb hierarchy as the JSON-LD example, but the structured data properties are added directly to the visible HTML breadcrumb navigation.

BreadcrumbList defines the overall list, while each breadcrumb is marked as a ListItem using itemListElement. The position values then establish the order of the breadcrumbs.

You don’t need to implement both this and the JSON-LD example for the same breadcrumb trail. They’re two different ways of describing the same information.

Whichever implementation method you choose, make sure the structured data represents the breadcrumb hierarchy users would reasonably use to navigate the site. Don’t simply generate breadcrumb levels from every directory in the URL if those directories don’t represent the site’s actual navigation hierarchy.

BreadcrumbList schema in WordPress

If you’re using WordPress, check whether your SEO plugin, theme or existing structured data plugin already outputs BreadcrumbList schema before adding anything manually.

Many WordPress setups can generate both the visible breadcrumb navigation and the corresponding structured data automatically. If yours does, make sure the breadcrumb hierarchy it generates accurately represents your site structure rather than adding a second implementation.

You can inspect the generated markup and test a page after implementation using Google’s structured data testing tools, which I’ll cover below.

BreadcrumbList schema in Magento

Magento sites commonly use breadcrumbs across category and product pages, making BreadcrumbList particularly relevant for ecommerce websites.

As with WordPress, first check what your theme, extensions or existing structured data implementation already generates. You don’t want to add another BreadcrumbList implementation if valid breadcrumb structured data is already being output.

For a product page, for example, the breadcrumb hierarchy might represent:

Home → Category → Subcategory → Product

The important part isn’t which Magento extension generates the markup, but whether the resulting BreadcrumbList accurately describes the breadcrumb trail and contains the appropriate ListItem, position, name and item properties.

How to test BreadcrumbList schema

Once you’ve implemented your breadcrumb structured data, test it before assuming everything is working correctly.

Google’s Rich Results Test can test either a live URL or a code snippet and show whether Google detects a valid breadcrumb item. Fix any critical errors it identifies before deploying the markup more widely.

Once the markup is live, you can also use URL Inspection in Google Search Console to check how Google sees the page and request recrawling after making significant changes. Google recommends monitoring the relevant structured data reports in Search Console after deployment and after template or code changes.

Don’t assume that valid BreadcrumbList markup guarantees Google will display breadcrumbs exactly as you’ve specified them. Structured data makes a page eligible for supported search features, but Google doesn’t guarantee that those features will always be shown.

If your markup validates correctly but you’re still having problems with organic visibility, there may be other SEO issues that need investigating.

BreadcrumbList schema checklist

Before you’re finished, check that:

• the breadcrumb represents a logical user path through the site
  
• you’re using BreadcrumbList with ordered ListItem elements
  
• each breadcrumb has the correct position and name
  
• the item URL points to the correct page where required
  
• the markup accurately reflects the breadcrumb hierarchy
  
• the implementation passes Google’s Rich Results Test

---