Breadcrumb navigation shows users the path they took to delve into your website’s structure and provides an easy way to return to previously visited pages. Thanks to breadcrumbs, users have a chance to find relevant content faster.
Breadcrumbs can also positively affect your SEO rankings and should be included in your internal linking strategy.
Breadcrumbs are a local navigation system that shows the user their location on the website. You can typically find them at the top of the page, right above the title or hero image. They take a form of a small text trail with hyperlinks to previously visited pages, for example, Home > Blog > Knowledge Base.
The name of this type of navigation comes from the German fairy tale of Hansel and Gretel, who found a creative way to avoid getting lost in the woods.
Just like children were scattering breadcrumbs on their path to find their way back home, a website displays digital breadcrumbs enabling the user to return to the home page or chosen category page anytime.
Breadcrumbs are helpful, especially on large websites with hierarchically organized content. They won’t prove necessary on small sites, where all subpages are on the same level, and users can jump to any of them from the home page.
Sometimes, it also makes sense to use breadcrumbs to navigate users through multi-step processes – display steps in ordering product shipment or creating a new account on a platform, allowing the user to go back and make corrections.
It’s no surprise that the goal of breadcrumbs is primarily to improve the user experience. They’re convenient for a person who went deep into the site’s structure and got lost on the way. Should they go too far, they can move back with a single click instead of having to read the entire main menu.
Breadcrumb navigation can positively affect your website’s bounce rate. That’s because it turns out very practical for someone who just entered your page directly from search results.
Thanks to breadcrumbs, the user can quickly find out where they are and whether the page is placed within a category corresponding to the topic of their interest. Therefore they’re more likely to explore further rather than go back to the search results page.
SEO industry articles repeatedly emphasize that Google can display breadcrumb paths as rich results in SERPs, showing the user exactly where they’ll end up on the site after clicking the link. Such appearance attracts users’ attention and encourages them to visit the website.
Not so long ago, you needed to use breadcrumbs and mark them with structure data to obtain this rich result. Currently, however, this is more complicated. In April 2015, Google started automatically breaking down the URLs of pages to display them in breadcrumbs format.
So it’s actually not required to use breadcrumbs and still get that type of rich result. But by using breadcrumbs, you make sure Google displays it in the format you desire. For more information, see this article’s “Implementing Breadcrumb Schema Markup” section.
There is one key aspect to why breadcrumbs are useful from an SEO perspective. Breadcrumbs create an opportunity for additional internal linking, which can improve the crawlability of your website.
With more internal links, your pages are easier to discover and access by Googlebot. Google Search Advocate, John Mueller, confirmed the positive effect of breadcrumbs on crawlability.
Moreover, links used in the breadcrumb navigation can pass PageRank value, according to a tweet by Gary Illyes, Google Webmaster Trends Analyst.
Imagine you run an eCommerce store with different types of tea and accessories for brewing it. There are three distinct types of commonly used breadcrumbs you can apply to your website. Whether you choose to implement just some or all of them depends on your website’s specifics and your users’ needs.
Hierarchy-based or location-based breadcrumbs tell the user their position in the site’s architecture. They start with the most general category and show one of its branches selected by the user. When a regular customer visits your tea store’s website and searches for green teas with dried fruits, their hierarchy-based breadcrumb trail will look like this:
Home > Teas > Green teas > Green teas with dried fruits
If your customer concludes that they prefer pure green tea, they can quickly return to a category page higher up in the hierarchy and branch their search to other products. This breadcrumb navigation type is the most common as users find it very intuitive.
It’s also considered the most effective for SEO purposes, as it’s based on a clear website structure and indexable subpages. While all types of breadcrumbs provide valuable internal links, through hierarchy-based breadcrumbs, Google crawlers not only discover new URLs but also get to know the site architecture better.
Importantly, hierarchy-based breadcrumbs are the easiest to adapt to your indexing strategy. You can find more information on this in the “Breadcrumbs and indexing strategy” section.
Attribute-based or dynamic breadcrumbs are well-suited for an eCommerce site. They’re convenient when a single product belongs to a few separate categories, which is difficult to illustrate with hierarchy-based breadcrumbs.
Imagine that a customer visited your tea store’s website with the thought, “I need a large packet of tea that will be black and strawberry-flavored.” In this scenario, the navigation trail focuses on product attributes rather than page titles and may look like this:
Home > Teas > Packet size > Type > Flavor
Dynamic breadcrumbs can utilize filters provided for the user to narrow their search. Combined with location-based breadcrumbs, they can take on this look:
Home > Teas > Black teas [Size: large], [Flavor: strawberry]
Such breadcrumbs make searching for the right product even easier because users can deactivate filters without changing the category page.
History-based or path-based breadcrumbs are the oldest form of breadcrumbs, and they resemble the Hansel and Gretel story most accurately. They show all the pages the user visited so far, first to last.
If the user came to your site through a blog article on the tradition of brewing yellow tea, then clicked on the link to the featured teapot, and then wanted to see all the teapots available, the history-based breadcrumb trail would look like this:
Yellow tea traditions > Teapot model 1 > Teapots
Websites rarely use history-based breadcrumbs nowadays as they turn chaotic and random in some situations. Nevertheless, they may prove truly useful when combined with hierarchy-based breadcrumbs. In our example, breadcrumbs that merge hierarchy and history can look like this:
< Back \ You’re in: Home > Accessories > Teapots > Teapot model 1
History-based breadcrumbs, in this case, are reduced to a simple but useful back button. The user will know their exact location and still be able to return to the blog post.
While regular breadcrumbs are just a trail of links that helps the user move back from where they started, look-ahead breadcrumbs expand into a list of same-level categories.
When interacting with them, the user can view alternative categories to browse. They can therefore switch to yet unvisited pages. Let’s stick to the example in which you run an online tea shop. Look-ahead breadcrumbs on your website could look like this:
Home > Teas > Black teas
> Green teas
> Yellow teas
> Red teas
> White teas
Since this additional functionality is closely related to the categories and structure of the site, look-ahead breadcrumbs are almost always hierarchy-based.
Researchers from Dalhousie University Halifax in Canada conducted a study in September 2005 to see if this new navigation idea was worth developing. It showed that users appreciate look-ahead breadcrumbs when instructed on their operation.
Twenty-three of twenty-six participants claimed that after volunteering for a study, they retrospectively prefer look-ahead breadcrumbs over the regular ones.
You are free to experiment with look-ahead breadcrumbs on your site, as many pages implement this solution today.
Despite the many benefits they bring, poorly designed breadcrumbs can accentuate a website’s lack of care for the users. How to ensure that this generally helpful tool doesn’t work against you?
Well-designed breadcrumbs are something to be proud of, but you should never make them the primary navigation for your site. Users have their habits, and some of them, despite their convenience, don’t use breadcrumbs.
Breadcrumbs are a local navigation system, while the main menu is the most typical global navigation system. In practical terms, this means that they serve different purposes. The main menu gives users an idea of how big and complex your website is, which they can’t deduce from breadcrumbs alone.
Breadcrumbs should always be subsidiary for the main navigation. While you may think providing users with both options is redundant, it clarifies your site’s architecture. Yet, unfortunately, it’s also possible to go overboard the other way.
Some websites implement separate secondary navigation for lower-level subpages. Such a solution allows limiting the main menu to the most important sections of the site. Only there can the user get to know the content in more detail.
Picture an imaginary online tea store whose main navigation allows the user to visit the main categories of products: teas of various colors, brewing accessories, and honey.
After entering the “Green Teas” category, the user is introduced to the secondary navigation dedicated to this section. Now they can choose between green teas from different countries and plantations – in many cases, this can be a beneficial solution.
However, if the main menu, secondary navigation, and breadcrumbs are placed together side by side, this large number of links will become confusing and unserviceable.
One thing that undoubtedly makes breadcrumbs less practical is if the trail is too long because it loses readability and becomes confusing.
What should you do when there are too many breadcrumbs on a subpage? Move some of them to a new line or replace them with an ellipsis? None of this sounds like a great idea.
A disturbingly long breadcrumbs trail is not a problem in itself but evidence of an ineffective website structure. If you have this problem, ask yourself if you really need so many levels in your hierarchy.
Furthermore, breadcrumbs help spot ineffective and enigmatic category names.
Imagine you run an eCommerce with all sorts of tea. You have a vast knowledge of tea and can describe its taste in a precise way – both of these skills are visible in the way you create your content.
Suppose a potential customer may be looking for a new black tea to try and find it on one of your product pages. There they’ll see the following breadcrumbs trail:
Home > Teas > Black teas > Astringent > Black tea flavor 1
There’s an item that should get your attention. A person unfamiliar with the professional tea vocabulary may not understand what an astringent flavor is. They’re unlikely to browse this unintelligible category and click on the link.
It’s worth considering whether the word “astringent” should describe a separate category of black teas or if it could be simply a tag to distinguish some of them.
Breadcrumbs and indexing strategy
As a form of internal linking, breadcrumbs increase the chance that Google will find and index your pages. Without this, they can’t appear in search results.
But does that mean indexing is always a good thing? Unfortunately, every site can contain some pages of low quality. Their presence in the index is undesirable so that Google would not form a negative opinion about the entire website on their basis. Let’s explore this topic with an example.
Imagine an online tea shop with a search window for stationary sale points. The user can enter their place of residence and check whether they can buy some tea from their favorite brand nearby. They’ll find a few valid addresses for big cities, but if they live in a small village, they’ll see an empty list. Or just one small shop.
If a user decides to visit this shop’s website, their breadcrumbs trail may look like this:
Home > Find our shop > Small village > Small tea shop
The third item links to the page, which is useless from an SEO perspective. It only has the village’s name and a reference to a single sale point.
This type of page shouldn’t waste the Google crawl budget because, as potential spam, it can lower the ranking of the entire page. Therefore, there shouldn’t be any internal links pointing to it. What, then, with breadcrumbs?
There are several solutions to this problem. You could omit the village entirely from the small shop’s breadcrumbs. You could also implement larger regions such as states or counties into the search. Then the user could use breadcrumb navigation to return from the small shop page to the useful sale points list covering the entire region.
The implementation of breadcrumbs is a great opportunity to improve your website’s user experience and make it friendlier to search engine bots. Let’s discuss some challenges you can face when designing a breadcrumb navigation scheme for your site.
For most websites, designing breadcrumbs should revolve around using solutions to which users are already accustomed. Here are some rules you may want to follow:
- Locate your breadcrumbs at the top of a page, just below the primary navigation;
- Always start your breadcrumbs with the home page and end with the currently displayed page;
- Make your breadcrumbs left-aligned;
- Use small and inconspicuous font. Breadcrumbs shouldn’t be the first element to attract the user’s attention on a page.
- When using arrows or greater-than signs to separate links from each other, point them to the right. Although we use breadcrumbs to go back to higher categories, the purpose of arrows is to denote hierarchy.
Good breadcrumbs are subtle. Following the above instructions doesn’t mean, however, that your navigation must look the same as on any other page. You can still do many things to make your website stand out:
- You can replace the popular greater-than signs with slashes, guillemets, or colons, whichever best suits your style;
- You can reject solely text-based navigation and place your links inside simple shapes that emphasize hierarchy and integrate well with the rest of your design;
- In breadcrumbs for multi-step processes, you can label your links with numbers to make it easier for the user to track the procedure.
Implementing breadcrumbs for mobile users may seem like a challenge because, on mobile, every inch of screen space is worth its weight in gold. You don’t want your main content to be pushed down by unnecessarily large navigation. For this reason, some portals give up breadcrumbs in mobile view. It’s a significant detriment to the user because effective navigation is even more critical on small devices.
There are some clever ways to create nifty breadcrumbs for mobile users. You can try:
- Marking the link to the home page with a house emoji;
- Giving users the possibility of sweeping breadcrumbs left to right if the trail is too long;
- Not showing the name of the page the user is on and providing a simple link back to the higher category instead.
Here’s what you can do now: Still unsure of dropping us a line? Read how technical SEO services can help you improve your website.NEXT STEPS
Implementing Breadcrumb Schema Markup
Once you have provided your users with intuitive breadcrumbs, make them clear for search engines as well. For this purpose, you can mark the relevant breadcrumb fragments with structured data. In the following section, we will discuss the benefits and implementation of the BreadcrumbList Schema.
Structured data, which you can implement with Schema Markup or other methods, is additional information for Google that you can put in the code of your website. It can be a massive help for Google bots with understanding the content of your page and bring you some other benefits.
Imagine you own an online tea store and published an instruction for brewing white tea on a product page. You could use structured data to show the search engine which part of the text relates to the water temperature or the brewing time. Google will therefore be able to display your tea brewing advice as a rich result with the temperature and brewing time highlighted.
Thanks to rich results, pages stand out on SERP, which may significantly boost their click-through rate. A rich result type is a Breadcrumb rich snippet showing the user which place in the website structure they’ll go to after clicking on the link.
You may have noticed that for a while now, Google has displayed a form of breadcrumbs for all search snippets, regardless of whether or not the website owners used the breadcrumb structured data. So is including structured data in breadcrumb navigation still necessary?
No. But it grants you some control over what Google will display in your search snippets. If Google can’t find breadcrumbs on your page, it will break down the URL, assuming that it follows a logical structure and reflects your website’s hierarchy. But that’s not always the case; even if it is, URLs are typically less human-oriented than breadcrumbs.
BreadcrumbList schema in your code
Below is an example of applying structured data to a breadcrumbs trail on an online tea store with the following elements: Home > Teas > Black Teas.
{ "@context": "https://schema.org", "@type": "BreadcrumbList",
At the very beginning, we indicated that the format of our structured data is schema markup vocabulary taken from schema.org. Then we defined the container item “BreadcrumbList,” which holds all elements of our breadcrumbs trail.
"itemListElement":
The markup above, “itemListElement,” signals that we are starting to list the individual breadcrumbs in the correct order.
[{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://yourteastore.com" },{ "@type": "ListItem", "position": 2, "name": "Teas", "item": "https://yourteastore.com/teas" },{ "@type": "ListItem", "position": 3, "name": "Black Teas", "item": "https://yourteastore.com/teas/blackteas" }] }
We marked each of the individual breadcrumbs as “ListItem” and described their positions, names, and the links they contain.
Wrapping up
Breadcrumbs are a secondary navigation scheme allowing users to trace their current location on the website. They form a small link path at the very top of the page. We distinguish:
- Hierarchy-based breadcrumbs focused on a site’s architecture;
- Attribute-based breadcrumbs used mainly on eCommerce sites. They focus on the product’s characteristics that may be important for users;
- History-based breadcrumbs focused on a temporal order in which users visited the subpages.
Breadcrumbs enhance the user experience and may lower the bounce rate. They can also contribute to better website visibility in Google Search results by improving internal linking. Supplementing them with structured data can make your site more attractive on the SERP and more understandable for search engine algorithms.
Hi! I’m Bartosz, founder and Head of SEO @ Onely. Thank you for trusting us with your valuable time and I hope that you found the answers to your questions in this blogpost.
In case you are still wondering how to exactly move forward with fixing your website Technical SEO – check out our services page and schedule a free discovery call where we will do all the heavylifting for you.
Hope to talk to you soon!
