What are Breadcrumbs and How They Impact SEO?

November 15, 2021 | Technical SEO

When it comes to SEO, you often come across new terms. 

One such term is ‘Breadcrumbs’

You might not know what breadcrumbs are, but you must have seen them on websites. 

Here’s an example of a breadcrumb:

Example of a Breadcrumb in SEO

Breadcrumbs help users and search engine crawlers navigate your website with ease.

But did you know that apart from the user experience, breadcrumbs can also help improve your site’s SEO?

It’s true, given if you implement them the right way.

That’s what you’ll learn in this post, along with:

  • What Are Breadcrumbs in SEO
  • What Are The Different Types of Breadcrumbs
  • How Breadcrumbs Impact SEO
  • How To Add Breadcrumbs To Your WordPress Site
  • What Are The Best Practices for Breadcrumbs

What are Breadcrumbs in SEO?

Breadcrumbs help users track their path on a website, starting from the home page to the current page.

Most websites place breadcrumbs on top of a page for quick navigation.

This image shows my path from the homepage to the current page (i.e., Recipes):

Breadcrumbs in SEO Example

If I wish to backtrace my footsteps, I can do it quicker than clicking the back button multiple times.

Besides improving your site’s UX, breadcrumbs help your SEO because Google has displayed them in the SERPs.

Google SERPs show breadcrumbs

While Google does so to improve the quality of results, there’s more to how breadcrumbs affect SEO than the minor addition to search results.

But before we discuss that, let’s know a bit more about breadcrumbs.

What Are The Different Types of Breadcrumbs?

Websites choose breadcrumbs based on their UI. So, here are three of the most common types of breadcrumbs that most websites use:

1. Hierarchy-based or Location-based Breadcrumbs

Hierarchy-based breadcrumbs are a representation of the site’s structure. They help users navigate your site’s hierarchy and understand its levels.

Each text link on the left is one level higher than the text link on the right. See how ‘Larsen and Toubro’ does it.

Hierarchy-based or Location-based Breadcrumbs

2. Attribute-based or Keyword-based Breadcrumbs

Attribute-based breadcrumbs are most useful for e-commerce sites. They list the categories (or tags) specific to a particular page or mostly the products.

Each category is a text link, which users can use to navigate the site.

Attribute-based or Keyword-based Breadcrumbs

3. Path-based or History-based Breadcrumbs

Path-based breadcrumbs display the pages a user visited to arrive at a particular page. 

They are dynamically generated, depending on the steps taken by a user. You can think of them as a history trail. 

Since users can easily trace previously visited pages with the back button, this type of breadcrumb is slowly becoming extinct.

Nowadays, they are combined with other types of breadcrumbs for the best user experience. Look how Wayfair uses them.

Path-based or History-based Breadcrumbs

How Breadcrumbs Impact SEO?

By now, you must have got a fair idea about breadcrumbs and their types. 

But, what is the purpose of using them for SEO?

Let’s find out.

1. Breadcrumbs Enhance User Experience

Breadcrumbs serve as a navigational aid for users. They help users explore higher site levels and encourage them to browse other pages on your site.

For example, you are viewing the EliteDesk Desktops on HP’s website. While browsing, you thought to see the other Business Desktops as well.

Breadcrumbs boost UX

Using the breadcrumb trail, you can easily visit the Business Desktops category on HP’s website. And that too in a single click. 

Isn’t it convenient and hassle-free?

2. Google Loves Breadcrumbs

Breadcrumbs help search spiders in understanding your site’s structure and content. They aid in contextualizing and categorizing your site’s pages for relevant search queries.

Apart from this, Google shows breadcrumbs in place of the page’s permalink in the SERPs. It helps users get an idea about your site’s content and make informed decisions.

Breadcrumbs in Google SERPs

So, Google loves breadcrumbs. They not only enhance the search quality but also enhance the search experience. 

3. Breadcrumbs Increase User Retention

Breadcrumbs help users to visit other pages on your site easily, quickly, and smoothly. So, they encourage and keep first-time users on your site for a long time. 

For example, you are browsing medicine coupons on GrabOn. You find the coupons, but you want to see which other deals are currently available.

Breadcrumbs increase user retention.

Using the breadcrumb, you can visit the home page and see all the active offers.

Now, this increases the user retention for GrabOn. And all because of those little breadcrumbs!

4. Breadcrumbs Help Internal Linking

SEO experts recommend linking all the on your site with each other. Also, higher-level pages should have more links pointing towards them. 

It means the home page links to categories, categories link to subcategories, and subcategories link to products.

Breadcrumbs Help Internal Linking

Using breadcrumbs, you can achieve a strong internal linking structure. 

They will help crawlers to browse and index your pages faster. Plus, they allow you to pass the link juice to the right pages.

How To Add Breadcrumbs To Your WordPress Site?

After knowing the SEO benefits of breadcrumbs, you must be thinking of adding them to your site.

If that’s the case, you are in the right place.

You can add breadcrumbs to WordPress sites either by using a plugin (SEO by Yoast, Breadcrumb NavXT, etc.) or coding it manually. 

1. Using SEO by Yoast Plugin

Yoast SEO is a popular WordPress plugin used for optimizing on-page SEO parameters. 

It includes various other features for improving your site’s visibility, including breadcrumbs. 

