Microdata – a missed opportunity

In this post we will explore the differences between Microformats and Microdata. We will describe the differences between the two and demonstrate how to build a contact card using both formats. For me Microdata is a hidden gem of HTML5 and if used properly can enhance your search engine optimisation no end!  However, there is a massive problem – Chrome, IE , Safari and Android based browsers do not support them  Microdata Browser Support (accessed 03 Feb 2016)!!

So why bother writing a post about Microdata?

Well, I think not including support for Microdata is a wasted opportunity – why not encourage best practice SEO? I hope that this post will fuel your passion to feel the same way about this hidden and under valued tool in the HTML5 armoury.

Objectives:

• Identify what micro formats are
• Identify what micro data is
• Demonstrate the differences between them
• Build a simple vcard using a micro format and a microdata approach

Microformats

What are Microformats

“Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current behaviors and usage patterns (e.g. XHTML, blogging).”

Source: http://microformats.org/about

In essence Microformats categorise data in such a way that it can be used for specific actions such as storing contact details of a user or importing an event into a calendar. It is in fact metadata that describes what the data is – such as a name or email address. So how does it do this? The building blocks of Microformats is XML. XML is the ideal medium for porting data across different applications regardless of what language the receiving or sending application is coded in.

Lets see a demonstration:

<div id="hcard-Toby-Andrew-Harris" class="vcard">
	<span class="fn n">
	<span class="given-name">Toby</span>
	<span class="additional-name">Andrew</span>
	<span class="family-name">Harris</span>
	</span>
	<div class="org">Web Developers Toolkit</div>
	<a class="email" href="mailto:toby@webdeveloperstoolkit.com">toby@webdeveloperstoolkit.com</a>
	<div class="adr">
	<div class="street-address">Queens road</div>
		<span class="postal-code">TY10 OUP</span>
	</div>
	<div class="tel">01765 987876</div>
</div>

What’s happening?

Notice in the markup CSS classes are given semantic meaning such as:

• given-name
• org
• email
• street-address

What is so cool about this is is that these reserved class names can be pulled back and their values used to populate applications such as Outlook, Google Events etc. Not unlike a key-value pair. Whilst that in its self is useful wouldn’t it be great if you could use these to enhance your SEO? Imagine crawlers being able to make use of this data to help categorise data? The problem is they can’t and the reason for that is that crawlers cannot read CSS but only the mark-up. This is where Microdata can help.

Let’s have a look at another example but this time using microdata:

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
	<h2 itemprop="name">Contact Web Developers Toolkit </h2>
<div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
	<span itemprop="street-address">Address Line 1</span>, 
	<span itemprop="locality">Cardiff</span>, 
	<span itemprop="region">South Wales</span> 
	<span itemprop="postal-code">CF67 ULP</span>
</div>
	Call us at: <span itemprop="tel">999 9999 9999</span>
<div>
	<a href="http://webdeveloperstoolkit.com" itemprop="url"> webdeveloperstoolkit.com</a>
</div>
</div>

What’s happening?

The key differences here is that we are able to optionally define a vocabulary:

  div itemscope itemtype="http://data-vocabulary.org/Organization

Also another key difference is that we are not using CSS classes to define our properties we are using actual markup:

span itemprop="region" 

This small detail of defining the properties as markup is why I believe Microdata is a missed opportunity. I hope you also agree. If you do make your voice heard and let’s get modern browsers to wake up and incorporate this sleeping giant of HTML5 and take SEO to higher level. In so doing we could end up with more ethical and far more meaningful SEO as a result.

What I have shown you is the tip of the iceberg as far as Microdata is concerned. To find out more HTML5 Doctor does a brilliant job of demonstrating some other real world examples of Microdata’e full potential.