What is breadcrumb navigation?
Breadcrumb navigation is a trail of text links (breadcrumbs) that tell users where they are on a website and how they got there.
They usually appear at the top of the page.
Here is an example:
Breadcrumb navigation (or breadcrumbs) is an important element on your website for two reasons:
- It affects the user experience. Breadcrumbs or breadcrumbs make it easier to navigate your website.
- SEO benefits. Google rewards websites that prioritize user experience with better rankings.
Also, breadcrumbs help Google understand your website hierarchy and distribute PageRank throughout your website, ranking it better.
In this post we will tell you about the different types of breadcrumbs and the advantages of using them. We also offer tips and ideas on how to implement them in WordPress.
But first let’s clarify one thing:
When should you use breadcrumbs?
Breadcrumbs aren’t for everyone. They are only useful for your website when it has deep architecture.
That is, when multiple categories are divided into subcategories and these subcategories in turn point to individual pages.
Ecommerce websites are a perfect example of deep architecture.
They usually offer several products grouped into various levels of categories.
As:
Avoid using breadcrumbs if you have a flat, single-tier web architecture. That is, if your website pages are just one click away from the home page.
In this case breadcrumbs aren’t necessary, because they don’t add any value to the user’s navigation.
What are the different types of breadcrumbs?
There are different types of breadcrumbs.
1. Hierarchical breadcrumbs
Hierarchy-based breadcrumbs follow the architecture (or “hierarchy”) of your website.
Check out this example from Target:
In this case, the path that the user travels begins with the top-level category, which is the entire Target website.
The user then proceeds through increasingly specific sub-categories before arriving at the page they are on.
These types of breadcrumbs are especially useful for users arriving at your website from Google search results.
It allows them to quickly move up the web hierarchy to select more options if they want.
2. Attribute-based breadcrumbs
Attribute-based breadcrumbs generate a dynamic journey based on the different filters users can apply to a page.
They’re mostly used on e-commerce sites, where they tend to go hand in hand with hierarchical-based breadcrumbs.
For example:
On an e-commerce site, this breadcrumb navigation is useful when users want to see all products that share the same attributes.
3. Path-based breadcrumbs
Path-based breadcrumbs show the unique path users took to reach a particular page.
Instead of listing the entire path, this type of navigation is typically implemented with a “back” button, which helps users navigate back to the previous page.
Here is an example from Adidas:
These types of breadcrumbs aren’t useful in some cases, as they simply do the same job as the “Back” button in your browser.
For this reason, they are not the most popular choice among user experience (UX) designers.
What are the benefits of using breadcrumbs?
Using breadcrumbs has many advantages.
1. They promote browsing and reduce the bounce rate
Thanks to breadcrumbs or breadcrumbs, users can navigate your website more easily, which helps them to visit more pages.
For example, on an e-commerce site, users can reach a product page directly from Google.
If the product isn’t what they’re looking for, breadcrumbs can help them quickly navigate to see products in the same category.
Which also reduces the bounce rate.
2. They are useful for UX
Breadcrumbs reduce the number of steps users have to take to explore the architecture of the web.
On a website that doesn’t have breadcrumbs, the user will have to click the “Back” button multiple times if they can’t find what they’re looking for.
With breadcrumbs you can do it with just one click and even go back to more general categories.
3. Improve internal link structure and traceability
Breadcrumbs improve the traceability of your website by having internal links between pages and categories.
They provide a way for search engines to understand the structure of your website, discover deeper pages, and index all pages.
This is important to use if you want your pages to appear in search results and drive traffic to your website.
4. Appear in search results
Also, breadcrumbs are important because they appear in Google results, just above the title tag and meta description.
Pages with SEO breadcrumbs appear like this in search results:
Compare this result with another website:
The breadcrumb page makes it clear to users where they will land when they click.
As a result, a page with breadcrumbs can get more clicks than a page without breadcrumbs.
Usage: Don’t forget to implement structured data markup for your breadcrumbs to ensure that Google fully understands them and displays them correctly in search results.
Once the markup is added, you can use Semrush’s Site Audit tool to check your implementation for any errors.
Start by creating a new project in the tool and run a full scan of your website.
Once completed, go to “Marked” and click “View details“.
The tool will show you if it has detected breadcrumb structured data on your website.
Also, it tells you if there is an invalid element.
The tool also offers suggestions on how to fix invalid items. Just click on the column number “Invalid“. And then click on the button “why and how fix it“.
Using this report, you can identify and fix breadcrumb markup issues on your website.
Breadcrumb navigation best practices
When designing breadcrumb navigation for your website, follow the best practices below.
1. Only use breadcrumbs if it makes sense for your website
Worth mentioning again:
Using breadcrumbs only makes sense if your website structure goes several levels deeper.
If you have a single-level site structure, where everything is just a click away from the home page, breadcrumbs probably won’t add much value.
For example, in Wait But Why it makes no sense to implement breadcrumbs. This website has no deep structure – it only displays single entries one click away from the home page.
2. Use breadcrumbs to support primary navigation
Breadcrumbs are an additional form of navigation. Therefore, they shouldn’t replace the main navigation menu.
Think of breadcrumbs as an alternative way for users to navigate your website.
In the example below, Dell uses breadcrumbs to support primary navigation.
3. Use separators between individual layers
The crumb path is more intuitive when separated by special symbols.
The “greater than” sign (>) is the most commonly used.
But you can also use an arrow (→) or slash (/).
Walmart, for example, uses a forward slash (/) to separate items in the breadcrumb path.
4. No link to current page in breadcrumb path
The last element of the breadcrumb path shows the user’s current location.
Since users are already on the page, adding a link to the current page makes no sense.
Users are unlikely to click and it does no good.
In the example below, we can see that the last item in the breadcrumb path doesn’t include a link. Thus, the user is indicated on the page where he is.
5. Use a simple design
The breadcrumb design should be as simple as possible so that it is useful without distracting the reader from the actual content of the page.
Here’s an example from Slack:
As you can see, they appear at the top, upper right corner of the web, in a small but legible font that is consistent with the rest of the web.
The separators between categories are also simple.
They are breadcrumbs that are easy to locate and understand. But they don’t attract more attention than absolutely necessary.
How to add breadcrumbs to WordPress
Since WordPress is the most popular CMS in the world, we will see below how to add breadcrumbs in WordPress.
Some WordPress themes support breadcrumbs out of the box.
If your theme doesn’t support this type of breadcrumb navigation, you can use a plugin like Yoast SEO.
It’s a “Plugins” > “Add new“.
Research “Yoast” and click “Install now“. And then press the button “Activate” that appears after installation is complete.
Before you can use Yoast to add breadcrumbs, you need to add a small snippet of code to the header.php section of your theme.
Important note: Be careful when editing the theme file. If you are not technically savvy, we recommend asking a developer for help. Changing your theme file can cause big problems for your website if you make mistakes.
If you like it, copy the code below.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '</p><p id="breadcrumbs">','</p><p>' );
}
?>
It’s a “I wait” > “Thematic file editor” from the sidebar.
In the theme editor, paste the code you copied into the header.php file section of your theme.
Then click on “update file” to save the changes.
Then go to “Great SEO” > “Placement“in the sidebar.
Next, scroll through the available settings for the Yoast plugin and click on “Advance” > “Bread crumbs“.
You’ll see a form to configure your breadcrumbs based on how you want them to appear on your website.
Finally, activate the option “Enable breadcrumbs for your theme” located under the form.
Monitor your breadcrumbs with Semrush
Breadcrumbs are an essential element of user experience. Don’t neglect them.
They make your website easier to navigate and benefit your SEO efforts.
Semrush’s Site Audit tool can help you identify and fix breadcrumb issues that keep appearing in search results.
