What are website breadcrumbs?


Breadcrumbs are useful for both practical for web designers and SEO. Not only will it help search engines better understand the structure of your website, it also helps visitors understand where they are on your website.

However, not all websites implement this key navigation tool. Inside this article, we will take explain what breadcrumbs are and provide three different types of breadcrumbs.

What are breadcrumbs?

A breadcrumb is a type of navigational path which helps user’s understand where they are on your website. If necessary, users will also click on breadcrumbs to help them return to a previous section on your website.

Example: home >> digital marketing services >> social media

Not only are breadcrumbs used on websites, they can also be found on Google. Breadcrumbs in search engine results give users an easy-to-understand overview of where the page sits on your site. Not only do breadcrumbs give search engines another way to figure out how your website is structured, it can also persuade users to click on your website when appearing in search results.

Breadcrumbs give Google another way of figuring out how your website is structured, but, as covered earlier, Google may also use your breadcrumbs in the actual search results, which makes your result much more enticing to users.

So why is website navigation called a breadcrumb?

Do you remember the story of Hansel and Gretel and how they went woods? Hansel dropped pieces of bread onto the ground so they could find their way home if they both got lost. These breadcrumbs eventually became the model for the breadcrumbs we see on websites today.

Where should I use breadcrumbs?

Good question. A breadcrumb trail is only really necessary for website with a hierarchy structure or for a websites offering a wide variety of pages and categories.

For example, you could implement breadcrumbs for a shopping website offering e-commerce services, a digital agency who may offer a variety of different digital marketing services or even a blogging website who offer opinions on many different categories with sub-categories.

There are three different types of breadcrumbs which I will go into further detail later in this post. Breadcrumbs can be used for most websites, expect for those which have no logical structure such as one-page websites or landing pages.

1. Location-based Breadcrumbs.

Also known as hierarchy-based breadcrumbs, location-based breadcrumbs are the most common type of breadcrumbs you will find. Breadcrumbs like this tell you exactly where you are in a website structure and how many steps there are to navigate back to the homepage.

If you are a business who offers e-commerce services through your online store, location-based breadcrumbs are convenient for showing your website structure to visitors who may have entered a product page from external sources such as search results, digital marketing or social media.

Furthermore, if a user lands on a particular product page but it’s not exactly what they are looking for, instead of exiting the website, they can be encouraged to click on the product category page to explore related items which might be more appropriate to what they were searching for.

In the example shown below, on our client website London Bio Packaging, you can see where I am in the website structure and how I can easily return to a previous page.

location breadcrumbs example

2. History-based breadcrumbs

As it says exactly on the tin, history-based breadcrumbs are created and ordered based on what you have been doing on the website. Think of it as alternative to your browsing history so your breadcrumbs link will look something like this:

Home >> Previous Page >> Previous Page >> Current Page

Also known as path-based breadcrumbs, this particular type of breadcrumbs are regarded as the least popular type as they often more puzzling and confusing for a user if they jump randomly from one page to another. From a Knutsford web design UX perspective, history-based breadcrumbs can easily be replaced with back-button functionality.

3. Attribute-based Breadcrumbs

These breadcrumbs explain the relationship of products to one another and help visitors to find a new approach. They show a list of attributes which the user previously selected.

Attribute-based breadcrumbs are arguably the most popular and largely seen on websites who provide e-commerce services where the breadcrumb trail is created from product attributes. This type of breadcrumb explains the relationship of the product and show the list of attributes which the user has previously selected. Just like location-based breadcrumbs, attribute breadcrumbs can also have different variations. The trail can start on the homepage or category page, where extra elements can be added to the trail or some evident elements can even be omitted.

attribute breadcrumbs example

Advantages of implementing breadcrumbs on your website

  • Search Engines simply love them, they can figure out how your website is structured
  • Encourage users to visit your website from search engine results
  • Lower bounce rates by offering users an alternative way to navigate around your site
  • Enhance user experience

Remember the story of Hansel and Gretel I touched on earlier? Well despite using breadcrumbs, they still got lost in the woods. Don’t let users get lost on your website by providing easy navigation so they can instantly understand how your website structure works.

If you offer e-commerce services or want to increase your digital marketing services activities by promoting product pages, contact your Knutsford web design agency and let’s implement breadcrumbing navigation on your website.