How to Add data-vocabulary.org Markup on Blogger Breadcrumbs?

Breadcrumbs or breadcrumb is a graphical control element, which is used as navigation in user interfaces. It allows Website visitors to keep track of their locations within WebPages. Breadcrumb is widely used on web design. And this is count as user friendly navigation for Blog visitors. Because by using Breadcrumb Blog visitors able to navigate in different label or categories of a Blog site.

However for search engine it is necessary to understand about your Breadcrumb. As a result they can identify your Blog’s structured data accurately. Almost all major search engines together created a machine readable language and specially controlling their search robot to understand a web site’s structured data.  As a result our website must design and code according to their language. We know about schema.org markup, which is frequently using for understanding website’s script. And I have already shared about different schema.org markup for fixing different template error. But for Breadcrumb search engine uses data-vocabulary.org markup. In this tutorial I will show you how to use data-vocabulary.org markup on your Blogger template for giving details information about your blog’s breadcrumb.

There is not any Google’s guideline for using any data-vocabulary.org markup on Breadcrumb. But you can follow the below sample to solve the issue. This is very simple to use. The below breadcrumb script is containing data-vocabulary.org markup on breadcrumb.

<div itemscope=''  itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/Label1" itemprop="url">
    <span itemprop="title">My First Label</span>
  </a> ›
</div>
<div itemscope= ''  itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/Label1/Label2" itemprop="url">
    <span itemprop="title">My Second Label</span>
  </a> ›
</div>
<div itemscope=''  itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/Label1/Label2/Label3/Label4" itemprop="url">
    <span itemprop="title">My Third Label</span>
  </a>
</div>

<div class='breadcrumbs'>
<span Breadcrumb><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span>Home</span></a></span>
&#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span Breadcrumb>
<a expr:href='data:label.url' rel='tag'><span><data:label.name/></span></a></span>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</div>

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
&#187;
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>
<b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</div>