As the semantic information of the Web keeps getting more important, the Web needs more structured information and machine-readable information to describe the content of the HTML markup in a better way. A big step forward for the Semantic Web is the recently announcement from Google with the release of “rich snippets” for reviews (hReview) and contacts (hCard) marked-up with either Microformats or RDFa. Yahoo in turn have indexed Microformats and RDFa for over a year, so now two large search engines have pushed the semantic web forward.
Microformats at Newsdesk
At Newsdesk we recently deployed our first Microformats implementation for more than 2800 contact people. The Microformats approach is an easy way to mark-up the existing HTML elements with specific class names and element attributes that still are valid HTML.
How can you see this in action?
The best tool I’ve found so far is the Operator add-on for Mozilla Firefox, simply install it and browse a contact at Newsdesk and you will get the possibility to download contact information to your computer, or simply add the contact to your Yahoo contacts.
Microformats hCard example with Firefox Operator add-on
Microformats at pressroom contacts listing displays a list of contacts marked up with Microformats hCard.
Microformats contact example
Microformats hCard contact with detailed information about the contact and possibility to download contact.
Example of Microformats hCard mark-up
<div id="hcard-Joakim-Westerlund" class="vcard"> <img src="http://newsdesk.se/files/123d405e0dfaf99b9c3cae178ca0e124/resources/ResourceWebImage/thumbnails/joakimwesterlund_small.jpg?1237881798" alt="photo of Joakim Westerlund" class="photo"/> <a class="url fn" href="http://www.newsdesk.se">Joakim Westerlund</a> <div class="org">Newsdesk</div> <a class="email" href="mailto:joakim.westerlund@newsdesk.se">joakim.westerlund@newsdesk.se</a> <div class="adr"> <div class="street-address">Bondegatan 21</div> <span class="locality">Stockholm</span>, <span class="postal-code">116 33</span> <span class="country-name">Sweden</span> </div> </div>
And in HTML the Microformats hCard will be displayed like this:
See more examples at the Microformats Wiki or use the Microformats creator to define your own hCard markup or visit for more information. Are you interested in using RDFa, have a look at RDFa for HTML authors.
Google Rich snippet
Google will not automatically detect your Microformats. When you have deployed an Microformats hCard or RDFa implementation to your site, you have to fill out a form at Google and submit examples of pages that have implemented the hCard or hReview to let them know you are interested in Rich snippet on Google with your Microformats/RDFa.


Subscribe