Joomla 3.3 Microdata

and why it is so important for SEO

Bartłomiej Krztuk
Apr 25, 2014 · 4 min read

Microdata is one of the best new features announced in Joomla! 3.3. Rich snippets like microdata (but also RDFa or microformats) provides additional informations for search engines for better understanding your content. In short words with microdata you will say to Google or any other browser engine :

Hey, here is my article and here you will informations about the author, publish date etc.

This microdata syntax can describe a specific type of information like article or person but also a movie, event, product or place. List of available schemas you can check on schemas.org website and also learn more about how mark up you content.

How to enable microdata in Joomla! 3.3?

You don’t have to do anything to use microdata with Joomla! 3.3 because improved article or contact view with additional microdata is available by default. There is also no option to disable it so all latest Joomla! users get SEO optimised content without changing anything in configuration or in article details.

Microdata details are not visible at first look because this additional HTML5 tags don’t change anything for regular website visitor. Let’s look at sample code from Google Webmaster Tools help. This is default way to display author information block without schemas syntax :

<div> 
My name is Bob Smith but people call me Smithy. Here is my home page:
<a href=”http://www.example.com">www.example.com</a>
I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>

as you can see there is a simple div container and plain text with link inside. Search engine will interpet this part of code as a default text, search engine don’t know whether it is related with some person, article or what type oc content this part describe. Exactly the same text with additional microdata :

<div itemscope itemtype=”http://data-vocabulary.org/Person"> 
My name is <span itemprop=”name”>Bob Smith</span>
but people call me <span itemprop=”nickname”>Smithy</span>.
Here is my home page:
<a href=”http://www.example.com" itemprop=”url”>www.example.com</a>
I live in Albuquerque, NM and work as an <span itemprop=”title”>engineer</span>
at <span itemprop=”affiliation”>ACME Corp</span>.
</div>

It is not hard to see that the code is a little bit longer but it contains additional schemas informations. First of all the div container has itemscope definition which describe what type of vocabulary we will use so what type of content you want to describe — in this example it is Person. Every single imemprop describes particular person properties like url, nickname, name, title etc. Thanks to this additional code, Google and other browser engines can understand this HTML code and know that this describe some person.

I have Joomla! 3.3 how to check this microdata details?

When it comes to Joomla! implementation you just can’t see this changes until you will check your website source code. One of the most common use of microdata is to describe article and author. In Joomla default article view use the microdata but it is also used on contact page . In previous Joomla! versions default article content code looks similar to this one :

<div class=”item-page”>Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

Since Joomla! 3.3 this code is extended by additional details :

<div class=”item-page” itemscope itemtype=”http://schema.org/Article">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

which clearly say to search engine — “Here start my article and there you should look for high quality content ☺”

Microdata syntax allows to include hierarchical data so the article definition is not the only change,when it regards to author details previously the code just display author name :

<dd class=”createdby”> Written by Joomla </dd>

and now you should see something similar to this :

<dd class=”createdby” itemprop=”author” itemscope itemtype=”http://schema.org/Person"> Written by <span itemprop=”name”>Joomla</span> </dd>

This two schemas are main change in single article view but of course they contain more itemprop definitions like dataPublished, genre, dateModified or interactionCount.

There is much easier way to check your document data structure by using Google Structured Data Testing Tool. With this tool all that you need to do is to paste link to your website and after that you will get all microdata included informations with syntax validation.

Joomla CMS

Do more with Joomla!

Bartłomiej Krztuk

Written by

</html> — the end is always near

Joomla CMS

Do more with Joomla!

More From Medium

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade