Breadcrumb navigation is a path of links, usually located at the top of a page, that shows the user where they are on the site.
Think of it as a series of links to help you navigate a website and show how the site is organised.
For example, on my keyword research blog, the breadcrumb navigation looks like this:
Home > Learn > SEO > Keywords > Keyword Research
Just by looking at the site’s breadcrumb navigation, you can see that you are on a Blog Post about Keyword Research in the Keywords sub-category.
Users could easily click any of those links to quickly get to the part of the site they’re interested in.
The breadcrumbs help users navigate back through the site’s structure.
But that’s not all… Google loves breadcrumb navigation!
Why?
Put Simply – It helps them better understand your site structure and content.
The truth is that adding a breadcrumb navigation to your website can have a huge positive effect on your SEO.
You make it easier for Google and, in return, get a nice boost in SEO.
A typical breadcrumb navigation looks like this:
Home > Category > Subcategory > Current Page
But the number of breadcrumbs you need in your navigation largely depends on the size of your site.
Larger sites might need more, while smaller sites might need fewer.
That’s why it’s important to map out your entire site structure before adding breadcrumb navigation.
What Will I Learn?
Breadcrumb navigation is important because it helps users understand their location on the site.
This improves the user experience and makes the website much easier to navigate. It also helps Google better understand your site structure, which can boost your SEO rankings.
Let me break it down further:
First and foremost, breadcrumbs are there to help users.
Breadcrumbs make it easy for website visitors to understand where they are on your site.
They can quickly see their current location and how it relates to the rest of your website structure.
Why does that matter?
If a user lands on an article on your site, they might want more information on that topic. With breadcrumbs, they can easily click on the sub-category page that groups similar articles together.
This makes it way easier for users to find the information they want!
Getting people to visit more than one page of your website demonstrates to search engines like Google that you have engaging and helpful content.
That means that Google is more likely to give you more traffic in the future.
Who doesn’t want that, right?
Bounce rate is a great metric for measuring the engagement of your website and content.
By providing clear navigation, breadcrumbs encourage users to explore more of your site.
This will lead to:
…and ultimately lower bounce rates.
All of these are positive signals for SEO!
The truth is that Google loves breadcrumbs.
Breadcrumb navigation has been proven to help Google crawl and index your site, reducing costs on Google’s side.
It also makes it much easier for Google to understand your site structure and the relationships between your content.
That’s exactly what you want!
The easier you make it for Google, the better your site will rank.
Each breadcrumb is an internal link.
That means that breadcrumbs are an excellent way to build internal links naturally.
This does a number of things:
And so much more! The truth is that most website owners need more internal links on their site.
Adding a breadcrumb navigation can add hundreds (even thousands) of contextually relevant internal links.
That’s a win for SEO!
If you didn’t know…
Google sometimes replaces the standard URL with your breadcrumb in the organic search results.
This is what you want!
Why?
Breadcrumbs in the SERPs help you stand out from all the other websites, leading to higher click-thru rates.
It also gives users a better idea of where they will land on your site before clicking.
Ulitimately you end up with more clicks and traffic.
Follow these 3 steps to add breadcrumb navigation to your site:
Start by creating a clear outline of your website’s hierarchical structure.
Use a free mapping tool like Draw.io or Dynalist to make this easier. You can even use a simple pen and paper for smaller websites.
Breadcrumbs work best on sites with a logical, tiered organisation of pages and content. That’s why a silo structure is the best structure for most sites.
Spend time getting this right.
If you need to restructure your site, now is the time. Your website structure has a significant effect on SEO and user experience.
It’s better to restructure before adding a breadcrumb navigation.
There are three main types of breadcrumbs:
In 99% of cases, you should use attribute-based breadcrumbs for ecommerce stores and hierarchy-based breadcrumbs for all other sites.
They are both clean and provide the most benefit to users and Google.
But review your site and choose the breadcrumb type that will benefit your visitors most.
Now for the main part.
You have two options for adding breadcrumbs to your site:
For more website owners, a plugin is the best way to go.
The best plugin for creating a breadcrumb navigation is RankMath.
It’s also the plugin I use for my websites because it’s fast and efficient.
Here’s how it works:
Install the RankMath plugin, click on “Dashboard” and enable the “Schema” module for your site.
Now, click on “General” settings, then “Breadcrumbs” and toggle on “Enable Breadcrumbs Function”.
You can then customise how you want the breadcrumbs to appear on each page.
Next, you’ll need to customise your theme template files and add the RankMath breadcrumb code to the single.php file OR the header.php file.
This will depend on the theme you’re using and your website setup.
Editing your theme code can affect your website.
If you’re not confident, I recommend getting a developer to add the code.
This will require a lot more technical knowledge. But it will also give you more control.
Adding your own HTML also assumes that your theme already has the base breadcrumb code built into it (which most popular ones do).
Here’s a basic example of how your breadcrumb HTML might look:
<nav aria-label=”Breadcrumb”>
<ol itemscope itemtype=”https://schema.org/BreadcrumbList”>
<li itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”>
<a itemprop=”item” href=”/”>
<span itemprop=”name”>Home</span></a>
<meta itemprop=”position” content=”1″ />
</li>
<li itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”>
<a itemprop=”item” href=”/category/”>
<span itemprop=”name”>Category</span></a>
<meta itemprop=”position” content=”2″ />
</li>
<li itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem”>
<span itemprop=”name”>Current Page</span>
<meta itemprop=”position” content=”3″ />
</li>
</ol>
</nav>
This HTML includes Schema.org markup, which helps search engines understand your breadcrumbs.
Once you’ve added the HTML, you must test it rigorously to ensure it works properly.
Increase Your Search Traffic
In Just 28 Days…