> > How to Add Breadcrumb Microdata in WordPress with NavXT [Tutorial]

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

microdata-breadcrum-richsnippet-featuredToday, 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-breadcrumb
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 ?

microdata-breadcrum-richsnippet
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.
    adding microdata breadcrumb to wordpress using breadcrumb navxt -1 adding microdata breadcrumb to wordpress using breadcrumb navxt -2 adding microdata breadcrumb to wordpress using breadcrumb navxt -3
  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

google structured data testing tool - testing for breadcrumb microdata
Testing Breadcrumb Microdata using Google Structured Data Testing Tool
The following two tabs change content below.

Vipin Raj

Vipin Raj is a web developer specialized in PostgreSQL Database and Data Modeling, the man behind technobytz and a tech enthusiast. Having 3+ years of experience in the IT industry, he is currently pursuing his masters in computer science and information security. He spend his free time writing blog posts with the intension of sharing his knowledge to the tech community.

2 thoughts on “How to Add Breadcrumb Microdata in WordPress with NavXT [Tutorial]

Leave a Reply

Your email address will not be published. Required fields are marked *