20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Install Breadcrumbs Valid HTML5 + Schema Markup

Tutorial on installing data-vocabulary.org and creating valid html5 and adding schema.org markup on breadcrumbs for better seo in blogger template.learn trick to add create make install seo friendly validate with html5.
installing valid html 5 and data-vocabulary.org breadcrumbs in blogger template
Are you using Breadcrumb Trail Navigation System in your blogger website or blog ? Do you know the benefits of installing Breadcrumb functions in your blogspot theme? Don't worry if you have not yet installed SEO friendly and valid HTML 5 with Schema.org markup today we are going to share How to Add Schema.org Markup and Valid HTML5 Breadcrumb in blogger.

What is Breadcrumb?

Breadcrumbs are the easiest way to display navigation system for user interface.It also called Trail Navigation System.Trail navigation system looks like Home->Labels->Widgets->Post Name.Breadcrumbs are user and SEO friendly.It provide the navigation information of your website or blog to google for rich snippets in google search result.Nowdays there are lot of improvements occurs in rich snippets , year back Schema.Org markup launched and HTML 5 version is out ,so if your blogger website or blog template is old like 2-3 years then you must re install the breadcrumbs in your blogspot theme.

Benefits of Installing Breadcrumbs in Blogger template

So till now we expect that you must understood what is a breadcrumbs and what's the use of breadcrumbs in blogger template.If you add breadcrumbs in your blogger template then you must keep this in your mind you have enabled navigation system for google rich snippets.In order to improve your rich snippet in google search result page you must add schema Data-vocabulary.org markup with the touch of valid HTML 5 in your breadcrumb have added all the important elements in the breadcrumb code snippet.We have seen still lot's of website does not have valid HTML 5 and Schema markup result their website or blogs rank is decreasing because now google have updated their algorithms to support the schema.org markup websites.Breadcrumb with data vocabulary markup is very easy to install in blogger and it will also help to improve your SEO and Alexa Ranking.So you must add schema markup breadcrumbs , in order to install follow the steps mentioned below.

How to Add Valid HTML 5 + Schema Markup Verified Breadcrumbs in blogger

Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Now Copy the below CSS code snippet and past just before/above </style> or ]]></b:skin>.
.breadcrumbs{padding:10px;margin-bottom:20px;margin-top:0px;font-size:12px;color:#3F3F3F;border-bottom:1px dotted #828282;}
Step 5. Now Search for the following code snippet <b:includable id='main' var='top'> and replace with the 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'>
<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>Archive 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 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 your Template...Done !

Now Visit the below google structure data testing tool url to check that you have installed correctly breadcrumbs in your blogger template.
if you have installed correctly you will see the result like this:
breadcrumbs testing in google structure data testing tool

3 comments

  1. Thanks for more informations..i resppect for your site..
    1. Thanks For your kind words.:)
  2. I admire this article for the well-researched content and excellent wording about HTML5. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much. HTML5 tutorial in hindi