Breadcrumbs are one of the oldest navigational aids used on websites and are still a useful feature for improving user experience (UX) to this day.

They provide a very easy way to click through to a parent page, category/index page, or to a website’s homepage, without relying on the browser’s back button.

However, breadcrumbs also have significant implications for SEO, ranging from the ability of the search engine robots to correctly crawl your website, through to the way your pages appear in Google’s search engine results pages (SERPs).

In this article, we’ll look at the definition of website breadcrumbs and some of the different ways to implement them, both for navigation purposes and for SEO.

What are navigational breadcrumbs?

Breadcrumbs provide useful information for users. Because they reflect the page’s position in the website’s overall hierarchy, they act as a fragment of the sitemap, so that you can see at a glance where the page sits in terms of its parents category.

This has implications for search engine robots crawling the page, which we’ll come on to in a moment, but it can also help human visitors to find other related content within the same category or area of your website.

Where can you find breadcrumbs?

You’ll usually see Breadcrumbs as a line of text, divided into individual links to the current and previous pages and/or to parent pages in the website hierarchy.

An example of Breadcrumbs in action, can be seen at the top of this blog post –  a screenshot is provided below:

website breadcrumbs screenshot
Example of Breadcrumbs in action

You can also find breadcrumbs on Google SERPs, where they appear at the top of each search result to give some hierarchical context to the result.

Technically there’s no reason why you can’t implement a breadcrumb trail anywhere on your web page – so if you have a use case where you think it makes sense for breadcrumbs to be at the bottom of your content, or at both the top and the bottom, that’s fine too.

Impact of breadcrumbs on SEO

Anything that provides extra context to the search engine robots can help with your SEO, but web page breadcrumbs can do more than just that:

  • They help the search robots to discover more pages on your site by following your breadcrumb links.
  • They are likely to contain SEO keywords as the anchor text for your breadcrumb links (and you can plan ahead to make sure this is the case).
  • They help human visitors arriving to a page via search results to click through to other parts of your site whereas their ‘back’ button would bounce back to the search results page they came from.

Combining these benefits makes breadcrumbs a powerful way to support the SEO of your pages, often alongside other tactics like whole-website sitemaps and optimisation of your main content.

Different types of breadcrumbs

There are three main types of breadcrumbs for website navigation:

Hierarchy Breadcrumbs

Also called Location Breadcrumbs, these are the type of navigation breadcrumbs we’ve mentioned above, which show the page in the context of its hierarchy within the overall sitemap.

They’re easy to implement, especially as a feature of a content management system (CMS) where your pages are already structured into a hierarchy or ‘tree’.

Your website CMS might have breadcrumbs as a built-in option or something you can add easily using an SEO plugin.

History Breadcrumbs

History breadcrumbs may look the same as hierarchy breadcrumbs, but instead of displaying a static series of links per page, they show a dynamic breadcrumb trail based on the pages you visited along the way.

If you are implementing breadcrumbs as a way to take control away from the user’s browser ‘back’ button, history breadcrumbs are a great option.

That’s because instead of always linking to the same parent pages, they dynamically adjust to the user’s own recent browser history, emulating the intended function of the ‘back’ button more reliably.

Attribute Breadcrumbs

Attribute breadcrumbs are a little different. Instead of a single breadcrumb trail, they contain a number of distinct categories or characteristics that describe the content of the page.

This is useful if a page belongs to multiple categories with equal importance in the website hierarchy – for example, if a product could be grouped according to its size, colour or function, but there’s no clear way to nest those categories as parent/child of one another.

You can combine different types of breadcrumb trails e.g. by using a conventional navigational breadcrumb trail (either hierarchy-based or history-based) with a number of clickable category tags on the end.

How to implement breadcrumbs on a website

Implementing breadcrumbs on a website as a navigation feature depends on the type of breadcrumbs you want to use, as well as your CMS and any other tools you use to edit your web pages.

HTML Breadcrumbs

At its simplest, a breadcrumb trail can be created just using a line of HTML hyperlinks, usually separated by a dash, vertical stroke or arrow symbol.

However, if you change the hierarchy of your website at a later date, manually editing all your breadcrumbs page by page takes a lot of time and effort.

CMS Breadcrumbs

Common SEO plugins like Yoast SEO for WordPress can add breadcrumbs to your pages, and different plugins will have different options to customise how they appear.

If you use a different CMS, hosted blog or ecommerce platform, check to see if breadcrumbs are supported as part of page templates so you don’t have to add them page by page.

SEO Breadcrumbs

Finally, read on for more information about using breadcrumbs for SEO and to alter how your website appears in Google Search results.

You can do this with a simple HTML breadcrumb trail, but for maximum impact it’s good practice to include structured data in your page as well.

How to appear with breadcrumbs in Google SERPs

Towards the end of 2019, Google search engine results pages (SERPs) stopped showing the raw URL for each result and, instead, started showing a line of breadcrumbs to link to the destination page with a little more context about its position within its parent website.

Although this is automatic, there are ways to influence the breadcrumbs that appear for your pages when they are included in Google SERPs.

Google has published a detailed guide for website developers and SEOs to help understand structured data, typically recommending standardised Schema.org markup.

By inserting the correct structured data into the correct place on your page, you can directly tell Google the breadcrumbs you want to be associated with your page.

Google provides a Rich Results Test to validate your code and check that everything is working as intended.

And if you are making changes to pages that you have already published, you can then use the URL Inspection Tool to check how Google sees the content, before requesting them to be re-crawled and re-indexed with your structured data included.

Implementing breadcrumbs with Schema.org

Schema.org has become the standard way to include structured data in web pages, and is frequently mentioned in Google’s developer guidelines as an acceptable format.

To include a breadcrumbs trail in your page code as structured data, you’ll need to add a Schema.org item using the @type ‘BreadcrumbList’.

Within this element, you then add a series of itemListElements using the @type ‘ListItem’ and give each item a name, a URL (if required) and a position (equivalent to its position on the breadcrumbs trail).

Each breadcrumb trail must have at least:

  • One BreadcrumbList item.
  • Two or more ListItems.
  • The last ListItem should refer to the current page itself.

You can define multiple BreadcrumbLists on the same page, if the page can be reached in different ways – and if you are just using a line of visible HTML hyperlinks rather than Schema.org structured data, it’s acceptable for SEO purposes to use more than one visible breadcrumb trail too, without getting a ranking penalty in the SERPs.

Is it worth it?

So, are navigational website trails worth it? The answer is yes, otherwise they would not have been around for so long.

As a basic HTML feature, a breadcrumb trail is very useful for navigation and gives you some control over how your visitors get around, rather than relying on browser ‘back’ buttons which might not perform as expected.

For SEO, breadcrumb trails are more important than ever, helping your pages to appear in context in the SERPs, and are specifically supported by Google using basic HTML or Schema.org structured data markup.