Breadcrumbs: What Are They and How Can They Improve SEO?

E-commerce websites tend to have some of the most complex structures that can be found online. However, it is important to create an intuitive structure so that navigating your site is as easy as possible for your site’s visitors. Breadcrumbs can help you with this. In this article, you’ll discover what breadcrumbs are, how they work, and how they improve SEO.

What are breadcrumbs?

Breadcrumbs are a visual representation of where the user is on the website, particularly within the hierarchy of the site.

The term breadcrumb derives from the tale of Hansel and Gretel: the protagonists of the story laid out a trail of breadcrumbs in order to find their way home. Similarly, breadcrumbs on a website allow the user to orient themselves while browsing a website by letting them see the “trail” of categories that lead up to the page they are on.

Breadcrumbs are placed at the top of the page. In online stores, they usually look something like this:

At the top of the page, users can see the product categories that this wine falls under. This helps them orientate themselves and work their way "backwards" (Source: Millesima)

Breadcrumbs are especially useful on sites that have a large number of categories and subcategories. As a general rule, online stores tend to fall into this group, especially when they carry a wide range of products.

What are breadcrumbs for?

It might seem like something as low-key as breadcrumbs shouldn't play a big role when it comes to e-commerce traffic or conversions, but the truth is that breadcrumbs are very useful for both your visitors and your online shop itself.

Breadcrumbs give users the ability to navigate the pages of your site quickly and easily. For example, they allow the user to go from a product page to a category page with a single click, without having to perform a new search.

When used correctly, breadcrumbs make it easy for your customers to identify which section of the store they are in. In fact, the "path" is always visible at the top of the page, a place that the user always has at their fingertips.

As a result, the main benefit of breadcrumbs for your online store is a better conversion rate. By giving them the ability to easily go back to see other product pages, you increase the likelihood of them making a purchase and simultaneously, lower your bounce rate as they browse around your shop.

In addition, breadcrumbs also have a positive impact on your Google ranking. We'll talk about this more later.

Breadcrumbs: the most frequent mistakes

Shutterstock/Natali Zakharova

There’s no doubt that breadcrumbs can bring many advantages to an e-commerce shop. However, if not used correctly, breadcrumbs could do more harm than good.

Let's look at some cases where the use of breadcrumbs is not ideal:

Sites with very few pages: if you offer a single product or if your catalogue is small, the main menu is sufficient for the user.

Replacing the main menu with breadcrumbs: breadcrumbs are an element that facilitates navigation within a site, but they should not replace the main menu of a site.

Unclear and unorganised hierarchy: the structure of the breadcrumbs should reflect the hierarchy of the site, not the user's browsing history.

Types of breadcrumb navigation

There are 3 types of breadcrumbs that you can implement in your online store.

1. Location-based breadcrumbs

This is the most common type of breadcrumb navigation. Its individual elements are pages organised according to a hierarchy.

In other words, on the left is the home page, the most general and highest page in the hierarchy, while on the right is the most specific.

Similarly to the example at the top of the article, Kelvin Power Tools makes it easy to see what product categories this product falls under. (Source: Kelvin Power Tools)

2. Attribute-based breadcrumbs

This type of breadcrumb is less common, but still useful. Attribute-based breadcrumbs appear after applying filters and are used more frequently in online stores with assortments of products with different variations or technical parameters. The best examples of sites that use this style of breadcrumbs are car auctions/advertisement sites.

Attribute-based breadcrumbs also take page hierarchy into account, making navigation even more accurate.

At Bergzeit, certain product categories include special filters that may be of importance to their audience (Source: Bergzeit)

3. Route-based breadcrumbs

The last type of breadcrumb style is the one that is based on the user's browsing history on the site. In this case, the individual elements do not have a logical and orderly structure, but rather reflect the path the user has taken to get to the page they are currently on.

This type of breadcrumb is undoubtedly the least used. This is most likely the case because its function is already fulfilled by the "back" button, which is used in all browsers.

Also, since users often browse in a "messy" way, the breadcrumbs would take on that look as well. Remember, breadcrumbs should help orientate the user and help them make sense of where they are. For this reason, it is best to avoid the latter type of breadcrumbs.

How to improve SEO with breadcrumbs

Breadcrumbs are also important for SEO - sites that include them have the potential to rank higher in search results. Why?

Internal connection

One of the most obvious benefits of breadcrumbs is strengthening internal linking between individual pages, especially if the individual section or category names included in the breadcrumbs contain keywords that are important to your store.

The more high-quality links to a particular page, the better Google's perception will be, which will improve your rankings.

Clear and legible structure of the site

When determining the position of a particular page in the SERPs, Google also takes the site’s structure into account. In addition to the navigation, breadcrumbs also help make your site clear and readable to both shoppers and search engines.

This transparency is rewarded by the search engine algorithm with a higher ranking.

Recommended reading:
5 Tips for Making Your Website Easier to Navigate

Lower bounce rate

As mentioned above, one of the benefits of breadcrumbs is that your site’s bounce rate decreases. In fact, if a user lands on the wrong product page during their search, they can reach the correct category and other product pages simply by clicking on the breadcrumbs visible at the top of the landing page, rather than closing the page and continuing to search through a search engine.

Bounce rate has a huge impact on SEO. A high bounce rate is a sign to the search engine that the site is of low quality or that the user has not found what they were looking for. Breadcrumbs help solve this problem.

Better user experience

This point is obvious: breadcrumbs make it easy for users to find what they are looking for in an online store. This equates to a better user experience, something that Google greatly appreciates.

Clearer results in SERPs

First impressions are very important, even for Google search results.

Breadcrumbs in your structured data can change the appearance of the page in the SERPs. They appear above the result giving the user an idea of the content of the page and its position within the structure of the site. The individual elements of the breadcrumbs are separated with the ">" character:

💡 Although Google can generate breadcrumbs in the SERPs on its own based on the site address, it is best that you have it implemented on your site as well. After all, the content created by the search engine may not be the best (i.e. inaccurate).

How to integrate breadcrumbs into a website

Integrating breadcrumbs within a site is not complicated, but it is worth following some tips to make it easier for Google crawlers to read the structure of the page and to enjoy all the benefits of this solution. On the following pages you will find the guidelines to follow:

This is what an HMTL breadcrumb menu would look like:

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="https://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

Many popular CMS (e.g. WordPress) provide easy-to-use plugins, which help make breadcrumbs quick and easy to implement.

Conclusion

Breadcrumbs, while they may seem unimportant, have several benefits. Most of these advantages revolve around improving both the SEO of your website as well as the user experience. If you have an online store with a medium/large catalogue of products, you should definitely consider implementing breadcrumbs into your website.