What Are Breadcrumbs?
Breadcrumbs are navigational elements that create a trail to help users and search engine crawlers better understand the page and where it is on the website. And they typically appear at the top of a webpage.
Here’s an example of what breadcrumbs can look like:
Breadcrumb navigation gets its name from the Hansel and Gretel fairytale that involves characters creating a breadcrumb trail to retrace their steps.
However, breadcrumbs don’t necessarily reflect the user’s journey to the page. For example, a user may follow a direct link to the Eddie Bauer men’s pants page shown above. But they’ll still see the same breadcrumb links.
Most websites should implement breadcrumbs, especially if they contain multiple subsections.
Why Do Breadcrumbs Matter for SEO?
Breadcrumbs don’t directly affect rankings, but implementing them can still benefit your SEO. Here’s how they impact your website:
Improving Internal Linking and Crawlability
Breadcrumb navigation uses internal links that guide both users and search engines through your website. This makes pages easier to discover and surface in search results.
Kirill Sajaev, Founder of SEO agency AUQ, says his team uses breadcrumbs to improve navigation and crawlability for clients with many service and tool pages that don’t nicely fit into the top navigation or footer.
Each individual tool page is included in a category, and each category is included in the main tools list (which is added to the website footer). Like so:
Kirill notes that this approach is incredibly helpful for getting pages indexed by Google:
“The primary users of these breadcrumbs are Google spiders, which is useful because we can also add schema markup to these crumbs. So, even if our URL structure isn’t ideal, we can always specify exactly how Google should think about our content.”
If you implement breadcrumbs using BreadcrumbList schema, it might also impact your website’s visibility in AI search.
Zach Paruch, SEO Content Strategist at Semrush, explains that structured data seems to play a role in an LLM’s ability to read and understand content.
“These ‘chains’ make it easier for LLMs to grasp and recall the content—and serve it when users ask questions related to it.”
Improving User Experience
Breadcrumbs allow users to quickly orient themselves on your website, which simplifies navigation to improve the user experience (UX) and reduce the likelihood of bounces.
This also has SEO implications.
Google’s Navboost, a part of the ranking algorithm, uses real user behavior to influence rankings. Which includes whether users quickly return to search results from a webpage.
So, when users spend more time on your website, it indicates that your website’s content is useful. And it could rank higher as a result.
Just know better engagement isn’t a guarantee. If you’re on the fence about implementing breadcrumbs site-wide, conduct an A/B test to see if they have a meaningful impact on user engagement.
Anton Shaban, Head of SEO at MEDvidi, found breadcrumbs weren’t very beneficial for the MEDvidi blog.
“Fewer than 0.5% of visitors clicked the breadcrumb links, so we removed them.”
Types of Breadcrumbs for Websites
Before you add breadcrumbs to your website, consider which type you’re going to implement:
Hierarchy-Based Breadcrumbs
Hierarchy-based breadcrumbs tell a user where they are on your site based on your website structure. This type typically shows the current page, the subpage the current page falls under, and so on until it reaches the homepage.
Here’s an example from ASOS:
Hierarchical breadcrumbs are helpful for users who come from organic search. Because they allow users to discover other relevant content easily.
Attribute-Based Breadcrumbs
Attribute-based breadcrumbs display what the items on the page have in common. They often appear on ecommerce sites alongside hierarchical breadcrumbs.
Here’s an example:
Path-Based Breadcrumbs
History- or path-based breadcrumbs display your unique path to a specific page. Instead of outlining the website hierarchy, they only show the pages you have visited so far.
It would be hard to find a website with path-based breadcrumbs today. And if a website does use them, it’s usually as a back button that takes you to the previous page you were on.
We don’t recommend either option because users can do the same using their web browser.
That’s why you don’t often see these kinds of breadcrumbs. Website designers favor breadcrumb navigation types with more functionality.
5 Best Practices for Breadcrumbs
When designing breadcrumb navigation for your website, follow the best practices below.
1. Make Them Easy to See
Breadcrumbs should be easy to see without being obtrusive, and that usually means putting them in the upper left corner of the page.
Here’s an example from Plaid’s blog:
2. Include the Full Path
Your breadcrumb navigation should include the full path from the homepage or main category page to the current destination. (There may be more steps depending on your site structure.) This allows visitors to retrace their steps and return to important parts of your site quickly.
This is especially important on mobile because the main navigation is often hidden behind a hamburger menu. Here’s an example:
This way, mobile users are only one tap away from going back to the “Women” category.
3. Use a Consistent Format
Breadcrumbs should appear in a consistent format to create an easy browsing experience for users.
You can make breadcrumbs consistent by:
- Using the same separators between levels (e.g. “/”, “>”, or “→”)
- Making sure the font and link color align with your visual guidelines and look the same across pages
- Applying the same type of breadcrumbs (e.g. hierarchy- or attribute-based) throughout your site
4. Don’t Link to the Current Page
Breadcrumbs shouldn’t link to the current page because such links have no purpose. And they might confuse users since they don’t direct them elsewhere.
But you should list the current page in the breadcrumb trail to help users understand their location.
This is also good for SEO because you can mention a primary keyword (main keyword) organically. Naturally incorporating terms you’re targeting in this way helps search engines understand that your page is relevant to certain queries.
5. Add and Verify Breadcrumb Schema
Adding breadcrumb schema helps search engines understand your website structure and how pages relate to one another.
After you add breadcrumb schema markup to your website, run an audit to check that it’s properly formatted.
You can do this with Semrush’s Site Audit tool.
Once you set up your project and scan your website, you’ll see a dashboard with thematic reports. Click “View details” below “Markup.”
Under “Structured Data Items,” find “Breadcrumb.” And check whether you have any invalid items in the “Invalid” column.
If you see any errors, click the linked number to see a list of errors and affected URLs. From here, you can click the drop-down arrows in the “Affected Fields” column to find the specific fields that need to be fixed.
How to Implement Breadcrumbs in WordPress
WordPress users can implement breadcrumbs by installing a theme that supports them out of the box.
Or you can use a plugin like Yoast SEO.
To install it, go to “Plugins” > “Add Plugin.”
Search for “Yoast” and click “Install Now.”
Once the plugin installs, click “Activate.”
Next, you need to add a piece of code to your theme. If you’re uncomfortable making technical changes to your website, ask a developer for help.
To proceed, copy the code below and paste it into your theme where you want breadcrumbs to display.
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '</p><p id="breadcrumbs">','</p><p>' );
}
?>
After that, go to “Yoast SEO” > “Settings” from the sidebar. Then, select “Advanced” > “Breadcrumbs.”
Here, you can configure your breadcrumbs and customize how they appear on your website.
When you’re ready to push the changes live, click the toggle next to “Enable breadcrumbs for your theme.”
Implement Breadcrumbs for Better UX and SEO
Breadcrumbs remove navigational friction for visitors and keep them on your site longer. So your website appears more helpful to search engines and can rank higher.
But breadcrumbs are just a small aspect of SEO. You need to consider backlinks, topical authority, technical performance, and more.
Semrush offers AI-powered SEO and content marketing toolkits to help you optimize every part of your website. Explore them with a free account.
