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, 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.
- 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
<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>
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.
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!