A trail of breadcrumbs is a storytelling element used to describe a path that one leaves to find their way back to their starting point. It began in the German fairy tale Hansel and Gretel and has since become a common reference seen throughout pop culture.
On your website, breadcrumbs are navigational tools that not only help users make their way around your site, but also appeal to Google’s search engine algorithm and have a great impact on your SEO.
Bottom line is, you need to use breadcrumbs on your website for both SEO and improvements to the user experience. The user experience should not be overlooked. It is one of the key factors in increasing your rate of retention, the backbone of profitability.
But what exactly are breadcrumbs? How do they help the user experience and your SEO campaign? And how can you implement them into your website?
What are Breadcrumbs?
Breadcrumbs are a navigational component of a website that helps users successfully navigate various pages without getting confused or lost.
Simply put, breadcrumbs are a text path on a website, usually placed at the top of a page, which shows the path you’ve taken to get to a certain section of the site.
Let’s say you’re on the Testimonial video page of a website. To get on that page you first visited the home page. Then you navigated to their clients page. Once there, you clicked on case studies, and from there you found the testimonial videos page.
A set of history based breadcrumbs that would highlight such a journey would look something like this:
Home > Clients > Case Studies > Testimonial Videos
The breadcrumbs showcase exactly how you journeyed throughout the site. It’s telling you not only where you are but where you’ve been previously. What’s more, each highlighted step of the journey can be clicked on to instantly navigate from a current page back to a previous page.
Another interesting factoid about breadcrumbs is that they can be featured in Google search engine results pages.
If you have breadcrumbs in place on your site, when you pop up in a Google search, the page that you’re linking to will have the breadcrumbs listed beneath the title of the page. This helps users understand where the pages they navigate to are on your site in relation to many of the main hubs.
It’s an extra feature that is more attractive to users. Even if the page the search engine is linking to is not what they’re looking for, a breadcrumb for something that they are interested in might catch their eye.
Types of Breadcrumbs
Website breadcrumbs are not so simply defined. In fact, there are multiple different types of breadcrumbs one might use on their website.
Namely, there are three different kinds of breadcrumbs. We will go into each of them in detail, explaining the differences so that you can decide which type you want to use on your site.
Hierarchy Based Breadcrumbs:
Hierarchy based breadcrumbs are the most common form of website breadcrumbs. If you’ve encountered breadcrumbs in the past, it’s very likely they were of this type.
Hierarchy based breadcrumbs tell you where you are in relation to major hubs that are found on the site. A prime example would be the home page.
Rather than tell you where you’ve been already, it navigates a path back to that main page. Meaning that no matter where you enter the site, you’ll always be able to find a way back home.
Attribute-based breadcrumbs are usually found on an ecommerce website. They create a breadcrumb trail featuring the attributes of the product or products you’re searching for.
If someone was looking for a black men’s leather jacket in size XL, their attribute based breadcrumb trail would read something like this:
Home > Jackets > Men’s Jackets > XL > Black > Leather
This makes the product search far easier, allowing shoppers to backtrack when needed and refine their search parameters.
History Based Breadcrumbs:
As one could guess from the name, history-based breadcrumbs deal directly with your browsing history and how you’ve personally navigated the site. Breadcrumb links at the top of the page feature the various pages you’ve already visited, listed in the order that they were navigated to.
It shows the history of your journey throughout the site, negating the need to ever use a “back” button. If you entered the site via a contact us page, then navigated around to check out some features and read up on the staff before looking at the homepage, your history based breadcrumb trail would look like this.
Contact Us > Features > Staff > Home
Benefits of Breadcrumbs for Users
The main benefit that breadcrumbs have for users is that it enhances the user experience.
It cannot be overstated how vital user experience is for the success or failure of your site. You could have the greatest SEO on the planet, featured at number one for every keyword. But, if your user experience is lacking, you will find that those clicks are not converting.
You have to have a website that is both optimized for SEO and optimized for the user. Breadcrumbs help with both.
For users, they help people avoid becoming lost on your site. This reduces friction and frustration as users navigate through your pages.
Breadcrumbs are particularly helpful for users because they are a fairly common interface that your website visitors will be more familiar with.
By using breadcrumbs, it is far easier for the user to navigate back to an earlier page. They could even navigate back several pages with one click, something that a back button is unable to provide.
This should substantially lower the bounce rate of your site.
Another important function of breadcrumbs from the standpoint of website usability is that it gives users a path back to your homepage, even if they’ve never visited it previously. Remember: people don’t typically find websites through the homepage. Usually, it is through a product page or service function that was linked in a search engine results page.
That’s why every page of the site needs to be treated as an entry point, with breadcrumbs serving as a path for users entering through a product link.
Breadcrumbs serve an important function, offering an alternative navigational option so that users won’t leave. When a user enters your site through a product page, they need a clear path to the other sections of your site, particularly those where they can gain information and convert.
If they hit the back button from one of those entry points, they will just go back to the search engine results page, where they can find all of your competitors.
Make no mistake about it, the user experience matters.
Regardless of how good your SEO might be, a poorly optimized site could lead to a huge bounce rate. That’s because 79% of users will abandon a non optimized site. This is even more true for mobile users, who are five times more likely to bounce from your site if it is not set up accordingly.
Benefits of Breadcrumbs for SEO
We’ve covered why breadcrumbs are essential to the user experience, but how can they help those same users find you on Google?
Breadcrumbs are a huge bonus for Google and can have a great impact on your SEO score. It allows Google to more easily determine the structure of your site, which is more appealing in the long run toward a good score.
As we have mentioned before, breadcrumbs can become a feature on your Google search engine result, which is very appealing to users and is more likely to get clicks. This could be a great way to ensure that, even if you’re not the first option on the results page, you’re still getting a good amount of traffic.
When applying breadcrumbs to your site, it’s important to utilize structured data on the back end to make it more appealing to Google and easier to integrate into a search engine results page.
Structured data is able to directly communicate with the search engine, and completely takes all the guesswork out of the equation.
By adding breadcrumbs to your site and backing them up with structured data, you’re allowing Google to highlight your site more easily.
How to Add Breadcrumbs to Your Site
Now that we know all the benefits of adding breadcrumbs to your site, both for users and SEO, how can we go about actually doing it?
Luckily, the process has become highly simplified over the years, so you don’t need a web design degree and decades of experience to be able to incorporate them. (Though those do help)
The easiest way to incorporate breadcrumbs into your site would be to use a plugin system. There are many breadcrumb plugins that are available for a lot of the top website builders out there, including WordPress.
Using these applications, it becomes a simple matter to highlight what breadcrumbs you want and apply them, usually with nothing more than the click of a button. Obviously, this is the simplest way to incorporate breadcrumbs. Anyone can easily do this and it takes no website expertise whatsoever.
There are, of course, other more-involved ways in which to apply breadcrumbs to your site. These powerful navigational tools can also be plugged into the code manually by a web designer.
Remember, to be truly effective and catch the eye of Google’s search algorithm, breadcrumbs that are entered into a site need to be accompanied by structured data. This allows the breadcrumbs to be more easily integrated into a search engine results page.
That is why, despite the ease of WordPress or Wix plugins, it is usually best to entrust the application of website breadcrumbs to a professional web designer.
Whether this is someone working in-house or as a part of an outside firm (or freelance hire) does not matter, but if you’re going to be installing them manually with structured data, you might need some extra help.
Website code can be tricky, with one mistake leading to a slew of issues both to the design and functionality of your site. It is not something that should be left in the hands of amateurs.
When coding your breadcrumbs, remember that the breadcrumb code is often found within single.php and page.php files. These should also be inputted above the page title, so as not to cause a design issue.
When coding your breadcrumbs, make sure that you’re not adding the code to functions.php files. This will lead to otherwise preventable issues.
If this sounds like complicated technobabble to you then it’s time to invest in a professional website designer to make these structured changes.
If you’re presenting a website without breadcrumbs to Google and your users, you’re doing a disservice to yourself.
When you consider how effective breadcrumbs are at creating a more informative search engine result and improving your overall customer experience, it becomes a no-brainer decision.
Incorporate website breadcrumbs into your site and help your SEO score while also making your site more accessible to users.