HTML5 Valid SEO Friendly Breadcrumbs for Blogger

HTML5 Valid SEO Friendly Breadcrumbs for Blogger

6
data:blog.title
SEO breadcrumb

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 == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>
  &#187; <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>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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'>
&#187; <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'>
  &#187; <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. 
HTML5 Valid SEO Friendly Breadcrumbs for Blogger
4 Stars stars - "HTML5 Valid SEO Friendly Breadcrumbs for Blogger" Breadcrumb has important value in SEO. Breadcrumb helps to display about your post index infor...

happy eid ul adha mubarak
dear brother
Thank you dear
regads from
http://mypremiumtrick.shayrikiduniya.com
or
http://www.shayrikiduniya.com

hello bro only we have to do till step 7?????

Yes Nauman..If you are using my previous version of breadcrumbs then just follow the Update steps (last part).

good article bhai, please suggest me changes in my site http://broadbandtariff.net i have daily more than 300 users but not getting much income by adsense will you please help me in this?

Hi Yogesh..I just visited your site and got several issues. you have used Image rarely in post so more visitors are not feeling interest to visit the posts. This template also included " Auto Load More" This is also affect in SEO.

For generating more revenue a site must have new visitors daily basis. Because returning visitors become ad blind, They don't often click on advertisement because they know wheres the ad will appear. As a result they don't move their mouse over there only focus on content. Changing Ads placement position can be generate more revenue from Adsense. Also try to add responsive ad thus it can display on smartphone or tablet. Hope it will work for you. Thanks

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *