HTML5 Valid SEO Friendly Breadcrumbs for Blogger

Breadcrumb has important value in SEO. Breadcrumb helps to display about your post index information with categories in search engine. Though I have found many popular PR5 blog and website that giving argument against breadcrumb that this is not SEO friendly but I am not agree with them.

Using Breadcrumbs have several benefits for Search Engine and Visitors

Breadcrumb in the eye of Search Engines

It provide a mechanism to highlight important keywords in search engines.
Breadcrumb affix content relevancy to content because they Search Engine is keyword-intensive.
Breadcrumb highlights specific anchor text rich linking to internal pages.

Breadcrumb in the eye of Site Visitors

Breadcrumbs provide a illustration about keyword guideline
Breadcrumb provide a keyword-rich way blog navigation
It encourage to higher CTR from search engine result pages.

I have already shared SEO friendly breadcrumb. But this breadcrumb is HTML5 Valid SEO Friendly. I have brought little change in CSS code so it will be look different.

Step 1 Log in to your Blogger Account and Click on Template ->

Step 2 Now click on Edit HTML-> Unfold code ?

Step 3 Now find ]]></b:skin> by Pressing Ctrl+F

Step 4 And Paste the below code above ]]></b:skin>

/*HTML5 Breadcrumbs by www.bloggerspice.com */
.breadcrumbs a:hover, .status_msg a:hover {text-decoration: underline;}
.breadcrumbs a, .status_msg a {color:#5B5B5B;}
.breadcrumbs, .status_msg {
width: 720px;
background: #FEFFE;
-webkit-box-shadow: 0 0 15px #222;
-moz-box-shadow: 0 0 15px #222;
box-shadow: 0 0 10px #888;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 10px;
margin-top: 2px;
font-size: 10px;
margin-bottom: 25px;
text-transform: uppercase;
color: #666;
}

Step 5 Now find <b:includable id='main' var='top'> by Pressing Ctrl+F

Step 6 Replace <b:includable id='main' var='top'> with the below code block above

<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"'>

<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"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives 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 filed 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'/>

Step 7 Now save your template.

How to Update SEO friendly Breadcrumb with HTML5 Valid Breadcrumb?

Those who are using my previous releasec SEO friendly breadcrumb then have to do little change in older code. This is sensitive work so take a backup of your blog template before proceed. Thus any further mess can be recover.

Step 1 Please find the below code block

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

Step 2 Now replace it with below code block.

<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>

I hope you have successfully installed breadcrumb in your blogger templates that will make your blog more SEO friendly and HTML5 valid. If you have any query then feel free to contact with me.