Breadcrumbs are an important part of almost every good website. These little navigational aids don’t just tell people where they are on your site, but they also help Google work out how your site is structured. That’s why it makes a lot of sense to add these helpful little pointers. Let’s take a look at how breadcrumb navigation works.
#1 What are breadcrumbs?
A breadcrumb is a small text path, often located at the top of a page indicating where the user is on the site. On Mobiteam.de, for example, the path where are you now is Home>Blog> What are Breadcrumbs and how to use them in SEO. This breadcrumb trail immediately shows you where you are. Every step of that path is clickable, all the way back to the homepage.
But why is this navigational help called a breadcrumb? When Hansel and Gretel went into the woods, Hansel dropped pieces of bread onto the ground so they could find their way home if they got lost. These breadcrumbs eventually became the model for the breadcrumbs we see on websites these days.
Breadcrumbs also appear in Google search results. Breadcrumbs in search results give users an easy-to-understand overview of where the page sits on your site.
#2 Types of breadcrumbs
You may have noticed that there are different types of breadcrumbs. These are the three most common ones:
Hierarchy-based breadcrumbs
These are the most common and it’s how we use breadcrumbs on our site. Breadcrumbs like this tell you where you are in a site structure and how many steps there are to get back to the homepage. Something like Home > Blog > Category > Post name.
Attribute-based breadcrumbs
Attribute-based breadcrumbs are seen most commonly when a user has searched on an e-commerce site, and the breadcrumb trail is made up of product attributes – for example, Home > Product category > Gender > Size > Color.
History-based breadcrumbs
History-based breadcrumbs do exactly what it says on the tin; they are ordered according to what you have been doing on the site. Think of these as an alternative to your internet history bar, so you get something like this: Home > Previous page > Previous page > Previous page > Current page. It’s also possible to combine these like Macy’s does in the screenshot below.
#3 Advantages of using breadcrumbs
There are several advantages to using breadcrumbs on your site. Let’s take a quick look at them:
1. Google loves them
Your visitors like breadcrumbs, but Google does too. 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. To increase the chances of your breadcrumbs appearing in Google, you need to add structured data
2. They enhance the user experience
People hate being lost. When confronted with a new location, people often look around in search of recognizable objects or landmarks – and the same is true of websites. You need to keep visitors happy and reduce friction as much as possible. Breadcrumbs can help your user experience since they are a common interface element that instantly shows people a way out. There’s no need to click the back button!
3. They lower bounce rates
Hardly anyone enters a site via the homepage — It’s all about organic search. That means any part of your site could be an entry point. You need to come up with a way to guide these visitors to other parts of your site if the selected page doesn’t meet their needs. Breadcrumbs can lower bounce rates because you’re offering visitors an alternative way to browse your site. Don’t you think it’s better to send a visitor to your homepage than back to Google?
#4 How to add breadcrumbs
There are several ways of adding breadcrumbs to your site. Firstly, if you use WordPress, you can use one of the many breadcrumb plugins. If you use a different CMS the process will be different. It is also possible to add them to your code by hand. If you also want them to appear in Google results, you need to use structured data in a way that Google understands. You can find more information on this in Google’s developer documentation on breadcrumbs.
To add breadcrumbs to your site, you need to add the following piece of code to your theme where you want them to appear:
<?php
if ( function_exists('breadcrumb') ) {
breadcrumb( '</p><p id="breadcrumbs">','</p><p>' );
}
?>
This code can often be placed inside the single.php or page.php files, just above the title of the page. Some themes want it at the end of the header.php file. It’s not a good idea to add it to functions.php since this could cause problems. You can also control how the breadcrumb structure will look and what prefixes will be used.
#5 Conclusion
Despite using breadcrumbs, Hansel and Gretel still got lost in the woods. Don’t let that happen to your visitors! Breadcrumbs provide an easy-to-grasp way for visitors to navigate your site and they instantly understand how your site structure works. Google loves them for the same reason.
