What Are Breadcrumbs And How To Use Them For SEO?

SEO (Search Engine Optimization) is full of hundreds of little web design quirks, both visible and hidden. All of these factors have an impact on both usability and search appeal, so it’s no surprise that marketers are always telling you to optimize this, implement that, or change this around to get the most benefit.

There are numerous small aspects of SEO that people take for granted, but which you may not have heard of, seen named, or even considered before.

This article is part of an ongoing effort to demystify, explain, and educate the readers on these various concepts.

If you’re new to SEO and don’t know what breadcrumbs SEO are or why they’re important, then this blog is only for you. 

What Are Breadcrumbs?

Breadcrumbs are a small path of text that helps users navigate your website. They are typically displayed at the top of the page. They use a small separator, such as a forward slash or a dash, to help users understand how the pages are related to one another.

Let me show you an example,

Users can see other pages on the website, such as the homepage or the page they were on before, and click on them to go to those pages.

Breadcrumbs allow users to easily navigate your site to other related pages or return to previous pages without using the back button or any menus.

This Makes Navigating The Site Much Easier

They can figure out how to move through your site from any web page they start on, rather than having to use the primary navigation menu or click to the homepage.

Adding breadcrumb navigation to your website is simpler than you might think, especially if you use WordPress.

• The Yoast SEO plugin is probably the most straightforward plugin for adding breadcrumbs to your website.

• Breadcrumb links can be added to any page with the click of a button.

• WooCommerce Breadcrumb Plugin is a popular solution for e-commerce sites.

• If you don’t want to use Yoast, other WordPress plugins can be used to add breadcrumbs to your website.

• Some WordPress themes and theme templates include breadcrumbs by default, so double-check to ensure you don’t need to do anything to optimize how they appear on your pages.

• If you have a Wix website, the product pages now have breadcrumbs. Always check with your CMS (Content management system) to see if they use breadcrumbs or not.

Breadcrumbs are beneficial to SEO (Search Engine Optimization) for a variety of reasons, the most important of which is how they improve usability. Giving users links to other pages that relate to their current page makes it easy for them to navigate your website.

Preventing users from visiting a single landing page can have a significant impact on important metrics such as bounce rate.

It May Entice The Visitors To Visit Other Pages On Your Website

They’re essential for users on mobile devices, where the main navigation can be cumbersome because it frequently takes up the entire screen. Breadcrumbs are much more compact, making it easier for users to access your content on a small device. 

Types Of Breadcrumbs

Website breadcrumbs are not so straightforward. There are numerous types of breadcrumbs that can be used on a website.

There are three different types of breadcrumbs. I will go over each one in detail, explaining the differences so you can decide which one to use on your site.

Hierarchy-Based Breadcrumb Navigation

Almost every breadcrumb-related article begins with hierarchy-based breadcrumb navigation (also known as “location-based breadcrumb navigation”). 

This is because it is the most common option, particularly for websites with complex site architecture with more than two levels.

This breadcrumb navigation option adheres to your website’s architecture, or “hierarchy,” making it simple for users to anticipate and find related content.

Consider The Following Target Example:

As shown in the preceding example, hierarchy-based breadcrumb trails begin with the most general top-level category (in this case, Target as a whole) and progress through more specific, nested subcategories before arriving at the current page. 

If the user changes their mind, they can easily navigate to a more expansive category. 

Path-Based Breadcrumb Navigation

Path-based breadcrumbs function similarly to the browser’s back button in terms of navigation. 

They reflect the user’s unique path to the current page, though this path is typically not displayed in its entirety. This breadcrumb option can help site visitors quickly return to search results, which is especially useful on e-commerce sites.

Here’s An Adidas Example: 

In the preceding example, Adidas returns the user to their search results page via a path-based breadcrumb (the “Back” link). It is also visible alongside the site’s location-based breadcrumbs. Users benefit from both advantages in this manner.

Path-based breadcrumbs are frequently used on interactive pages, such as web forms, because they allow users to return to the previous step while retaining all of the data they’ve already submitted. If necessary, users can make changes to the submitted information. 

