Adding breadcrumbs microdata to Joomla

logo pdb
Backups, updates & easy restores for Joomla & Wordpress (read the review). Use coupon JOOMLASEO for €25 in free credits to try it out.

Adding microdata to your pages is a nice way of adding structure to your website's pages. Untill now, microdata have not yet fully found their way into Joomla, though work is underway. Recently I decided that it would be nice to have my breadcrumbs correctly styled with microdata. The advantage would be that the breadcrumb path would be visible in the Google SERP pages. Currently this is not the case, as you can see in the situation for my microdata page, it just shows a URL: 

no-breadcrumb-microdata

NB: Sinc Joomla 3.4, breadcrumbs are nicely styled by Joomla with microdata, so no need to add these yourselves anymore.

There are several ways to add the correct syntax to the breadcrumbs module. You could install an extension (scroll down for options) or buy a set of overrides that includes the breadcrumb module. However, the breadcrumbs module is very simple, and you can quite easily create a custom template override. Especially in Joomla 3, creating overrides has been made extremely easy, so why not create one ourselves.

logo 500

Basically we just want to add some additional syntax to the module. Let's take a look at how the output looks with and without microdata. First let check the original output of the module:

<ul class="breadcrumb">
<li><a href="/" class="pathway">Home</a></li>
<li><a href="/" class="pathway">Checklist</a></li>
<li><span>Microdata</span></li>
</ul>

We should change this into something like this:

<ul class="breadcrumb">
   <li><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/" itemprop="url"><span itemprop="title">home</span></a> </div></li>
   <li><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="/checklist" itemprop="url"> <span itemprop="title">Checklist</span> </a> › </div></li>
   <li><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">Microdata</span></div></li></div>
</ul>

It's some more code, but it should not be to heard to put this in an override. The following is applicable for Joomla 3, but if you follow along, it should not be that hard to do the same for Joomla 2.5.

First, we need to create an override to work from:
Go to Extensions > Template Manager > Templates, and select the current template. The go to the tab called Create overrides and click on mod_breadcrumbs. The override will now be created in html\mod_breadcrumbs\default.php, and you can now navigate to this file. First, it will look like this on line 53:

echo '<a href="' . $item->link . '" class="pathway">' . $item->name . '</a>';

Change this to:

echo '<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="' . $item->link . '" class="pathway"><span itemprop="title">' . $item->name . '</span></a></div>';

This will style all but the last entry in the breadcrumbs list. The last entry is not a link, so it does not need the itemprop="url" bit, but it does need a title. So, also look up the following line on line 72:

echo '<span>' . $item->name . '</span>';

Change it to:

echo '<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">' . $item->name . '</span></div>';

Now all your breadcrumb links should contain the correct syntax for microdata. You can easily verify whether this is implemented correctly in the Webmaster rich snippets tool at www.google.com/webmasters/tools/richsnippets or in your own Webmaster tools account under Search appearance > Structured data.

If indeed correct, your breadcrumbs should show in the SERP pages. Note that sometimes due to updated HTML, your CSS may need to be updated, depending on your template. For me, it took 2 days to be updated in Google:

 with-breadcrumb-microdata-joomla

You can download the override here if you want. Just unzip the file in the html-folder of your template:

Download breadcrumbs microdata override (updated for Joomla 3.2)

Make sure to check what the next Joomla updates look like. It may offer microdata in the core at some stage. Check back on this blogpost regularly, I will make sure to update the blog. Once the Joomla core offers the possibility, simply remove the override again.

logo 500

Extensions to add breadcrumbs microdata

If you don't like coding, of course there are also extensions that can do this for you. One of these is Microdata Google Breadcrumbs, which basically replaces the default core breadcrumbs module with microdata added. Richey's Webb Microbread Module works similarly.

If you are already using SH404SEF, you can set a switch to add microdata in JSON format (a bit different from the example above, but just as good). This is a new option, only added in version 4.6.0 (July 2015):

google breadcrumbs

About this site

Joomlaseo.com is fully built and written by Simon Kloostra, SEO Specialist and Webdesigner from the Netherlands. I have also published a book and blogs for companies like OStraining, TemplateMonster, SEMrush and others.