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

Know how to add data-vocabulary.org Markup on your Blogger template’s Breadcrumb?

2
data:blog.title
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>

In the above script I have wrap up http://data-vocabulary.org/Breadcrumb markup. And you would see the URL of the Blog Label I have used (itemprop="url") URL property of schema.org markup.

And for declaring the Title of the Label I have use (itemprop="title") Title property of schema.org, so now Google search engine able to understand that this is your Blog’s breadcrumb and it will adjust on search engine result page. You can check the above breadcrumb on Google’s structured data testing tool by visiting below URL
  • https://developers.google.com/structured-data/testing-tool/.
structured data testing tools

For your kind information you can use either single quote or double quote on data-vocabulary.org markup.

Converting existing Breadcrumb with data-vocabulary.org markup

Breadcrumb’s script varies template to template. Because web designer’s use code differently. But our main focus should be on 3 scripts. We need to wrap up the whole breadcrumb with data-vocabulary.org markup and using URL and Title property on it.

You can see the below example which is without any data-vocabulary.org markup and search engine won’t understand your template’s breadcrumb.

<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>

I will show you how I have used data-vocabulary.org markup on my template’s breadcrumb script.
And I have used data-vocabulary.org markup in above script and finally my template’s breadcrumb is look like below.

<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>

In the above script I have wrap up the whole script with http://data-vocabulary.org/Breadcrumb markup and used itemprop=’url’ property for denoting URL on breadcrumb and used itemprop=’title’ for denoting the Title of the Blog label. This is really simple. You can see my Breadcrumb status on structured data under Google Webmaster tools. It hasn't any error.

data-vocabulary.org

I hope now you would able to add data-vocabulary.org markup on your Blogger template easily. For any further help please feel free to write me. 
How to Add data-vocabulary.org Markup on Blogger Breadcrumbs?
4 Stars stars - "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 i...

Post a Comment

রাব্বী ভাই আপনাকে অসংখ্য ধন্যবাদ।

I am very glade that you are following my all articles. Its all about web development and hope you would able to improve your Blog SEO.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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

Name

Email *

Message *