Add Breadcrumbs in Blogger (Blogger SEO Specials)

Search engine optimization is quite easy as it may appear, SEO it basically can be defined in general term as guidance system for search engine. This small piece of code helps the Google crawlers to identify the data in more efficient manner as it does without it. This SEO can also be implemented on breadcrumbs so the respective breadcrumbs of that particular article also appear on Google search result.

This post is quite useful for deriving traffic from Google Search result because the more information is appearing on Google search result the more traffic you gain irrespective for those who don’t have applied it. It is recommended for you to back-up your template before proceeding.

Applying Breadcrumbs in Blogger.

Go to Blogger >> Template and click “Edit HTML”.

Press Ctrl+F for searching and search for this code in template.

<div class='blog-posts hfeed'>

You may find this code twice. Just add the following code just below it in both codes found.

<b:include data='posts' name='breadcrumb'/>

Now, search for this code in your template.

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

Now just after its closing end, means after this b:includable id='backlinks' var='post'>---</b:includable.

<b:includable id='breadcrumb' var='posts'>

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

<p class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>

<span class='post-labels' typeof='v:breadcrumb'>

<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a>

<b:loop values='data:posts' var='post'>

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

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

<span typeof='v:breadcrumb'> &#187;<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>

<b:else/>&#187; Unlabelled</b:if>&#187; 

<span typeof='v:breadcrumb'>

<span property='v:title'><data:post.title/></span>

</span>

</b:loop>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'><p class='breadcrumbs' typeof='v:breadcrumb'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a> &#187; Archives for <data:blog.pageName/></span>

</p><b:else/>

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

<p class='breadcrumbs' typeof='v:breadcrumb'>

<span class='post-labels'>

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

<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a> &#187; All posts<b:else/>

<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a> &#187; Posts filed under <data:blog.pageName/></b:if></span></p></b:if></b:if></b:if>

</b:includable>

Use “.breadcrumbs” id for styling your breadcrumbs according to your blogger design.

 Applying Breadcrumbs in website.

In general website, use this example breadcrumbs structure in your website HTML.

<span class="breadcrumb">

<span xmlns:v="http://rdf.data-vocabulary.org/#">

<span typeof="v:breadcrumb">

<a href="http://www.websitename.com" rel="v:url" property="v:title">Home</a></span> &#187; 

<a href="http://www.websitename.com/tag/Tag1/" rel="v:url" property="v:title">Tag1</a></span> &#187; 

<span typeof="v:breadcrumb">

<a rel="v:url" property="v:title" href="http://www.websitename.com/tag/Tag1/">Tag2</a>

</span> &#187;

<span typeof="v:breadcrumb">

<a rel="v:url" property="v:title" href="http://www.websitename.com/tag/Tag3/">Tag3</a></span> &#187;

<span typeof="v:breadcrumb"><span property="v:title" rel="v:url"><a href="your-artcile-link">your Artcile name</a></span></span></span>

Here Tag1, Tag2, and Tag3 are the Tag the Article have been Categorize.