A Complete Step By Step Tutorial

Breadcrumbs are an important element of every good website & blog.

These simple navigational trail not only help users make their way around your site but also help Google work out how your website is structured.

However, there has been always a debate about whether it has any impact on search engine ranking or not as well as which type of website should use this navigational tool.

If you have also any such doubt, you are in the right place. In this post, I will share everything you need to know about breadcrumbs, why there are important, their impact on a website’s search rankings, and how to implement and optimize Breadcrumbs for SEO.

What is breadcrumbs in SEO

A breadcrumbs is a small navigational menu usually located at the top of a web page. It allows the site user to track their path from the website homepage to the page they’re currently viewing.

The term breadcrumb was picked up from the popular children’s tale Hansel and Gretel.  In the story, Hansel (character name) drops pieces of bread on the ground to help them find their way back to the home. 

Similarly, on a website, breadcrumbs serve the same purpose – they help users understand where they are and if needed, help them get back to the previous site section or homepage of the site.

Here is an example of how a breadcrumb trail menu looks on a site:


As you can see from the above example, the breadcrumb trail starts from the home page > then it shows the category name and > then the current page name.

Point to be noted that every link in the breadcrumb trail is clickable, thus allows users to navigate back and forth, or move back to the homepage.

The 3 core types of breadcrumbs for SEO

There are many different kinds of breadcrumbs but all types have the same goal i.e helps users and Google (Search engine) understand the relationship between the current page and the rest of the website.

Here is a quick overview of the three most important types of Breadcrumbs:

#1. Hierarchy Based Breadcrumbs

Also known as Location-based Breadcrumbs, they are the most common type of breadcrumbs you can find on blogs or websites that have a simple hierarchical structure.

They show users the path all the way up to the homepage of site letting them easily navigate to relevant category & sub-category page.

So, these types of breadcrumbs navigation will typically look like this: Homepage > Category > Subcategory > Page or post.

Here is an example:

Shopify breadcrumb navigation
Example of Hierarchy Based Breadcrumbs

#2. Attribute-based Breadcrumbs

The second type of breadcrumbs is Attribute based, also known as dynamic breadcrumbs.

They are commonly used in on ecommerce sites in cases a product has many attributes and the breadcrumb trail reflects that to make navigation easier.

Here is an example from an ecommerce website:

attribute-based-breadcrumbs (1)
Example of Attribute-based Breadcrumbs

#3. History-based Breadcrumbs

As one could guess from the name, history-based breadcrumbs also known as path breadcrumbs deal directly with your browsing history and how you’ve personally navigated the site.

Think of these as an alternative to your browser history bar, so you get something like this: Home > Previous page > Previous page > Previous page > Current page

Which Type of breadcrumbs is best for you?

Most of the SEO experts and web designers recommend using location also known as hierarchy based breadcrumbs (the first one) – and I agree. They have a very simple format which will actually help your site user to navigate through your whole site.

How do breadcrumbs Help With SEO?

By now you’ll have a good idea of what is breadcrumbs and how it actually looks on a website. Now let’s talk about how it makes your site more SEO friendly.

01. Breadcrumbs Enhance the user experience

No one likes feeling lost, especially online. You need to keep your site users focused on your content rather than getting confused about where they are and where to go next.

Since breadcrumbs are a common interface element that shows people a way to navigate to higher-level pages with one click,  much easier than clicking the browser’s “Back” button a dozen times to reach the original page.

02. Breadcrumbs Lower Bounce Rate

Breadcrumbs navigation can be a great way to entice the first-time visitors to pursue different sections of your site after having viewed the landing page.

For example, a user lands on one of your blog posts from google organic search, having a breadcrumbs trail on the blog post may tempt that user to click to higher-level pages to view related topics of interest. This, in turn, reduces the overall bounce rate of your site.

03. Doesn’t usually hog screen space