Attribute-Based Navigation

Meta-information about a page or topic is displayed in a breadcrumb format with attribute-based breadcrumbs. This is useful when an item falls into multiple distinct categories at the same time, which can be difficult to display in a hierarchy. 

Ecommerce websites frequently use attribute-based breadcrumbs to filter product search results.

Here’s an example from the clothing retailer Old Navy:

The “filters” in the preceding example are attribute-based breadcrumbs. Each one refers to a distinct feature of Old Navy’s clothing inventory. 

A user who enters the above string will only see women’s tops in sizes small, green, and loose-fitting. They could, however, remove any of those filters, or even add more, without having to switch to a different category.

In this case, Old Navy’s website combines attribute- and hierarchy-based navigation so that users can view an entire category (women’s tops) or filter more precisely within that category. 

Why Are Breadcrumbs Important For SEO?

Many aspects of technical SEO must be considered when optimizing your website for Google search. One of these elements is breadcrumbs.

Here’s how they benefit SEO.

They Help Google Understand Your Site Structure

Sitemaps are one of the most important ways you can assist Google crawlers in easily crawling your website.

The sitemap looks something like this:

Breadcrumbs are another way for Google to understand the structure of your website.

It demonstrates to Google how your pages are related to one another. It can assist Google in categorizing your pages more easily and with greater understanding.

 For example, how a user’s landing page relates to category pages you’ve set up. 

Read More: Sitemap Structure: Why Sitemap Is Important For SEO

They Help Users Navigate Through Your Site Easily

This is the primary reason why webmasters should use breadcrumbs and why they’re a must-have in modern web design: They enhance a website’s functionality, making it easier to use.

They’re Similar To Secondary Navigation

When a user is presented with a menu, it can be overwhelming, especially if the menu is lengthy and leads to numerous pages.

It’s critical to think about how organic traffic gets to your website in the first place.

Users enter a search query into Google and are presented with the following results: 

They can already see how that page is related to other pages on the website if you have breadcrumbs implemented.

Then they click the result, which takes them to a specific page, not just the homepage or the blog page.

They consume your content once they arrive, but they may want to go further. In this case, if they liked the content on your blog post, they might decide to visit the blog’s parent page and read more.

And clicking on the breadcrumbs is much easier than trying to find the link in the main menu.

They Lower The Bounce Rate

One significant advantage of using breadcrumbs is that they can reduce bounce rates.

They do this in the same way that they improve a website’s usability — they show users a simple way to explore other related pages on your website (instead of bouncing back to the SERP they came in from).

Furthermore, depending on the type of breadcrumbs you’ve implemented, they allow users to look at other related pages that may better suit their needs. This is especially useful for e-commerce sites.

Breadcrumbs, for example, on Amazon will show you related pages that include other products and categories you might be interested in browsing.

Let me show you with the help of an example:

This is the book I was looking forward to purchasing.

And later, Amazon showed me other books I might be interested in reading. This is navigating me to another page.

In this case, you could have begun by typing a specific model into Google breadcrumbs and then navigated to Amazon to view the product page. Breadcrumbs allow you to return to a category page to browse and compare similar products. 

They Assist Users In Navigating To Other Sections Of Your Website

On the site, you can return to the blog by clicking on the general blog link rather than going back to the homepage and searching for the blog header link. Of course, the blog link is also in the top bar navigation, so it’s a little less useful.

This is preferable for category pages.

For example, the “webmaster” link takes you to the category page for all of the blog posts on this site that are tagged with the webmaster category. This is useful if you want to read all of the posts on the site about a specific topic, such as those about PPC topics, posts about marketing topics in general, and so on.

They provide consistent and easy access to your categories and home page. One of the most significant advantages is consistency. Even though there are many web standards that most sites follow these days, each site has its own layout.

Breadcrumbs are generally always in the same place, and they have a similar kind of structure—with some variations which I will cover below—so they’re a consistent way for users to know how to navigate your site. 

How To Add Breadcrumbs To Your Website

The addition of breadcrumbs to your website is determined by the type of website you have.

Here are some of the most common methods:

