Microdata. What is it? And how it applies to Joomla SEO

Microdata is part of the HTML5 specifications and it's now a vital part of any SEO strategy Microdata is part of the HTML5 specifications and it's now a vital part of any SEO strategy

Welcome to the new world of SEO where search engines don't care about what keywords you stuff into your titles or how many backlinks you paid for through fiverr.com. If your not using Microdata yet, you soon will be. If you care about SEO, you don't have a choice.

In September 2013, Google quietly rolled out it's Hummingbird update. Hummingbird represented a complete change to Google's search algorithm. Everything we knew about keywords, metadata, pagerank, backlinks and all the other items that make up our collective SEO knowledge was thrown out the window.

No longer is Google a search engine for finding your keywords in web content. The Hummingbird update is designed to find answers to your questions. It uses what it knows about you, your age, your location, your browsing habits, your gender, your likes and social media activity to anticipate the context of your search. Rather than give you links to information about your search term, Google tries to anticipate why you are searching for it and points you in the direction of a relevant answer. To emphasise, Google often gives the answers directly. Try Who is the prime minister of Australia? or When did Kurt Cobain die?

As such, our role as developers, SEO professionals and content creators has changed. We need to pay special attention to things like Google Authorship, Open Graph data, twitter cards and - the subject of this article - Microdata.

What is Microdata?

Microdata is additional lines of markup describing your content to search engines. It's invisible to your visitors and has no effect on their experience with your site but it gives search engines a high level of insight into your content.

One thing about Microdata is that it often gets called different things. Structured Data, Microdata, Rich Snippets and Schema have all been used to describe Microdata. They are all different things in their own right. Microdata is the HTML5 Specifaction of structured data. Google uses the Microdata schema to create rich smippets in search results.

Confused yet? Dont be.

Microdata is a simple concept once you understand it's application.  

An example would be a site with an events calendar and a blog. An event page will include a title, a date, a time, a description of the event, a venue and a link to a registration form. On the same site the author may publish a blog post about the event. This will also contain a title, a date, a time, a description of the event, a venue and link to the registration form. You can see how a search engine may find it hard to identify the difference between a blog post and an event listing. Or it may confuse the blog date or comment dates with the event date as it's all just text in code to a crawler.

Using microdata we explicitly identify and define all this information. By defining the item scope, type and properties, it makes it easier for search engines to scan your page and display relevant Rich Snippets in search results.

How do I use Microdata?

Let's say you are publishing a recipe on your foodie website. The HTML markup may look something like this.

<div>
    <h1>Nana's Linguini</h1>
    <img src="/linguini.jpg" />
    <p>By Catherine, November 5, 2013</p>
    <dl>
        <dt>Ready in:</dt> <dd>25 minutes</dd>
        <dt>Calories per serving:</dt> <dd>250</dd>
        <dt>Fat per serving:</dt> <dd>12g</dd>
    </dl>
    <h2>Ingredients</h2>
    <ul>
        <li>375g linguine or fettuccine (green or plain)</li>
        <li>250g punnet of cherry tomatoes</li>
        <li>1 Tblsp olive oil</li>
    </ul>
    <h2>Directions</h2>
    <ul>
        <li>Cook pasta in a large saucepan of boiling water for 12-15 minutes</li>
    ...

The same HTML marked up with Microdata would look like something like this.

<div itemscope itemtype="http://data-vocabulary.org/Recipe">
    <h1 itemprop="name">Nana's Linguini</h1>
    <img itemprop="photo" src="/linguini.jpg" />
    <p>By <span itemprop="author">Catherine</span>, <span itemprop="published">November 5, 2013</span></p>
<p>Rating: 5 stars</p>
    <dl itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
        <dt itemprop="calories">Calories per serving:</dt> <dd>250</dd>
        <dt itemprop="fat">Fat per serving:</dt> <dd>12g</dd>
    </dl>
    <h2>Ingredients</h2>
    <ul itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
        <li><span itemprop="amount">375g</span> <span itemprop="name">linguine or fettuccine (green or plain)</span></li>
        <li><span itemprop="amount">250g</span> <span itemprop="name">punnet of cherry tomatoes</span></li>
        <li><span itemprop="amount">1</span> <span itemprop="name">Tblsp olive oil</span></li>
    </ul>
    <h2>Directions</h2>
    <ul itemprop="instructions">
        <li>Cook pasta in a large saucepan of boiling water for 12-15 minutes</li>
    ...

The microdata in red tells search engines specifically that this is a recipe. Nested inside the initial itemscope declaration are itemprops identifying the name, photo, author, published date, nutritional information, ingredients and instructions. Notice that nested with the itemprop for ingredients are further itemprop declarations for the name and amounts of each ingredient.

Imagine now how easy it is for Google to identify all the information within this item and how it relates to each other. If you were to Google "How many calories in Nanna's Linguini" Google could easily provide that information from the microdata declarations.

But, as you can see, Microdata can add a lot of markup to the source of a page. And the list of item types and properties is enormous. The question for content creators is how can you easily add this to your content? Most content administrators dislike editing HTML and let's face it, all these extra spans, itemprops, itemtypes and itemscopes are tedious.

How do I use Microdata with Joomla?

Joomla devs have done a great job of implementing a Microdata library into the Joomla! core as of v3.2. Extension developers can now build microdata into their extensions without end users having to worry about it. It's already included in the default templates so your article titles, dates, authorship and the like are marked up automatically. View the source of the Joomla demo and you'll see the Microdata in the code. 

If your site was built before the release of Joomla!3.2 and it uses template overrides you may not have the benefit of Microdata and require some extra development work.

Additionally, the JCE Editor extension has a Microdata addon which allows you to define item types and properties by highlighting your content and selecting the relevant values from dropdown lists. It's excellent and it means you don't have to trawl through a multitude of item definitions on the terrible schema.org website.

JCE microdata

Final thoughts on Microdata

Microdata allows you to mark up everything from infectious diseases to software applications. And within each type is a huge list of properies. You can define names, descriptions, urls, associations, audiences and even if it's family friendly.

But, I can't help the horrible feeling that this requirement is just creating more work for developers and content creators. It's adding an extra layer of complexity to the already complex task that is writing quality content. As unfortunate as that may be, it's a necessary evil. This is the new world of SEO where search engines don't care about what keywords you stuff into your metadata. It's all about identifying quality content and if this helps get a leg up in search engines it's well worth the investiment of time.

john-pitchers-avatar smAbout John Pitchers

John Pitchers is co-founder and lead developer at Joomstore where his primary role is the design and development of Joomla websites. He is also the developer of the FocalPoint maps extension for Joomla. John has been building CMS based web sites since 2004, originally working with Mambo before it forked into Joomla. When not writing PHP, Javascript or CSS you'll find John carving up the hills around Baldivis on his longboard (long before Walter Mitty made it famous).

Find out more about John on his About.me page and . Follow John on Twitter.

These posts may interest you...

Leave a comment