By 1 year ago in Development

Microformats? Micro-what-now?

Microformats (microdata, rich snippets, and RDFa) have been around for sometime. They are the basic building blocks of the “semantic web” – formats that make it possible to create meta-content which can be understood by machines. In this post, I’ll be going over the basics of what microformats are and what they’re used for.

The term was coined by Tim Berners-Lee,[3] the inventor of the World Wide Web and director of the World Wide Web Consortium (“W3C”), which oversees the development of proposed Semantic Web standards. He defines the Semantic Web as “a web of data that can be processed directly and indirectly by machines.”

So, what are the rules?

  • They are designed for humans first and machines second.
  • Microformats are simple blocks of code that you can use to identify specific kinds of data within your website.
  • Microformats range from providing informaiton on things like contacts, locations, and events, to items that are more specific to sites such as reviews of products.

Existing Microformats

  • XFN – XHTML Friends Network: It is a way to represent human relationships using hyperlinks. XFN enables web authors to indicate their relationship to the people mentioned in – for example, their blogrolls – by adding a ‘rel’ attribute. e.g.:
    <a href=”http://douglas.example.com” rel=”friend”>.
  • No Follow: A HTML attribute value used to instruct search engines that a link should not be add to the target’s ranking.
  • hReview: An open, distributed format, for embedding reviews, be it products, services or events, and can be in HTML or RSS.
  • hCard: A format for representing people, organisations, and also places in HTML.
  • hCalendar: Calendaring and events format.

A few examples

Breadcrumbs:

<ul class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li><a href="/" title="Home"><span itemprop="title">Home</span></a></li>
<li><span class="active" itemprop="title">Active Category</span></li>
</ul>

This can also improve the visual impact of Google results, like below. In the first result, Google has been able to interpret the data in the page to produce a more natual looking position within the site.

vCard:

Douglas Radburnhttp://www.branded3.com, or follow me on Twitter @douglasradburn.

This may just look like styling, but all the classes are part of the hCard microformat. fn, which stands for full name, url for an associated homepage, and nickname for, a nickname. We could go on to mark up data such as: addresses, company information or a profile photo.

If you’ve got any questions about this, feel free to drop me a comment below!

By Douglas Radburn. at 1:30PM on Friday, 09 Nov 2012

Doug is our Senior Open Source Web Developer. Having gained some informative insight and technical experience at two major digital agencies after graduating; Doug brought his knowledge and skills to Branded3 in 2009, and has been solving our development dilemmas ever since. Follow Douglas Radburn on Twitter.

comments