Breadcrumbs in Web Design: Why They’re Important for UX & SEO

As the famous fairytale goes, Hansel and Gretel left a trail of breadcrumbs behind them as they ventured into the woods so they could find their way out again. While breadcrumbs probably weren’t the best choice, it was a smart tactic. A tactic that is used for the exact same reasons on a well optimised website: to find where you are and where you’ve been. 

In website design, breadcrumbs are a series of hyperlinks that help you navigate the website and show how many clicks away from the home page you are. 

We’re not convinced the Brothers Grimm would have made the best UX Designers (it’s hard to design websites with ink and a quill) but they clearly had the right idea. Breadcrumbs are essential for navigation, especially if you want a great User Experience (UX) on larger websites with a lot of content. They also help search engines understand your site structure and find deep links several clicks away from the home page. In case you’re unfamiliar with what they look like, here’s an example:

Breadcrumbs for UX

We’ve all had those moments when surfing the internet when we wonder where on earth you are on the website, how to get back to that page you were on, asking yourself where that thing was you just read. But with breadcrumbs, you can avoid falling down this rabbit hole and easily navigate through a site. 

A breadcrumb will show you what page you are currently on and the pages you clicked on to get there. “Can’t I just click the back button?” you may ask. Well, yes, but this isn’t ideal for a few reasons.

Reducing bounce rates: A breadcrumb can keep users from heading back to Google and landing on another website by making it easier to navigate to and from pages within your own site. This means users are more likely to stay on your site longer. Ka-ching!

Contextualising content:  Google uses breadcrumbs to categorize and contextualise content. They’ve even added breadcrumbs to the results pages to help users understand where that page is on your site before they even click. 

Breadcrumbs for SEO

Since the introduction of breadcrumbs in 2009, many SEO professionals have speculated that breadcrumb navigation links could be a ranking factor. 

Google has not actually ever confirmed whether breadcrumbs are a ranking factor; however, they do recommend that website owners and developers implement breadcrumbs. Why? Google’s John Mueller tweeted that Google uses breadcrumbs for crawling in order to find internal links and for rich results and noted that the location of the breadcrumbs on a webpage “doesn’t matter for SEO,” meaning you could put them anywhere on the page and it wouldn’t matter, as long as they appear. 

So essentially, there is no flat ‘yes’ or ‘no’ answer to the importance of breadcrumbs for SEO, but good user experience IS a ranking factor. Therefore, while having a clearly visible breadcrumb might not necessarily shoot you to the top of the page, it will certainly help users navigate your site more easily.

Instead of looking at breadcrumbs from a UX vs SEO perspective, think of them as a team that relies on each other equally. 

Types of Breadcrumbs

Just to make things a little more complex, there are a few different types of breadcrumbs. 

Hierarchy-based (aka Location-based)

This is the most common type of breadcrumb that tell users where they are in the site structure and how to get back to the homepage. For example: Home > Resources > SEO Guide

Attribute-based

Attribute-based breadcrumbs are most commonly used on eCommerce sites to show what attributes the user has clicked. For example: Home > Shoes > Hiking > Womens

History-Based 

This type shows users what other pages on the site they have visited, similar to browser history. For example, if you were searching for SEO news and read three different articles, the breadcrumbs might look like this: Home > SEO article 1 > SEO article 2 > Current page

Depending on your website, you may have different breadcrumbs or a combination of them. We can advise what type of breadcrumb is best for your needs. 

Tips for Implementing Breadcrumbs

1. They should be easy to see but not intrude on the usability or design of the page. Opt for an easy-to-read font, size and colour that isn’t too ‘in your face.’ 
2. While location doesn’t matter, you want them to be easy to find. Positioning them at the top of the page, beneath the hero image, or just above the H1 title is ideal. 
3. Don’t just replicate the main navigation menu; if you only have a few pages on the site, a breadcrumb may not be necessary. They are best when you have a lot of pages or content that is more than one click deep. 
4. Choose the right breadcrumb type. This will depend on whether you’re an eCommerce site, an informational site, a portfolio site or a professional services site etc. 

If you want to improve the user experience of your website, breadcrumbs should definitely be part of the answer. Speak to our team of SEO and web design experts today to find out more.