Today, we're going to talk about Microformats, a simple set of extensions to HTML, allowing us to add meaning to certain types of data found in our web pages. As SEOs, Microformats provide us with a wonderful toolbox to enhance our Google search snippets, particularly if you own a site with reviews, recipes, contact details or location data.
In this post we’ll talk about Microformat standards available to webmasters that have events listings data on their websites. Think conferences, festivals, theatre, even opera – they’re all events that can be described with components of the hCalendar Microformat.
What does an Events Based Rich Snippet Look Like?
This result, for "photography exhibitions London" shows an enhanced, hCalendar based rich snippet: 
The example ranking is taken from a site that lists things to do in London, and you can see that the events featured on the listings page have been pulled through into Google's (UK) SERPS.
What is the hCalendar Microformat? [Definition]
Brace yourselves for a mildly techie, but perfectly worded definition, courtesy of Microformats.org:
hCalendar is a simple, open, distributed calendaring and events format, using a 1:1 representation of standard iCalendar (RFC2445) VEVENT properties and values in semantic HTML or XHTML. hCalendar is one of several open microformat standards suitable for embedding in HTML, XHTML, Atom, RSS, and arbitrary XML. https://microformats.org/wiki/hcalendar
What Properties Should I be Interested in?
Google looks out for the following elements of the hCalendar Microformat in your web page mark-up. Not all of the elements listed are actually required, but if you have the data it's probably worth implementing as fully and correctly as you can. Here, Google break down exactly what they're watching out for:
| Property | Description |
summary |
Required. The name of the event. |
url |
Link to the event details page. |
location |
The location or venue of the event. Can optionally be represented by nested organisation data, or nested Address data. Recommended (unless the page containing the markup is a page about the venue, and the location is the same for every event.) |
description |
A description of the event. |
startDate (dtstart) |
Required. The starting date and time of the event in ISO date format. |
endDate (dtend) |
The ending date and time of the event in ISO date format. |
duration |
The duration of the event in ISO duration format. |
eventType (category) |
The category of the event, such as "Festival", "Concert", "Lecture". |
geo |
Specifies the geographical coordinates of the location. Includes two elements: latitude and longitude. Optional. |
photo |
A link to a photo or image related to the event. |
A Before and After Example of an Event Implementation
On Saturday a few of us went to the Wireless festival to have a day in the sun with music and (of course) a few beers. Let's say you're describing that event listing on your website.
Your HTML might look a little like this:
<div>
<a href="https://www.wirelessfestival.co.uk/lineup/">Wireless 2010</a>
<img src="wireless.jpg" />World class acts playing across four stages -
but Wireless is about so much more than just amazing music...
When: Saturday 3rd July, 12:00pm - 11:00pm
Where: Hyde Park, London
Category: Concert
<div>
Now let's take a look at that same event, marked-up with our hCalendar elements:
<div class=”vevent”>
<a href=”https://www.wireless.co.uk/” class=”url summary”>Wireless 2010</a>
<img src=”wireless.jpg” class=”photo” />
<span class=”description”>World class acts playing across four stages -
but Wireless is about so much more than just amazing music</span>
When:
<span class="dtstart">
July 3rd, 2:00PM<span class="value-title" title="2010-07-03T1200Z00"></span>
</span>-
<span class="dtend">
~11:00PM<span class="value-title" title="2010-07-03T2300Z00"></span>
</span>
Where:
<div class="location vcard">
<span class="fn org">Hyde Park</span>,
<span class="adr">
<span class="street-address">Hyde Park</span>,
<span class="locality">Paddington</span>,
<span class="region">London</span>
</span>
<span class="geo">
<span class="latitude">
<span class="value-title" title="51.50716" ></span>
</span>
<span class="longitude">
<span class="value-title" title="-0.17066"></span>
</span>
</span>
</div>
Category: <span class="category">Concert</span>
</div>
This is usually a simple implementation, with only a few changes to the CSS stylesheet required. Have a chat with your web developer to get an idea of how much work it is to implement.
Testing and Go Live
Implementing Microformats can be reasonably easy, provided you already have the event data available on your site. To make using Microformats just a little easier, Google has provided a rich snippets testing tool to help make sure your mark-up is correct.
To get your rich snippets working in Google's results pages though, takes time and patience. Google are reviewing sites on a case by case basis, so the next step is to fill out this form and wait. Patience is a virtue though, and Google takes the semantic web and structured data very seriously. According to this write up of the Semantic Technology Conference in San Francisco, rich snippets are now available in 40 languages, and enhanced snippet impressions have grown four fold globally since October 2009. Google are planning more support for more formats, such as video, local businesses and shopping in the near future. How exciting!
If you'd like to learn more about Microformats, Joost De Valk has an excellent tutorial on implementing hReview in Wordpress. If you've got a spare 45 minutes or so, Joost and I recently discussed Microformats and their impact on SEO with Bas van den Beld on the State of Search show on WebmasterRadio.fm. Enjoy, and thanks for listening!
Ciao Richard,
very useful and practical how to about microformats.
I've recently made them implemented in a portal about tourism, following also the example of Booking.com, for the reviews of the resorts promoted in that website.
Even though this tecnique doesn't have a direct influence in SEO, it can have indeed a secondary effect.
Infact, to have rich snippets indexed can better the click-through. At least is what I'm seeing from the Analytics datas, it has risen around an 8%. Even though this % has to be reviewed on more large timescale (microformats were implemented just few week ago), the click-through rise seems will be positive at last.
So... more click-through means more visitors and more visitors - hopefully - will mean more recognition and potentially more natural inlinking (apart that more revenues for the website).
Resuming: to use them is not going to make your devs mad, and it is a quite fast implementation. And surely is not something that is damaging at all your web marketing plan, all the contrary.
Cool - increased CTR for the win!
That, my friend would make a great YOUmoz case study!
Asap the results get confirmed and cleaned all the "data noise" are (gosh I wrote in Yoda style!)
Plus 1 for the yoda reference. I gave another thumbs up above for the most excellent YOUmoz idea. :)
Plus another one for the YOUmoz post (to come)
Really nice stuff here Rich. Thanks for the walk through. I've had a lot of people asking me lately how to play with some of these snippets lately (particularly folks with review sites).
Excellent work!
Thanks, I believe microformats will be even more popular in the near future.
Nice post. I had heard of this before but was in the middle of something else and wrote it off as inconsequential (I also found the wiki page very difficult to read). After reading your explanation I see how useful this resource could be. Thanks for the heads up.
Good stuff Rich, Thank you for posting.
Thanks for this well written article on a topic many of us are 'close to implementing' but haven't yet made the leap :-) If anyone knows of a good tutorial site (other than the one Richard mentioned for WordPress) , please post the URL -- thanks again Richard. --- Andy :-)
Hey Andy - thanks for the words of encouragement!
Hate to be a bit self promotional, but I've written a bunch of stuff on my site (SEOgadget)
Best starting point is my Microformats / HTML5 category page:
https://seogadget.co.uk/category/microformats-html5/
If you come across any other resources, definitely let us know!
Got a question for you - Will correctly formed microformats work for any site in any Google engine outside of the US? In other words, will implementing this great add-on get displayed in AUS for an Aussie site?
Hey! I don´t think its implemented yet but have a look... https://googlewebmastercentral.blogspot.com/2010/04/rich-snippets-go-international.html
thank you very much, really needed it because I am positioning a new project in local events, this was just what I needed
How long after implementing microformats do they take to appear in SERP results ?
Thanks for sharing this. Does anybody have a quick tip on how to implement this best for soccer matches? What Category would I use? "Soccer"?
I've been playing with microformats on our sites and was surprised to get this message from the Google Rich Snippets Testing tool when I added a link to an external event page.
"Warning: This information will not appear as a rich snippet in search results, because it contains links that do not point at the same domain as the page."
I can kind of understand Google's logic behind this decision but think this will limit the usefulness of microformats for event calendars and the like on blogs and community sites.
Do you agree?
Great info, thanks !
I am currently looking to add rich snippets to recipes. Do you know if there is a fast way to generate the code, without doing too much hands on coding ?
If you're using Wordpress, there's the hRecipe plugin. You could consider generating a temaple by submitting recipes via the contact form 7 plugin, too.
This is great Richard. Our properties often have open houses, resident events, time sensitive specials, and more. The hcaledar microformat would be great to help get those dates to show in search results, and I would think would increase search traffic and conversion for us.
Mmm... I'm imagining how to use it to show whenever one can visit a properties (for instance: showing free time slots for visits)...
That would helped me when I was looking for an apartment to buy.
The beauty of Microformats - the discipline is an open standard. How about suggesting a new draft: hRealEstate?
:-)
And just imagine the reputation boost if you are the first proposing a new format...
In that case:
hViagra
hCasino
hMortgage
and my all time favorite and all encompasing
hSpam
Thanks for this, Richard. I've read quality stuff from you regarding microformats before, so it's great to see it on the Moz blog! It's definitely something I'm interested in learning more about.
Part of using this sort of markup effectively is also going to depend on having the imagination to recognise when it can be used for the betterment of your current rankings. I have a few projects at the moment that will benefit from its use, so here's to another reminder to get on it ;)
PS: Wasn't Wireless awesome, microformats or not?! :p
Thanks Jane,
Yep Wireless was good - next time I'm sure they'll be microformats a go-go. Hey, I just had a really good idea for a band name. Wanna start a band?
Great (and very thorough) write up Rich :)
I'd be interested to hear if anyone's done this & seen a benefit?
I'm guessing you might see improved CTR?
Thank you Hannah!
Yes - I've now got a few examples with hCal and hReview. Tell you what, I'll tell you all about them over a beer :-)
Lovely post Richard. It's really nice to see that people start using microformats more and more for their needs. For example, we've been using hCard for a while now. And not only it's good for your SE visibility, when you make each element distinctly visible, it makes jQuery based element customization much easier!
Microformats <3
the jQuery customisation would make a great post!
Thanks for posting this, it's a really useful piece I can print off and sit down with my developers to get some of this implemented.
This sort of thing I believe helps massively with click through rates and most importantly, conversions.
Really useful! Thanks for sharing.
This would be a great addition for band websites. Most bands search traffic comes from people searcing the band name, so standard SEO isn't always a practical use of what is often a limited budget.
However,this would really enhance thier presence on the search engines and provide the information the traffic needs immediately.
Great stuff!
Jon,
Certainly would! See my reply to Jane. Like what I did there?
Jon,
Certainly would! See my reply to Jane. Like what I did there?
smooth...
maybe you could get a slot with U2.0
Web to Band word association here we come!
Great write up. Cannot say I've seen these in any of my searches around Google. Though I will be passing this idea to clients who do focus on events.
Any other uses it might have?
Nice post Rich. I do some work with Sports teams and I wonder if Ill manage to use this to show upcomming games in the SERPs. Could be a nice little touch
Yep - cool idea
Create an events homepage, listing your events. That'll do it!
Ah, very cool. Thanks for this, could definitely be useful in the future. Good to have it archived in case someone needs it!
Good to see more mention of this! I've been playing around with microformats on my sites recently - still at the "wait" stage, but I'm optimistic.
I'm enough of a believer that I went as far as to create a full set of Dreamweaver snippets for vcard, vevent and hreview - makes it easier to do the markup.
i have been working with microformats for a few months now,nice to see a post on it. Although i have seen no direct seo benefits of it it won`t hurt to implement them and get our mindset ready for html5.