Breadcrumbs & Breadcrumb Schema
By Matthew Edgar · Last Updated: April 20, 2021
Breadcrumb navigation, like any navigation, is about helping people find their way around a website (wayfinding). By using breadcrumb navigation, you can improve a visitors’ wayfinding ability and make for a better overall experience for people using your website. But not every website will benefit from breadcrumb navigation. How do you know if breadcrumb navigation could help improve wayfinding on your website? As a related question, if you do use a breadcrumb navigation, should you mark this navigation up with breadcrumb schema?
Do I Need Breadcrumb Navigation?
How Complex Is the Website’s Hierarchy?
Breadcrumb navigation is most commonly found on and most beneficial for websites that have complex (or dense) hierarchies, like ecommerce or reference websites that have many layers of categories and sub-categories. The more layers your website’s hierarchy has, the more likely it is not everything can be represented in a website’s primary navigation–there just isn’t enough room to display every category and sub-category. For these websites, breadcrumb navigation offers a way to show more of the layers.
However, for websites with simpler hierarchies, that are only one or two layers deep, you typically don’t need to use breadcrumb navigation. The primary navigation and internal links can make it easy enough for people to navigate through the website. Elementive’s website is a good example of this. We have only a few pages and those pages are presented in a flat hierarchy, so no breadcrumb is required since every page can be listed in the website’s main navigation.
Do People Need to Move Through the Hierarchy?
However, it isn’t just about the complexity of the website’s hierarchy; the hierarchy complexity only matters if people want to or need to move through this hierarchy. Think about an ecommerce website where a visitor might be looking at a specific product and next wants to go to the category page to see other products like it. In this example, the breadcrumb navigation can help facilitate that movement from the product page to the category page. The same could be true for a reference website where visitors might want to view a category page to see other pages similar to the page they are currently reading.
Likely, the breadcrumb can facilitate that movement from a page to the relevant category page even better than the primary navigation could. Even if the primary navigation was able to list all of the categories or sub-categories, it might not be clear to the visitor which category would contain other similar products or pages they want to see. That is especially true for pages that could be categorized in multiple ways. The website’s breadcrumb navigation shows the visitor the specific category that contains things like the page they are viewing, making it easier for the visitor to find the category page listing other related information.
Of course, even on a website with a very complex hierarchy, visitors may not want to view category pages and navigate through the hierarchy. For example, on a news website, visitors may only want to read the particular story and aren’t interested in seeking out the category or sub-category containing other similar stories. As a result, while the breadcrumb navigation could show the hierarchy and indicate exactly how this news story was categorized, it wouldn’t be much help. Instead, maybe visitors are interested in moving along to other news stories. In that case, it is more important to prioritize related stories or internal links to help people navigate through the website as opposed to helping people move through the layers of categories on the website.
Do You Need to Indicate the Page’s Topic More Clearly?
Breadcrumb navigation isn’t just about facilitating movement through the hierarchy. It can also be used to indicate where somebody currently is on the website (similar to the “You Are Here” on maps). As a result, breadcrumb navigation can have tremendous value even if nobody ever clicks or taps on the links in that breadcrumb navigation. Let’s revisit that news website example where people don’t want to click or tap on the breadcrumb to view category or sub-category pages. Despite the lack of clicking or tapping, the reader may see the breadcrumb navigation and the text in the navigation can help clue the reader into what topics will be covered in this article. This would help the reader gain an understanding of the page’s context, especially if they are only skimming the page and not reading it closely.
Should I Use Breadcrumb Schema?
If you’ve decided to use breadcrumb navigation on your website, another consideration is if you should mark that breadcrumb navigation up with schema markup. The biggest advantage of marking the navigation up with schema is that you can adjust how this page is listed in search results. Instead of Google displaying the website’s URL in a search result, the search result will show the website’s hierarchy.
This is helpful for websites with uglier or unfriendly URL structures. In the example shown above, Target’s URLs aren’t terrible but the URL doesn’t convey as much information as the website’s hierarchy does and it doesn’t convey that information as simply. By viewing the breadcrumb, the SERP tells me where this page exists on Target’s website. Given this additional information, the breadcrumb schema can help improve clicks from search results.
However, if your website’s URLs convey sufficient information already, then you likely don’t need to use the breadcrumb schema to improve your search result listings. For example, Elementive’s website URLs are short and convey the needed information. As a result, we don’t need to alter how our URLs are displayed in search results by using breadcrumb schema:
How To Implement Breadcrumb Schema
Breadcrumb schema is a type of list where the items listed are the pages in your website’s hierarchy. Let’s take a simple example showing a home page, a category page, and a product page. Each page is contained in a separate ListItem type and the position number is noted indicating where this item exists in the hierarchy. Note that this list starts at 0 and the home page is assumed to be at position 0.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 0,
"name": "Home",
"item": "https://www.agreatwebsite.com/"
},{
"@type": "ListItem",
"position": 1,
"name": "Widgets",
"item": "https://www.agreatwebsite.com/shop/widgets/"
},{
"@type": "ListItem",
"position": 2,
"name": "Blue Widget",
"item": "https://www.agreatwebsite.com/items/widgets-512?color=blue"
}]
}
</script>
Note: If you are going to use breadcrumb schema, you want to make sure that an equivalent breadcrumb navigation is presented on the page itself where humans can see it. The content of the breadcrumb presented in schema and the breadcrumb viewable to humans should match. For example, you don’t want to list extra URLs in the schema version of your breadcrumb. If the breadcrumb schema doesn’t match the viewable breadcrumb, or if you only have the breadcrumb schema, that could look like you are trying to manipulate Google’s bots in a malicious way and that can get your website in trouble.
Final Thoughts
Whether you should use breadcrumb or not depends on if visitors need the breadcrumb. Will that breadcrumb navigation help people better understand and use your content? This is also true of using schema markup if you do have breadcrumbs displayed on your website. Will people benefit from seeing the breadcrumb in search results instead of seeing the URL? If you need help answering these questions and deciding if breadcrumb navigation is right for your visitors, please contact me.
