June 29, 2022

Breadcrumb Navigation for Better UX and SEO

By: Mary Hiers

Breadcrumbs are a secondary type of website navigation. You have probably used breadcrumb navigation on some of your favorite websites. 

Breadcrumb navigation usually shows up at or near the top of a webpage. Typically, it is a series of category names showing the path you took to arrive at the page.

What Breadcrumb Navigation Looks Like

For example, on an eCommerce website, you might see something like what’s in this screenshot from ThredUP:

The part circled in red indicates that you are not just in the “Handbags” section but specifically the “Crossbody Bags” subsection of Handbags. These are breadcrumbs.

When you add breadcrumbs to a website, you improve user experience (UX). You often enhance your SEO too.

How Breadcrumb Navigation Improves UX

Have you ever found yourself several pages deep in a website with no recollection of how you arrived at your particular page? Suppose you accidentally closed the page. You could grow frustrated when you couldn’t find your way back to where you were.

Breadcrumb navigation offers you two things:

  1. A visual cue showing you the path. Often this is enough to allow you to close the page with confidence you can find the page later. For example, you might think, “I look under ‘Services’ and then ‘Outdoor Services’ to find pool cleaning.”
  2. A path you can use to retrace your way to previous pages. This helps if you need to take a slightly different path next time. You can click back up a level and then look at flexible garden hoses instead of traditional garden hoses, for example.

In short, breadcrumbs make it easier to find your way around a website. They work whether you’re navigating forward, backward, or laterally.

When your website includes breadcrumbs, you alleviate a source of frustration and confusion for your visitors. When they can find their way around more easily, they’re more likely to associate your website with a positive experience.

Breadcrumb Navigation and SEO

Breadcrumb navigation does more than improve UX. It can also help your SEO strategy.

Is breadcrumb navigation a ranking factor in Google’s search algorithm? There’s evidence both for and against it. But it doesn’t really matter much either way.

Even if breadcrumbs aren’t a ranking factor, they improve UX. Better UX helps keep visitors around for longer. This can potentially increase your “time on site” metric and lower your bounce rate.

Moreover, when the breadcrumbs themselves (the actual words in the navigation trail) include important keywords, you help your SEO. As for the links associated with each breadcrumb, Google claims to treat them like any other link.

Three Main Types of Breadcrumbs

Websites generally base their breadcrumb navigation on one of these three factors:

  • Hierarchy
  • Path
  • Attribute

Breadcrumbs Based on Hierarchy

Breadcrumbs based on a hierarchy are the most common type. The breadcrumb trail starts with a broad category and “funnels” you through increasingly specific subcategories until you arrive at the page you want.

If you decide to go elsewhere, you can click on a broader category and navigate from there. This makes sense for websites that have multiple levels of navigation.

Breadcrumbs Based on Path 

Websites may refer to these as “path-based” or “history-based” breadcrumbs. They represent the trail of pages you took to arrive where you are.

Path- or history-based breadcrumbs are essentially a small chunk of your internet history. Their paradigm is similar to:

Three pages ago > Two pages ago > Previous page > This page

Breadcrumbs Based on Attribute

An attribute-based breadcrumb gives you extra information about your page, in the form of the breadcrumbs. These are especially useful when a page falls into more than one category. For example, a particular shoe may be both “athletic shoes” and “Adidas shoes.”

Often, you’ll find this type of breadcrumb on eCommerce sites. They typically indicate which filters you have applied to your on-site search. They usually give you the option to click to get rid of filters you decide you don’t want.

This is a screenshot from Zappos showing an attribute-based breadcrumb structure. The breadcrumbs are the buttons at the top that you can get rid of if you want to change your search.

Does Every Website Need Breadcrumbs?

Not every website needs breadcrumbs. The simpler the site structure, the less need website visitors have for breadcrumbs.

If your website navigation has only one or two levels, it probably doesn’t need them. Likewise, if your website uses a flat site structure, where you can link to any page from the homepage, you probably don’t need breadcrumbs.

But websites that have more than two navigation levels benefit from breadcrumb navigation. 

How to Use Breadcrumb Navigation

You shouldn’t choose to implement breadcrumbs without considering your website and the people who use it.

After concluding that your site would benefit from breadcrumb navigation, choose the type that would work best for your visitors:

  • Hierarchy – a good choice for websites that use increasingly specific categories and subcategories to organize content
  • Path – a good choice for websites where people tend to “wander” or browse in their own way
  • Attribute – great for sites where people search based on a personal collection of attributes they’re searching for

Other Tips for Good Breadcrumbs

  • Consistency: Use consistent naming conventions throughout your site. In other words, if someone wants blue shoes, don’t designate some of your shoes as “azure” unless you group that color as a category under “blue.”
  • Brevity: Keep the text in the breadcrumbs as short as possible.
  • Unobtrusiveness: Make the breadcrumb trail simple, unobtrusive, and above the fold (so people don’t have to scroll down to find it).
  • Keywords: Use keywords in breadcrumb text when you can.
  • Benchmarking: You can split-test and benchmark different breadcrumb wording to see which ones perform best.
  • Appropriateness: Don’t use breadcrumb navigation as a substitute for primary site navigation. It should be secondary and simple.

Breadcrumb navigation is becoming more popular. It helps website visitors orient themselves the way a “You Are Here” map helps theme park visitors know where they are in relation to everything else. 

Breadcrumbs can benefit UX, navigation, and SEO. Choosing the right type of breadcrumb navigation and following best practices when using them makes them even more valuable.

Best Practices Evolve Continually

What makes a website the most effective is always evolving. It’s not easy to keep your website at the forefront of the latest best practices. 

Best Websites can help. The websites we design at Best Websites are built with your target customer in mind, with SEO-enriched content and the features you need to stand out from competitors.

When you meet customer needs and exceed their expectations with an outstanding UX, you achieve your business goals faster. We’d like to help you do that. To find out more, schedule a call with our team. 


Recommendations for
Your Business

It’s tough navigating your website alone. We’re here to help! Chat with one of our website experts.

Pin It on Pinterest

Share This