Plugins

As previously stated, you can add breadcrumbs to your WordPress website using a variety of plugins.

The Yoast and WooCommerce Breadcrumb plugins are both excellent choices for adding breadcrumbs to your website, but there are a few other plugins to consider.

• Breadcrumb NavXT
• Flexy Breadcrumb
• Breadcrumb

What’s great about all of these other breadcrumb plugins is that you can customize your breadcrumbs. For example, you can remove “home” from your breadcrumbs or change the text size.

They also allow you to select the type of breadcrumbs you want to use. You can, for example, add breadcrumbs that include a category page or change the text on your home page. If you want, you can even keep your blog page out of the breadcrumbs.

Read More: 50 Best Free WordPress Plugins To Boost SEO

Manually

At the very least, you should have a good understanding of HTML, and for WordPress websites, you should be able to implement PHP as well if you’re doing it yourself.

However, if you want to do it yourself, plenty of people have already come up with solutions for WordPress. 

How To Create Breadcrumbs

Fortunately, making breadcrumbs is a simple process. Because the method varies depending on the type of site you are creating, I will break down three of the major platforms for you.

WordPress

WordPress has many plugins that will assist you in creating breadcrumbs without having to write the code yourself.

Because breadcrumbs are now used by so many websites, WordPress has seen a proliferation of these plugins.

Here are a few examples:

Plugins, of course, do not do everything for you. To achieve the desired appearance, you may need to modify the breadcrumb HTML.

This is usually accessed via your plugin’s “SEO” tab. Using basic HTML, you can modify options such as margins and special character separators.

Wix

Wix has been slower to implement breadcrumb navigation on its sites. You can currently add a website breadcrumb menu to Wix Stores but not to other types of sites.

If you want to include a breadcrumb trail in Wix, you must manually add it to the site’s code.

Using breadcrumbs in Wix is easy. You just need to go to Add elements → Menu & Anchor → Breadcrumps

And tadda!!

You are ready to add breadcrumbs in Wix.

Wix provides several code templates for manually adding a breadcrumb trail to your site. HTML breadcrumbs, on the other hand, are more customizable than automatically generated ones.

All three types (path, location, and attribute) have options, so simply copy and paste the one you want into your site’s code while making your stylistic changes.

Shopify

Adding a breadcrumb trail on Shopify is simple. Simply click “cart” and select “show breadcrumb navigation” when customizing your theme.

This method provides fewer customization options, but because Shopify is almost entirely dedicated to ECommerce sites, a template works quite well. 

Breadcrumbs Examples

Without facts and examples to back it up, information is meaningless. Only when backed up by perfect examples can one properly grasp an emotion, idea, or thought.

So let’s take a look at some breadcrumb examples.

Walmart

When I think of a website with a lot of content, I immediately think of an e-commerce website. Walmart is a prime example of this, as their website has thousands of products available online, each with its own product page under specific categories and sub-categories. 

See the categories and subcategories in the service sections.

Their attribute-based breadcrumbs take up little page space and are easy to find, even among the clutter.

NASA

NASA’s website contains a wealth of information for viewers. From informational blogs to press releases and newly released images from space to live streams, there is something for everyone. In such a large website with so much content, it can be difficult to find what you’re looking for. 

This is why they have a larger category to define topics and depict the content contained within them.

See the image below:

Nestle

Nestle has done an excellent job with bread crumb implementation. To avoid confusion, their breadcrumbs are colored differently depending on whether they can take users to another link or not. 

They have two types of breadcrumbs: one that is a link and takes users to a different page when clicked, and one that is not a link and does not take users anywhere.

Breadcrumb SEO Best Practices

Adding breadcrumbs to your website is usually a simple process. Still, breadcrumb SEO entails more than simply enabling these useful links on your website.

Here’s what you should do if you want to rank higher with breadcrumbs:

Ensure Breadcrumbs Are Enabled And Visible To Users

Depending on how your website is configured, you may need to enable breadcrumbs in a plugin, or at the very least install and activate the plugin.

Fortunately, many plugins, such as Yoast SEO, will have this feature enabled by default.