Since they are typically horizontally oriented, short, and typed in plain font, breadcrumb trails don’t take up a lot of space on the page.

The benefit is that they have little to no negative impact in terms of content overload, which is especially vital for a site’s mobile version.

04. Google loves them

Google is consistently refining its algorithm to rank only those pages which are relevant and user friendly.

Since it not only helps Google understand the content structure of your site but also gives a good user experience to your site visitor – thus It can have positive impact on your search engine ranking.

Moreover, Google also shows your breadcrumb trail in search results by either adding structured data to them or setting them up within a seo plugin (discuss in a moment), making your site link more attractive to users in the search results.

Breadcrumbs in Google SERPs

How to add breadcrumbs to your site?

If you are using WordPress CMS, ,you can either use one of the special plugins to add breadcrumbs (Breadcrumb NavXT) or manually code everything on your own.

Method #1 :- Enable Breadcrumbs Through Yoast SEO Plugin

Yoast SEO is a popular WordPress plugin that helps users optimize their content for higher ranking in Google search result. Apart from its main content optimization feature, it also includes several other features for boosting your site visibility, including a function for adding breadcrumbs:

First of all, if you haven’t already installed the plugin, first install and activate it on your website.

Once the plugin is activated, navigate to SEO > Search Appearance and then click the Breadcrumbs tab.

Now under the breadcrumbs settings, make sure to enable breadcrumbs feature by toggling the option to “enabled”. 

Enable breadcrumbs with Yoast SEO
Breadcrumb implementation with Yoast SEO plugin

Other default settings will work well for most of the site, but you can always configure the additional breadcrumbs settings according to your needs. Once you are done click ‘Save changes.’

Wait before you go and check if breadcrumbs appeared on your site or not, you need to complete one more step.

The breadcrumbs won’t show up until you insert a little PHP code into your site theme file. Start by copying the following code:

