Published: Wednesday, February 22, 2017, Updated: Thursday, December 29, 2022

How to Add Breadcrumb With Structured Data in Blogger

Learn how to add breadcrumb navigation in Blogger with Structured Data.


Breadcrumbs navigation widget for Blogger will make your website more user friendly and search compatibility.
 
Learn how to add Breadcrumb in Blogger
Add Breadcrumb to Blogger
Adding Breadcrumb Structured Data or Schema Markup will help your Blog to Search Engine as effective to show breadcrumb instead of Full URL.
Breadcrumb Structured Data

To add breadcrumb navigation bar in Blogger, apply the following steps:

1. Go to Blogger and select your blog and choose 'Template → Edit HTML'
2. Click a single on template code and 'CTRL + F' and search for
<b:includable id='main' var='top'> and replace with the following code

Just below paste the following code
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  » <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archive For<data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All Posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Add the following CSS just before ]]></b:skin>

.breadcrumbs {
    border: 1px solid black;
    background: #fff;
    margin-top: 2%;
}

.breadcrumbs a {
    color: #b93434;
    text-decoration: none;
}

.breadcrumbs a:hover{} 

You can customize CSS with your expectation.

Recommended article:  Adding Specific Code Syntax Highlighter For Blogger.
Have got this article helpful or not working? Put your comment below.
Elliyas Ahmed
Elliyas Ahmed
Elliyas Ahmed, founder of COMPROMATH, is a Computer Science and Engineering graduate who excels in Blogging, Website Development, and SEO. He offers freelancing services to help clients succeed online. Learn more about Elliyas Ahmed.