However, if they aren’t appearing, you should check your breadcrumb plugin to see if they need to be enabled manually.

If you can’t find the plugin in your CMS, or if you do and your breadcrumbs still don’t work, contact your theme or plugin’s customer support.

Make Your Breadcrumbs Mobile-Friendly

Most modern websites are mobile-friendly by default, but you can always use Google’s Mobile-Friendly Test to see if yours is. Having said that, your breadcrumb plugin may conflict with your WordPress theme or other plugins on your website.

Here are some suggestions for making breadcrumbs mobile-friendly.

Don’t Let Your Breadcrumbs Wrap

Space is limited on a mobile device. When your breadcrumbs begin to wrap and include multiple lines, it consumes space and degrades the user experience: Limiting breadcrumbs to a single breadcrumb is one way to keep them from wrapping.

Limit Your Breadcrumbs

When it comes to breadcrumbs on mobile, sometimes less is more. Consider the user and what they require. It’s common for them to use a breadcrumb to navigate to a previous page rather than the cumbersome back function on mobile.

If you configure your website to reduce down to a single breadcrumb on mobile, as shown in the image, you improve the user experience without taking up too much space on a mobile device:

Avoid Crowded Text

In general, crowded text should be avoided because it provides a poor user experience.

When your text is crowded, it is more difficult to read. It’s exacerbated by the fact that breadcrumbs are clickable, and links that are too close together are difficult to click accurately, potentially frustrating the user.

Avoid crowding the screen with breadcrumbs. You won’t have to worry about this if you follow the previous suggestion of having only one breadcrumb on your mobile. 

Add Breadcrumb Schema

Schema markup is structured data that search engines use to determine the topic of your content. One of the primary reasons for implementing schema on your website is to make your page eligible for rich results. 

Rich results are Google SERPS search listings that include additional, more engaging information, such as product ratings:

To add schema to most WordPress websites, you’ll want to use a plugin.

Some of the best are:

Other website builders, such as Wix, frequently add schema to specific pages on your website. If you want, you can also code the schema into your website yourself. Google has a fantastic tutorial on how to do it.

Once you’ve implemented schema on your website, you can use Google’s Rich Results Test to ensure it’s working properly. 

Use Breadcrumbs That Meet Your Audience’s Needs

Consider how your audience interacts with your site when deciding whether or not to use breadcrumbs. Consider the following:

• What information is critical for your target audience to be able to find?
• Which pages are the most and least popular right now?
• What are the most and least accessible pages?

Take note of how other websites that your audience is likely to spend time on — especially if they are comparable or in your market — are organized and how they use breadcrumbs. This will tell you what your audience is likely to see.

Assuming your website’s content is organized logically, the next step is to ensure that your breadcrumbs adhere to that organization in a clear and consistent manner.

Here are a few things to keep an eye out for:

• Use a naming convention that is consistent across all pages.
• Use as few words as possible in your breadcrumbs.
• Use your breadcrumbs to incorporate additional keywords if possible.

Check to see that your breadcrumbs are displayed in a logical order (i.e., location-based breadcrumbs should increase in specificity).

Organize Your Breadcrumb Trail Logically

The majority of websites display their breadcrumbs in the top half of the page, generally directly underneath the primary navigation menu, or directly above the page content. For example, IKEA places theirs directly below the primary navigation.

However, your requirements may differ depending on your website, what your customers expect, and what is common in your industry. If you are unsure, look at your competitors’ websites to see how they have used breadcrumbs in their navigation.

Keep Breadcrumb Design Simple

Breadcrumb design should be as simple and unobtrusive as possible to be useful without distracting the reader from the page’s actual contents. That’s why they appear as regular text links on so many websites. 

For example, here’s how Nordstrom’s was designed: 

Nordstrom’s breadcrumbs are located near the top right corner of the screen, in a small but readable font that matches the rest of the website. Even the separators between the categories are straightforward. 

These breadcrumbs are simple to find and understand, but they don’t draw any more attention than is necessary.

Benchmark Your Breadcrumbs

