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.
 

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.

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.