How To Add Breadcrumbs In Blogger Template: Complete Guide

Hello Guys, you will know in today's article how you can add Breadcrumbs in the Blogger template.

Breadcrumbs are very important to be engaged in any blog or website.

Because there are many error shows related to breadcrumbs in the search console. It is very important to fix them.

But often many people are not aware of Breadcrumbs but they must have seen Breadcrumbs.

When we open a website or blog post, we get a Breadcrumbs show. The picture below shows Breadcrumbs.

Breadcrumbs 

So today you will know more about Breadcrumbs and you remained with us in this article

Which will know how to add breadcrumbs in the blogger template. So let's start.

What is Breadcrumbs

Breadcrumbs is a navigation system in text form. This tells the visitor who comes to our blog or website that which category of the post of that blog you are in.

Breadcrumbs are in the top section of our blog post.

It looks common. But from the perspective of Google, Bing, and other search engines, it is very useful.

This shows our blog structure post. If you do not use it in your blog, then you will get the error of breadcrumbs through your search console.

Benefits of Using Breadcrumbs

1. It does the work of navigation in the blog. Which acts as a navigator for the visitor.
2. This helps make any blog user friendly.
3. It also shows the particular category of any of your posts.
4. Breadcrumbs are useful from a search engine perspective.

How to Add Breadcrumbs in Blogger Template

#Step1: First Login to your Blogger Account.

#Step2: Now Click on the Theme.

#Step3: Then Click on Edit HTML.

#Step4: Click and Press Ctrl + F from your keyboard.

#Step5: Find <b:includable id='post' var='post'>Tag

<b:includable id='post' var='post'>

 

 

#Step6: Now replace the found code with the below code.

<b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<div class='BreadCrumb_Blogs'>

<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>

<span itemprop='title'>Home</span></a>&#187;

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<span typeof='v:breadcrumb'>

<a expr:href='data:label.url' itemprop='url' title='Categories' property='v:title' rel='v:url'>

<span itemprop='title'><data:label.name/></span>

</a>

</span>

<b:if cond='data:label.isLast != &quot;true&quot;'>|

</b:if>

</b:loop>

</b:if>

&#187;

<a expr:href='data:post.url' itemprop='url' title='Post Title'>

<span itemprop='title'>

<data:post.title/>

</span>

</a>

</div>

</div>

</b:if>

#Step8: Find </b:skin> Tag

#Step9: Paste the below given Code over </b:skin>

.BreadCrumb_Blogs:before {

    font-size: 85%;

    letter-spacing: 2px;

}

 .BreadCrumb_Blogs {

    width: auto;

    padding: 0 0 5px 10px;

    margin: 0 5px;

    font-size: 95%;

    border: 2px solid #EDE;

    border-top-left-radius: 10px;

    border-top-right-radius: 10px;

    text-align: left;

    color: #d5d5d5;

    background: black;

    line-height: 22px;

}

 

#Step9: Click On Save

Also Read: Add Floating Social Media Share Buttons For Blogger/BlogSpot

How To Fix Breadcrumbs Error In Blogger

If you do not add Breadcrumbs to your Blogger template. So you will definitely see the error of Breadcrumbs in the search console.

If you want to fix this error, you can fix the error of Breadcrumbs by following the method given below.

First Method

First of all, check whether your blogger template has Breadcrumbs or not.

If not, you can fix the Breadcrumbs error by following the process mentioned above.

If the breadcrumbs error is not fixed even after you adopt the first method, then follow the method given below.

Add Label to Blog Post

Often we forget to add labels to our blog posts. Which gives us the error of breadcrumbs.

Because the navigation of Breadcrumbs is according to the label of the post. So you must add labels to every blog post.

Second Method

Enable robot.txt by going to your blogger settings. And paste your blog's robots.txt file

Change Blogger's custom robots header settings according to you.

If you still have an error show of Breadcrumbs, then you must tell us by commenting and we will definitely resolve it

Also Read: Featured Posts Widget For Blogger 

Also Read: Blogger SEO: A Complete Guide