Breadcrumbs: What They Are and Why Your Online Store Needs Them

One tool that can meaningfully improve user experience (UX) and boost SEO performance is breadcrumbs. Find out how breadcrumb navigation can improve the usability of your online store, and what to keep in mind to avoid the most common mistakes when implementing it.

Table of contents

• Breadcrumbs - what are they?
• Types of breadcrumbs
  • Location-based breadcrumbs
  • Attribute-based breadcrumbs
  • Path-history breadcrumbs
• Breadcrumb navigation in an online store - why it's worth it
  • Improving user experience
  • How do breadcrumbs affect SEO?
• When should you use breadcrumb navigation?
• What to watch out for when implementing breadcrumbs
  • Organized categories and subcategories
  • The size of the breadcrumb menu
  • Breadcrumb labels
• Breadcrumb navigation in an online store - summary

Breadcrumbs - what are they?

Breadcrumbs are also known as breadcrumb navigation or a breadcrumb trail. Their role is to show users where they currently are within a website and to make navigating the site easier. Breadcrumbs usually appear at the top of the page, below the main menu, taking the form of a horizontal bar with links to individual pages. They're sometimes labeled with phrases like "You are here:". The word "breadcrumbs" is a literal reference to crumbs of bread. Why that name? Just as scattered crumbs mark the way home in the fairy tale "Hansel and Gretel," breadcrumbs in web navigation help users find their way through a site's structure.

Types of breadcrumbs

There are three types of breadcrumbs, which differ in how they present a user's path through a website. The most common are:

Location-based breadcrumbs

This is the most common type of breadcrumb. It informs the user of their current location on the site while also showing the site's overall hierarchy. It's closely tied to categories in an online store and displays the exact path from general to specific, e.g.: "Home > Category > Subcategory > Product."

Attribute-based breadcrumbs

Very common in online stores and classifieds sites. These breadcrumbs adapt to the user's actions. They appear based on selected search filters that don't correspond directly to a category or subcategory (such as color, size, material, etc.). They help indicate which part of the store a given product belongs to. They might look something like: Home > Category > Subcategory > Attribute 1, e.g. brand > Attribute 2, e.g. color > Product.

Path-history breadcrumbs

These show the exact path a visitor took through the store. Since that path is often somewhat chaotic, this type of breadcrumb can end up looking inconsistent, overly complex, and simply unnecessary. As a result, it's the least common type of breadcrumb navigation, essentially just replacing the browser's "back" and "forward" buttons.

Breadcrumb navigation in an online store - why it's worth it

Having the right breadcrumbs in an online store can bring a range of benefits, for both users and the store owner. Breadcrumb navigation has a real impact on both SEO and site UX.

Improving user experience

Properly implemented breadcrumb navigation significantly eases navigation on a site, which is one of the most important elements of user experience in an online store. Clickable breadcrumbs let users move quickly between pages, return to another section, and find the products or information they need. This helps users reach their goal more efficiently, which increases the odds of completing a purchase.

Breadcrumb navigation can also help increase the time spent on a site and boost conversion. As users click through the breadcrumbs, they can more easily discover new pages and products that might interest them.

How do breadcrumbs affect SEO?

Breadcrumbs make life easier not just for users, but for crawlers as well. By using breadcrumbs, you boost the visibility of your keywords and give search engines valuable information about the content of individual pages. This can also help speed up indexing. Breadcrumbs show up not only on the page itself, but also in search results. That means your page has a better chance of appearing as an answer to several different queries in search.

Just as importantly, breadcrumb navigation is a form of internal linking, which also affects a site's visibility. Breadcrumbs can precisely show the relationships between pages and the keywords assigned to them.

How do you implement breadcrumbs with schema.org structured data?

Beyond improving navigation and user experience, breadcrumbs can also deliver measurable SEO benefits - provided they're implemented correctly. The key here is using structured data: snippets of code that help search engines understand a site's hierarchy. The most commonly used standard here is schema.org, specifically the BreadcrumbList type.

By implementing schema.org markup, Google's crawlers can better interpret the structure of your site, which can result in breadcrumbs being displayed directly in search results (so-called rich snippets). That, in turn, translates into a higher click-through rate and better visibility in Google. The implementation isn't complicated - you simply add a snippet of code (usually in JSON-LD format) to the page's <head> section, or right before the closing <body> tag.

When should you use breadcrumb navigation?

You might be wondering whether breadcrumbs should appear on every website. Absolutely not. There are simple sites with little content and few pages where extra "signposts" in the form of breadcrumbs aren't needed. It's a different story for sites with a deep hierarchy - for example, extensive online stores or informational sites containing a large number of pages. In those cases, breadcrumbs can clearly make it easier to navigate and move between different categories. The conclusion is simple - the deeper a site's hierarchy, the more useful breadcrumbs become.

That doesn't mean breadcrumbs need to appear on every single page, even on the most extensive sites. If only one click separates the homepage from the destination page, breadcrumbs are unnecessary there (e.g. Home > Contact).

What to watch out for when implementing breadcrumbs

We already know what benefits breadcrumbs can bring to an online store. But to make sure your implementation work pays off, keep a few important points in mind as you roll them out.

Organized categories and subcategories

Before implementing breadcrumbs in an online store, get your product categories in order. Give them keyword-based names, build a logical hierarchy, and assign the right products to each one. This is a crucial step that will affect not only how effective your breadcrumb navigation is, but also the overall experience users have while browsing your store. Check out which mistakes to avoid when building categories in an online store.

The size of the breadcrumb menu

Breadcrumb navigation is a supporting element, so it should never be larger than the main menu. Breadcrumbs should be scaled appropriately to fit the overall layout of the page and shouldn't overshadow more important elements. Breadcrumbs that are too large can overwhelm users and make the site harder to use. Pay particular attention to this when designing the mobile version of your store, where screen space is tight.

Some websites have very complex structures, which can lead to excessive detail and an overgrown breadcrumb menu. Avoid this, and aim for breadcrumbs that offer simple, clear cues about location on the site. Also remember that users should be able to click every element of the path except the address of the page they're currently on.

Breadcrumb labels

Breadcrumb navigation shouldn't display full URLs. Instead, it should focus on keywords and short category or section names, so users can easily understand where they are and how to get back to previous pages. At the same time, breadcrumb labels shouldn't just repeat the names used in the site's main menu.

Breadcrumb navigation in an online store - summary

Breadcrumbs are a small element of a website that can have a significant impact on its visibility and functionality. In e-commerce, breadcrumb navigation is a step toward better user experience and more effective SEO. It supports internal linking, affects indexing, and adds value to a site in the eyes of search engines. For users, it means easier, faster navigation, which can help increase conversion, lower bounce rates, and extend time spent on the site.

While adding breadcrumbs to every page isn't essential, they'll be a useful tool for most online stores. What matters is adapting your breadcrumb navigation to your audience's needs and your site's layout, to ensure the best possible user experience.