Written by on

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: 

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.

Joomla Hosting tip: Siteground

Joomlaseo.com loads in 0.5 - 1 second and has a Pingdom score of 100%!!! Reason enough to recommend Siteground hosting. Fast servers, great support, free SSL, etc. And it's not expensive at all...

 

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:

 

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.

Joomla Hosting tip: Siteground

Joomlaseo.com loads in 0.5 - 1 second and has a Pingdom score of 100%!!! Reason enough to recommend Siteground hosting. Fast servers, great support, free SSL, etc. And it's not expensive at all...

 

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