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 typically appear high up on the page.
Here’s an example:
Breadcrumb navigation is an important element on your website for two main reasons:
- It affects the user experience. Breadcrumbs make your website easier to use and navigate.
- It benefits SEO. Google rewards sites that prioritize user experience with high rankings.
Plus, breadcrumbs help Google understand your site hierarchy and distribute PageRank throughout your website. Which also helps your site rank higher.
In this post, you’ll learn about the different types of breadcrumbs and the benefits of using them. As well as tips and how you can implement breadcrumbs on your WordPress site.
But first, let’s get one thing straight:
When Should You Use Breadcrumbs?
Breadcrumbs are not for everyone.
Breadcrumbs benefit your site navigation only if you have a deep site architecture.
That is, multiple categories that divide into subcategories. And then subcategories pointing to individual pages on your site.
Ecommerce sites are perfect examples.
They typically offer different products grouped into multiple levels of categories.
Like so:
Avoid using breadcrumbs if you have a single-level, flat website architecture. Where every page is just one click away from the homepage.
That’s when breadcrumbs are unnecessary. Because they won’t add any navigational value to users.
What Are the Different Types of Breadcrumbs?
Breadcrumbs come in a few different forms.
1. Hierarchy-Based Breadcrumbs
Hierarchy-based breadcrumbs follow the site architecture (or “hierarchy”) of your website.
Consider this example from Target:
In this example, the trail starts with the top-level category. In this case, Target as a whole.
And then progresses through more specific, nested subcategories before arriving at the current page.
This type of breadcrumb is particularly useful for users who land on your website from Google search results.
It allows them to quickly go back up the hierarchy to explore more options if they want.
2. Attribute-Based Breadcrumbs
Attribute-based breadcrumbs generate a dynamic trail based on different filters users may apply on a page.
Attribute-based breadcrumbs are mostly used on ecommerce sites. Where they are paired with hierarchy-based breadcrumbs.
Example:
On an ecommerce site, this breadcrumb navigation is useful when users want to view all the products that share the same attributes.
3. Path-Based Breadcrumbs
Path-based breadcrumbs display the unique path users took to arrive at a particular page.
But instead of listing out the entire path, this type of breadcrumb navigation is typically implemented in the form of a back button. Which helps users return to the previous page.
Here is an example from Adidas:
Path-based breadcrumbs aren’t helpful in many cases. They merely serve the same function as the “back” button in your browser.
That’s why this breadcrumb type is not the most popular choice among user experience (UX) designers.
What Are the Benefits of Using Breadcrumbs?
There are lots of benefits to using website breadcrumbs.
1. Encourage Browsing & Reduce Bounce Rate
Breadcrumbs improve users’ ability to navigate your site and find content. Which encourages browsing.
For example, on an ecommerce site, visitors might directly land on a product page from Google search results.
And if the product isn’t a perfect match for what they’re looking for, they can use breadcrumbs to easily navigate back to view other products from the same category.
Which also reduces the bounce rate.
2. Good for UX
Breadcrumbs reduce the number of steps users need to take to go back up in the site hierarchy.
On a website without breadcrumbs, you might need to hit the back button multiple times. Or click multiple times to go back up in hierarchy.
But with breadcrumbs, you can do that with a single click by clicking a link in the breadcrumb trail.
3. Improve Internal Linking Structure & Crawlability
Breadcrumbs improve the crawlability of your website by creating internal links across pages and categories on your website.
They give search engines another way to understand your site structure, discover deeper pages within your site, and index all your pages.
This is important if you want your pages to appear in search results and bring traffic to your website.
4. Appear in Search Results
Another reason to use breadcrumbs is that they appear in Google search results. Above the title tag and meta description.
Pages with breadcrumbs for SEO look like this in search results:
Compare this result with a listing from another site:
The page with breadcrumbs makes it clear to users where they’ll land on a site following a click.
A page showing breadcrumbs in Google search results could attract more clicks than a similar page without breadcrumbs.
Note: Don’t forget to implement breadcrumb structured data markup to ensure Google fully understands your breadcrumbs. And shows them appropriately in search results.
Once you add the markup, you can use Semrush’s Site Audit tool to check whether your implementation has any errors.
Start by setting up a new project in the tool and running a full crawl of your website.
After the crawl is complete, navigate to “Markup” and click “View details.”
The tool will show whether it detected breadcrumb structured data on your site.
And whether any invalid items are present.
The tool also offers advice on how to fix invalid items. Just click on the number in the “Invalid” column. And then click on the “Why and how to fix it” button.
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. Use Breadcrumbs Only if It Makes Sense for Your Website
This is worth mentioning again:
Using breadcrumbs makes sense only if your site structure has multiple deeper levels.
If you have a single-level site structure, where everything is only one click away from the homepage, then breadcrumbs probably won’t add much value for your visitors.
For example, on Wait But Why, there is no point implementing breadcrumbs. The site doesn’t have any deeper hierarchies—it’s just single posts that are one click away from the homepage.
2. Use Breadcrumbs to Support Primary Navigation
Breadcrumbs are an extra navigation feature. So they shouldn’t replace your primary navigation menu.
Think of breadcrumbs as an alternate way users could navigate around your website.
In the example below, Dell uses the breadcrumbs to support their main navigation.
3. Use Separators Between Individual Levels
Text links in the breadcrumb trail are separated with special symbols.
The greater than sign (>) is the most commonly used separator.
But you can also use an arrow (→) or a forward slash (/).
Walmart, for example, uses a forward slash (/) to separate items in its breadcrumb trail.
4. Don’t Link to the Current Page in Breadcrumb Trails
The last item in the breadcrumb trail shows the user’s current location.
Because users are already on the page, adding a link to the current page doesn’t make sense.
Users are unlikely to interact with it. And it serves no purpose.
In the example below, we can see that the last item in the breadcrumb trail doesn’t include a link. That’s because the user is already on the page the last item indicates.
5. Keep the Design Simple
Breadcrumb design should be as simple and unobtrusive as possible. So that it’s useful without distracting the reader from the actual contents of the page.
For example, here’s how Slack designed breadcrumbs on their website:
Slack’s breadcrumbs appear at the top-right corner of the website, in small but readable font consistent with the rest of the website.
Even the separators between the categories are simple.
These breadcrumbs are easy to locate and understand. But they don’t draw any more attention than they absolutely need to.
How to Add Breadcrumbs to WordPress Websites
Since WordPress is the most popular CMS (content management system) in the world, let’s look at how you can add breadcrumbs in WordPress.
Some WordPress themes support breadcrumbs out of the box.
If your theme doesn’t do this for you, you can use a plugin like Yoast SEO.
Go to “Plugins” > “Add New.”
Search for “Yoast” and click “Install Now.” And then hit the “Activate” button that appears after the installation is complete.
Before you can use Yoast to add breadcrumbs, you need to add a small piece of code to the header.php file section of your theme.
Important note: Be careful when editing your theme file. If you lack technical prowess, we recommend asking a developer on your team for help. Changing your theme file can lead to big problems for your site if you make mistakes.
If you’re comfortable proceeding, copy the code below.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '</p><p id="breadcrumbs">','</p><p>' );
}
?>
And navigate to “Appearance” > “Theme File Editor” from the sidebar.
In the theme editor, paste the code you copied in the header.php file section of your theme.
Then click “Update File” to save changes.
After that, go to “Yoast SEO” > “Settings” from the sidebar.
Then scroll through available settings for the Yoast plugin and click “Advanced” > “Breadcrumbs.”
A form will appear where you can configure your breadcrumbs based on how you want them to appear on your website.
Finally, toggle on the “Enable breadcrumbs for your theme” option found below the form.
Monitor Your Breadcrumbs with Semrush
Breadcrumbs are an essential UX component. Don’t overlook them.
They make site navigation easier. And they benefit your SEO.
Semrush’s Site Audit tool can help you identify and fix issues related to your breadcrumbs. So that they continue to appear in search results.
Sign up for free!
Source link : Semrush.com