if ( function_exists('yoast_breadcrumb') ) {
<p id="breadcrumbs">','</p>

Now go to Appearance > Theme Editor and under the Theme Files, add the code below in the single.php or page.php template file.

  • If you want to show breadcrumbs only in your blog posts, you can add it to your single.php file.
  • But if you want it to show on your whole site, add it to your header.php file
GeneratePress Single.PHP file

Note: Keep in mind that whenever you’ll change your WordPress theme, it will override this custom code. To avoid that problem better use a child theme.

Helpful resource – How to use a child theme in WordPress?

Once you have added the code in your theme file, Breadcrumbs will start appearing on your pages.

Using any other SEO plugin like Rank Math ? Follow these guides: How to Enable Breadcrumbs with Rank Math

Method #2 :- Adding Breadcrumbs to Your WordPress Website Using Breadcrumb NavXT Plugin

Adding breadcrumbs with Rank Math or Yoast SEO is only convenient as long as you are already using them for SEO purposes. Otherwise, if you are using some other plugin for content optimization, the above approach might be not useful for you. Fortunately, there are several plugins specifically created for adding breadcrumbs to a WordPress site.

Breadcrumb NavXT is the most-used and frequently-updated standalone plugin currently available for breadcrumbs:

Breadcrumbs NavXT

The plugin makes pretty simple and straight forward to show breadcrumbs on your website by providing a breadcrumb trail widget which can be added in any of your widget area (depending on your WordPress theme).

To add breadcrumbs using this plugin (considering you’ve already installed the plugin), navigate to Appearance > Widgets.

There you’ll see a new Breadcrumb NavXT widget. Drag and drop that widget over to the widget area of your choice and update the widget settings.

Breadcrumbs SEO

Now your breadcrumbs should be visible on your site, depending on the widget location you’ve selected.

#3. Adding Breadcrumbs to Your Woocmmerce store

If you have an online store created with the popular WooCommerce plugin, using the “WooCommerce Breadcrumbs” plugin may be the best for you to add navigational links to your product pages:

Once you have installed and activated the plugin on your site, navigate to Settings > WC Breadcrumbs to customize your breadcrumb trails:

Woocommerce breadcrumbs

Now just Enable breadcrumbs checkbox in order to show breadcrumbs on all of your product pages.

Breadcrumbs SEO Best Practices

Here are some of the best practices for effective breadcrumb implementation:

#1. Make sure that breadcrumbs are mobile-friendly

If you have decided to keep breadcrumb trail visible on mobile devices, make sure your font size is in the appropriate size, so that it doesn’t take unnecessary space at the same time users can easily click on breadcrumbs link.

#2. Don’t make your breadcrumb navigation too large

Your breadcrumb trail is secondary navigation aid to your primary navigation bar, and hence its size and prominence should be less than that of the primary navigation.

For instance, on Kinsta blog, their primary navigation bar is large and recognizable, with columns like “Plan”, “Feature”, “Client” & “Contact”. And their breadcrumb navigation is the smaller section below that reads,” HOME > RESOURCE CENTER > KINSTA BLOG”.

Kinsta Breadcrumb navigation

Similarly, you should also make sure to keep your breadcrumb navigation in such a way that your site user doesn’t mistake it as the primary navigation bar.

#3. Always show the Whole Path in your breadcrumb navigation

If you exclude certain levels in the hierarchy of your site, it will confuse users and the breadcrumb navigation won’t be as helpful for them as it should be. So, make sure that you are giving your users an easy way to explore your site from the beginning.

#4. Progress from the highest level to lowest

It is important that your breadcrumb navigation flow left to right, with the closest link to the left being your site’s homepage, and the closest link to the right being the user’s current page.

#5. Do not link to the current page

Keeping the current page title in the breadcrumb menu is a good practice as it will help in clarity for the user, but do not hyperlink the last item (or current page title)

Because it doesn’t make sense to hyperlink a text that leads to the same page and at the same time, it might confuse your reader.

#6. Add Breadcrumb schema

Given the fact that the search engine like Google is displaying breadcrumbs navigation more prominently in the search result, it is important to add Breadcrumb Schema to your site to help Google understand your breadcrumbs.

What is Schema markup?

In simple language, Schema markup is a way to highlight certain areas of your website to search engine crawlers, so they get a better understanding of how a webpage is structured.

By adding a piece of code into HTML (Also called structured date), you can give search engines more information about your website & content. This will increase your chances of getting rich snippets in the search results.

In fact, now Google search console will also give you notifications if they breadcrumb markup implementation is not done correctly.

Breadcrumb markup in search console

So, how to add breadcrumb schema on your website?

For breadcrumbs navigation, the relevant schema suggested by Google is BreadcrumbList.

It is basically an ItemList consisting of a chain of linked Web pages, typically described using at least their URL and their name, and typically ending with the current page.

 It has the following required properties:

Properties of breadcrumb schema
  • Item – URL of the page for the specific item
  • Name – The title of the breadcrumb
  • Position – the position of this item in the breadcrumb trail.

This is how the code looks like:

"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"

Now you must be wondering, Do I need to add these code and stuff to my site?

In most cases no, If you are showing breadcrumb navigation on your website through a SEO plugin like Yoast SEO or Rank Math then you don’t need to do anything for schema markup.

As soon as you activate the breadcrumb feature, these SEO tool will automatically implement relevant schema markup for your site.

But if you are planning to manually add breadcrumbs navigation to your site through your own custom HTML 7 PHP code, then you have to manually implement the Schema markup too.


Strong UX and SEO both are key elements of a successful blog or website. Enabling Breadcrumbs will make easier for your site user to navigate throughout your site, while also helping search engine to better understand your site structure and index pages accurately.

I have tried to cover everything you should know about breadcrumbs and its impact on SEO. Still, if you have any question-related to breadcrumbs, do let me know in the comment section below.

Source link

Leave a Reply

Your email address will not be published.