Build SEO Friendly Breadcrumb Trail For Your Blog

Build SEO Friendly Breadcrumb Trail For Your Blog

Comments: 7

What is a Breadcrumb?

A “breadcrumb” (or “breadcrumb trail”) is also known as secondary navigation scheme that reveals the different location in a website or blog. Breadcrumbs usually look like horizontally across the beneath of your blog post title. Often we see it below title bars or headers. And it provide links back to each previous pages. Any visitors can easily navigate through Breadcrumbs current page. It is something like hierarchical site structures. First shows parent pages of the current one and after that its children pages. Breadcrumbs provide a trail for the blog/website visitors to follow back to the starting or entry point.

We can see some specimen of breadcrumbs below :-

Home page > Section page > Subsection page

Home page: Section page: Subsection page


home page : section page 1 : section page 2

Types of Breadcrumbs

Until now we have got only three types of breadcrumbs:
  • Attribute-based: path (or history) breadcrumbs are dynamic and show the path that the user has taken to arrive at a page.
  • Location-based: location breadcrumbs are static and show where the page is located in the website hierarchy.
  • Path-based: attribute breadcrumbs give information that categorizes the current page.
You can usually find breadcrumbs in websites that have a large amount of content organized in a hierarchical manner. You also see them in Web applications that have more than one step, where they function similar to a progress bar. In their simplest form, breadcrumbs are horizontally arranged text links separated by the “greater than” symbol (>); the symbol indicates the level of that page relative to the page links beside it.

Benefits of Using Breadcrumbs

You maybe think it is useless but Breadcrumbs has some benefits. Here are just some of the benefits of using a breadcrumb trail.

  • Convenient for users.
  • Reduces clicks or actions to return to higher-level pages
  • Doesn't usually hog screen space
  • Reduces bounce rates

How to Make SEO Friendly Breadcrumbs

We have already got many tutorials that explain how to create breadcrumbs in Blogs. This time I will explain how you can create a SEO friendly breadcrumbs that will show all labels indexed by Search Engines as well as in your blog site. This structure is different from WordPress, which can make the child category. Structures in blogger only Home then all of your blog Labels.

Home > Label1 > Label2 > Label3

To Install this add just follow the below Tutorials. You will find it really easy to install. Before applying this code block my blog link was appear like below:

tips and tricks

After applying the code I got the result like below image-

tech blog

As well as you will get some changes in your blog like below image-

blogger tricks

Step 1 Click on -> Template -> Edit HTML

Step 2 Now Click On  Expand Widget Templates

Step 3 Now Find this code ]]></b:skin> by pressing  Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> 

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Step 5 Now Find this code <b:includable id='main' var='top'> by pressing  Ctrl + F

Step 6 Replace the above code by below code.

<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: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' xmlns:v=''>
<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'><></a></span>
&#187; <span><data:post.title/></span>
<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 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>
<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>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Step 6 Now Save the Templates. And check the blog. 

Note: It may take 1/2 hour to appear Breadcrumb Trail in Search Engine.

Related Post

Speak Your Mind

Macrosoft says: 2/28/2013

Great seo tips.

PHP Development Company

computer tips world bd says: 3/01/2013

WOW man you are really awesome.

ashok says: 7/18/2013

bro plssssssss help me iam not able to place your cods in my blog

Mohammad Fazle Rabbi says: 7/18/2013

Hi Ashok I have checked your blog. Your template already have Breadcrumb code. SO you don't have to follow this tutorial.

ashok says: 7/18/2013

bro once contact me plz i have so many problems plsssssssssssssssss


iliyas shaikh says: 7/30/2013

dear brother not work in my blog, please help also comment(thareded comment like you not work please help my great pleasure

regards from shayrikiduniya@com

Mohammad Fazle Rabbi says: 7/30/2013

Hi Iliyas..Your template code is little different. Find the below line--

div class='blog-posts hfeed

and paste the code from Step 6 above this code.Hope it will work now.

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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


Email *

Message *