To use it, install and activate the plugin.  

Then, navigate to the Breadcrumbs tab of the Yoast SEO Plugin.
Enable the breadcrumb feature by toggling the option to ‘enabled.’

Using Yoast SEO to add breadcrumbs

The default settings will work fine for most sites, but you can customize them if required. 

Once you have configured the settings, click on ‘Save Changes.’ 

There’s one more step after this. The breadcrumbs will show on your site when you add a small code to its header.

Code to add in the header

2. Using Breadcrumb NavXT Plugin

Breadcrumb NavXT is another popular plugin for adding breadcrumbs in WordPress. 

The free plugin is compatible with WordPress 3.0 and above. It makes showing breadcrumbs pretty simple by providing a breadcrumb trail widget.

You can add the widget in preferred areas on your WordPress site and choose where to place them as per your site’s theme. 

The steps are simple. Install and activate the plugin. Navigate to Settings and click on BreadcrumbNavXT to configure it. 

While standard settings work fine for most websites, you can customize everything as per your needs.

How to use the Breadcrumb NavXT plugin

When you have customized the breadcrumbs, you need to add a small code to your site’s header to make them visible on your site.

Breadcrumb code for NavXT widget

3. Using WooCommerce Plugin

If you run an e-commerce site powered by WooCommerce, adding breadcrumbs to it is very convenient.

You have to install and activate the WooCommerce Breadcrumbs plugin
Navigate to Settings and select WC Breadcrumbs to add navigational links to your site.

Using WooCommerce Breadcrumbs plugin

Configure your breadcrumb trail and tick in the checkbox to enable breadcrumbs. It will show breadcrumbs on your site.

4. Coding It Yourself

If you don’t want to use plugins or are facing difficulty in using them, you can take the manual route.

You can add breadcrumbs to your site by using regular HTML tags.

HTML code for breadcrumbs

Generally, web admins stay away from taking this route. 

That’s because they have to add the breadcrumb HTML code for each page where they want it to appear manually. 

What Are The Best Practices For Breadcrumbs?

Breadcrumbs are easy to implement. But, most people make mistakes while adding them to their site.

For effective breadcrumb implementation, you should follow the best practices:

1. Make Your Breadcrumbs Mobile-friendly. 

Most users visit your website via mobile devices. So, it is essential to keep the breadcrumb trail visible on mobile devices. 

You should make sure that it is readable and clickable, and at the same time, it should not occupy unnecessary space on the screen.

Mobile-friendly Breadcrumbs

2. Show The Whole Path In Your Breadcrumb Trail.

An incomplete breadcrumb trail doesn’t serve the purpose. If you omit certain pages in the hierarchy of your site, it will confuse your users. 

You should display all the site levels in the breadcrumb. Users find it easy to explore your site and trace their steps back to the home page when the whole path is visible.

3. Progress From Higher Levels to Lower Levels.

Almost all users are familiar with the flow of pages in the breadcrumb trail. In such a scenario, changing the normal would be a big mistake.

So, ensure that your breadcrumb navigation flows from left to right. 

The first link on the left should be your home page (higher level). And the last link on the right should be the user’s active page (lower level).

4. Don’t Include A Link To The Active Page.

Since the user doesn’t need to navigate to the active page, there’s no point in adding a link. It would only create confusion and hamper the user experience. 

So, you should ignore adding a link to the current page (or the page the user is viewing). But, keep the current page title in the breadcrumb trail.

Not linking the active page

5. Add Breadcrumb Schema Markup To Your Site.

Knowing that Google is displaying breadcrumbs in the SERPs, it is important to implement breadcrumb schema markup on your site.

Adding breadcrumb schema to your site helps Google understand your page’s structure and content better. 

To add breadcrumb schema markup (structured data) to your page, you must use the BreadcrumbList schema.

It contains an ItemList, a series of interlinked pages on a site, described using their URLs and ending with the current page.

The required properties in the item list are item, name, and position.

Required properties of breadcrumb schema

The HTML code for breadcrumb schema markup will look like this:

Breadcrumb markup html code

Implementing Breadcrumbs using an SEO plugin will automatically add the breadcrumb schema to your site.

But if you do it manually, you need to add the schema manually to each of your pages. 

Make sure you learn more about structured data and schema markup to create better visibility.

Final Thoughts

Breadcrumbs are great for user experience, not just on your website but also in the SERPs. They are SEO-friendly, helping crawlers contextualize and categorize your site’s content.

So, you shouldn’t have second thoughts about enabling breadcrumbs on your site. Make sure you follow the best practices and do it right

Which type of breadcrumbs do you use? What impact did they have on your site’s SEO? Let us know your thoughts in the comments.

Sahil is the CEO and Founder of RankWatch - a platform that helps companies and brands stay ahead with their SEO efforts in the ever growing internet landscape. Sahil likes making creative products that help in the automation of mundane tasks and he can spend endless nights implementing new technologies and ideas. You can connect with him and the Rankwatch team on Facebook or Twitter.

Share Your Thoughts

0 0 votes
Article Rating
guest
0 Comments
Inline Feedbacks
View all comments
Read more articles

Want to stay on top of the latest search trends?

Get top insights and news from our search experts.

0
Would love your thoughts, please comment.x
()
x