Breadcrumbs & Breadcrumb Schema
By Matthew Edgar · Last Updated: September 08, 2023
Breadcrumb navigation, like any navigation, is about helping people find their way around a website (wayfinding). By using breadcrumb navigation, you can improve visitors’ wayfinding ability and make for a better overall experience for people using your website. You can also use breadcrumb schema to enhance a page’s listing in search results. But not every website will benefit from breadcrumb navigation. In this article, I’ll answer the following questions to help you decide if breadcrumb navigation and breadcrumb schema are right for your website.
Do I Need Breadcrumb Navigation?
How Complex Is the Website’s Hierarchy?
Breadcrumb navigation is most beneficial on websites that have complex hierarchies, like e-commerce or reference websites. When a website has a more complex hierarchy, there isn’t enough room to display every category and sub-category link in the primary navigation. The breadcrumb navigation offers a way to share more links with visitors while also helping visitors understand where they are on the website.
Britannica’s website uses breadcrumb navigation at the top of the page. This shows readers clearly how the article fits into the website’s hierarchy and gives readers links they can use to navigate elsewhere.
Websites with simpler hierarchies, that are only one or two layers deep, typically don’t benefit as much from breadcrumb navigation. The primary navigation and internal links can make it easy enough for people to navigate through the website.
Do People Need to Move Through the Hierarchy?
Breadcrumb navigation also gives people a way to move through the website’s hierarchy. The more people need to move through the hierarchy, the more beneficial breadcrumb navigation could be. On an e-commerce website, a visitor might be looking at a specific product and the breadcrumb navigation gives visitors an easy option to go to a related category page to see other products like the one they are currently viewing.
REI uses breadcrumb navigation showing the different categories in the website’s hierarchy related to the product currently being viewed. This helps shoppers find their way to related categories where they can find similar products.
Sometimes breadcrumb navigation can facilitate movement from a page to the relevant category page even better than the primary navigation. Unlike the primary navigation, the breadcrumb navigation is specific to each page and the links in the breadcrumb navigation are more relevant to what visitors are interested in.
Wikipedia provides a version of breadcrumb navigation listing an entry’s related categories in the footer. Because an entry is categorized in multiple ways, this navigation lists multiple, related categories. This gives readers a way to find other pages containing information related to the topic they are currently reading about.
Even on a website with a very complex hierarchy, visitors may not want to navigate through the hierarchy. On a news website, people want to read a particular story and aren’t interested in seeking out a category page containing other similar stories. While the breadcrumb navigation could show the hierarchy, it wouldn’t help readers all that much. Instead, visitors are interested in moving along to other news stories. Showing related stories or including internal links in the article are better means of helping people navigate through the website.
Do You Need to Indicate the Page’s Topic More Clearly?
Breadcrumb navigation can also be used to indicate where somebody currently is on the website, like showing “You Are Here” on a map. As a result, breadcrumb navigation can have tremendous value even if nobody ever clicks or taps on the links in that breadcrumb navigation.
Yelp’s breadcrumb navigation helps show visitors see more details about the listing, including where the business is located and what type of business this is. This helps the visitor 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, it typically makes sense to use schema markup to communicate that breadcrumb navigation to search engine robots. 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.
REI’s website uses breadcrumb schema. Instead of showing the URL in the listing, Google uses the information provided in the breadcrumb schema for the URL.
This is helpful for websites with less friendly URLs. In the example shown above, REI’s URL is /product/216571/rei-co-op-flash-55-pack-mens. This URL isn’t terrible but the URL does contain some irrelevant information, like the SKU or the word “product”. The breadcrumb schema shows more relevant information with the category names. By showing this more relevant information in search results, Google helps potential visitors better understand where this page exists on REI’s website. This may encourage more people to click through to the page.
Google won’t always use breadcrumb schema even if it is provided. Britannica also provides breadcrumb schema but Google does not show this in search results, choosing to show the actual URL (/biography/Vinton-Cerf in this example).
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 called BreadcrumbList. where the items listed are the pages in your website’s hierarchy.
Here is a simple example showing a home page, a category page, and a product page.
<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>
The breadcrumb navigation is contained with the itemListElement property. Each page is contained in a separate ListItem type nested under itemListElement. The itemListElement property has additional properties nested underneath it describing that item in the list:
- The position number indicates where this item exists in the hierarchy. Lists start at 0. So, in this example, the homepage is at position 0.
- The name property indicates the name of this level of the hierarchy. Position 0 is the Home page. The item at Position 1 is the Widgets page.
- The item property contains the URL to this particular item in the hierarchy.
Notes When Using Breadcrumb Schema
When using breadcrumb schema, 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.
It is also important to show the breadcrumb navigation on both mobile and desktop devices. Google crawls most websites primarily from a mobile device, so not showing the breadcrumb navigation or the breadcrumb schema on the mobile website means Google may not find it on the website. Because Google can crawl from desktop devices too, you want to maintain equivalency between both mobile and desktop websites.
Final Thoughts
Start by deciding if breadcrumb navigation could help the people visiting your website. Will that breadcrumb navigation help people better understand and use your content? Will the breadcrumb navigation help visitors move around the website? Will the breadcrumb navigation help visitors understand where they are on the website?
If you do use breadcrumb navigation on your website, it typically makes sense to also use breadcrumb schema. People can typically benefit from seeing the breadcrumb in search results instead of seeing the URL. That is especially true if your URLs contain less helpful information. Keep in mind that Google will not always use breadcrumb schema in search results.
If you need help deciding if breadcrumb navigation is right for your visitors or need help implementing breadcrumb schema, please contact me.