It’s a good idea to split-test your breadcrumb option before finalizing it, whether you’re adding breadcrumbs for the first time, updating your category names, or adjusting how they’re laid out. 

This can assist you in detecting and resolving any potential negative outcomes before they have a significant impact (a tool like SplitSignal can help you do this).

Split-tests work best for smaller, incremental changes, so if you’re making several updates, tackle them one at a time. As a result, your test will produce more reliable results, and you will be able to update your website with confidence in your decision.

How To Add Breadcrumbs Schema Markup?

The breadcrumb markup is used by Google search to categorize the information from the page in the search results. 

The Breadcrumbs structured data tool in the Google Search Console marks up your pages and tells the search engine what information to display to users.

Structured data is a standardized language that search engines understand to provide structured information about a page and categorize the content on the page with headlines that describe it to help Google search understand what content it is.

For example, on a recipe page, you might categorize the content by ingredients, preparation time, cooking time, methods, and so on. The markup is where you mark the content in structured data so that Google can display it in search results (these are called rich results).

Similarly, the breadcrumbs schema markup enables Google to show your navigation in search results.

To ensure that breadcrumbs are properly implemented, you can either use the breadcrumbs report in Google Search Console (found under enhancements in the GSC dashboard)  

Common Mistakes When Using Breadcrumbs

I assume I have persuaded you to use breadcrumbs by now, so let’s talk about some of the mistakes people make when implementing them. 

You don’t want to make a mistake that reduces their value or harms your site, do you?

1. Not Using The Full Path: Even if you have other links to the homepage on your site, breadcrumbs should always start with the homepage and end at the page the user is currently on.

You want a complete path with as many useful links along the way as possible.

2. Making The Path Indicators Too Complex: In general, all you need between links is a space with a / or a > in it, though symbols like the triangles Best Buy uses are also acceptable. Any more complicated, and breadcrumbs become more distracting than useful. 

3. Forgetting To Format The Links As Links:  I’ve seen a few websites where the breadcrumbs don’t appear to be clickable. They lack underlines, are not the same colour as the other links on the page, and so on. A large part of the benefits of breadcrumbs stem from the user’s ability to use them, so if they only appear as information rather than links, you lose that benefit.

4. Positioning Them In The Wrong Place: Breadcrumbs have been a standard component of web design for more than a decade, so users are accustomed to looking for them in the correct location. It should appear above the page’s title and content, but below other site-wide navigation.

5. Using Breadcrumbs In The Post Title:  I’ve seen the odd site attempt to include breadcrumbs as part of the page’s H1 title, but it always looks clunky or software-generated, and it’s rarely compelling.

Because Google despises bad titles, it will not rank well. Separate the title and the navigation.

6. Using Breadcrumbs In Place Of Navigation: Your site’s top-bar navigation structure should be consistent, with buttons, calls to action, logos, and whatever else you want. The exact structure and design of this navigation is unique to your site, but you don’t want to try to replace it with breadcrumbs. Breadcrumbs are only useful for one type of navigation and not for full-site exploration.

Finally, there is one “don’t do this” error that I do not consider to be a mistake, but some people do.

“Using a breadcrumb structure in your URL” is considered a mistake. 

Personally, I  think a breadcrumb structure is fine, but it breaks down when you have more than two categories.

If you look at the URL for this post, it’s /blog/post-title, with no mention of the category.

The category is useful for navigation, but it doesn’t need to be part of the permalink for the full post. This one is more up to your preference, though. 

Dos And Don’ts For Breadcrumbs

I believe you now have a better understanding of what breadcrumbs are and how they work. As an added bonus, I’ll give you a few pointers on how to make your breadcrumbs more effective.

Conclusion

If you’re still debating whether or not to implement a breadcrumb trail on your website, consider this: what are breadcrumbs for?

Finally, they make it easier for your visitors to navigate your site. If a breadcrumbs menu would not improve your user experience, there is no reason to complicate your web design.

However, if you have many pages that branch out more than three pages into your site (as most eCommerce sites do), a breadcrumb trail can improve both your UX and your SEO score with Google.