Build SEO Friendly Breadcrumb Trail For Your Blog

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
or

Home page: Section page: Subsection page

or

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:

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

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

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: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' 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>
</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 6 Now Save the Templates. And check the blog.