How to Add Breadcrumb Microdata in Wordpress with NavXT [Tutorial]

Today, we are going to have a look at how we can add breadcrumb Microdata to you WordPress blog. Before going into details, if you are not at all familiar with Microdata itself, I prefer you to skim through this post:

 Microdata: Go One Step Ahead in Search Engine Optimization(SEO)

What is Breadcrumb Microdata ?

As you know, breadcrumb is nothing but a set of links which tells how you reached a particular page. As you can see above or below breadcrumb describes the hierarchy of your website as well as it let you navigate through your site easily.

Technobytz’s breadcrumb

So, what if we put such breadcrumbs directly into the Google search results page and let people know your site’s hierarchy without even opening your site ?

Google Richsnippet formed out of Microdata breadcrumbs

For sure, it will increase your SEO since it increase your  impressions and clicks . But unfortunately, Google could not derive your site’s breadcrumb automatically unless you wrap it inside a special breadcrumb microdata markup.

A normal breadcrumb for a post will look something similar to this:

<div>
<!-- Breadcrumb NavXT 4.4.0 -->
<a href="http://technobytz.com" title="Go to Technobytz - Technology, Programming, DBMS, Blogging, SEO, Gadgets, Social Networks.">HOME</a>
> <a href="http://technobytz.com/category/programming" title="Go to the PROGRAMMING category archives.">PROGRAMMING</a>
> <a href="http://technobytz.com/category/programming/dbms" title="Go to the DBMS category archives.">DBMS</a>
> Closure Table - Store Hierarchical Data Seamlessly | PostgreSQL</div>

Adding breadcrumb microdata markup will result in the following HTML:

<div>
<!-- Breadcrumb NavXT 4.4.0 -->
<span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
<a itemprop="url" href="http://technobytz.com" title="Go to Technobytz - Technology, Programming, DBMS, Blogging, SEO, Gadgets, Social Networks.">
<span itemprop="title">HOME</span>
</a>
</span>
> <span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
<a itemprop="url" href="http://technobytz.com/category/programming" title="Go to the PROGRAMMING category archives.">
<span itemprop="title">PROGRAMMING</span>
</a>
</span>
> <span itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
<a itemprop="url" href="http://technobytz.com/category/programming/dbms" title="Go to the DBMS category archives.">
<span itemprop="title">DBMS</span>
</a>
</span>
> Closure Table - Store Hierarchical Data Seamlessly | PostgreSQL
</div>

To know more about breadcrumb microdata, go here.

So, in the next step we are going to see how to add breadcrumb microdata markup in your WordPress blog.  WordPress doesn’t have an inbuilt breadcrumb module, so we have to use ‘plugins’ in order to add breadcrumbs. Breadcrumb NavXT is one such plugin used widely to add breadcrumbs to WordPress. The latest version of Breadcrumb NavXT as of today is 4.4.

This tutorial assume you have installed and configured breadcrumb NavXT

How to add Breadcrumb Microdata using Breadcrumb NavXT ?

1. Go to Breadcrumb NavXT settings in Dashboard.
   
2. Now, all of the annotated fields, we have to add microdata markup:
   • Replace field (A) with:

     <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a title="Go to %ftitle%." href="%link%" itemprop="url"><span itemprop="title">HOME</span></a></span>
     

   • Field (B)s with:

     <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a title="Go to %ftitle%." href="%link%" itemprop="url"><span itemprop="title">%htitle%</span></a></span>
     

   • Filed (C) with:

     <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a title="Go to %ftitle%." href="%link%" itemprop="url"><span itemprop="title">%htitle%</span></a></span>
     

   • In the similar manner you can edit field (D), (E), (F) and other such fields in Miscellaneous Tab.
3. Save Settings and That’s it!

You can test your breadcrumb microdata using the Google Structured Data Testing Tool

Testing Breadcrumb Microdata using Google Structured Data Testing Tool