Tuesday, 30 July 2013

Using Rich Snippets: Microformats

Rich Snippets are basically used in HTML to give a more meaningful information to the various search engines. Search engines like Google, Bing, Yahoo!, etc. look for these rich snippets in the HTML content of the page to get more information about that particular page. Rich snippets are basically some machine-readable data, which is embedded directly into your webpages.

There are various kinds of rich snippets available, but in this post I am going to talk only about Microformats. Microformats are designed, so that they give a much meaningful information to the search engines of the information contained on the page. Many different kinds of microformats are defined, such as Reviews, People, Recipes, etc., whose formats can easily be found on the website link given at the end of the post. Here I am just going to explain how microformats make your information more meaningful, using the example of the contact details of a person.

So, if we want to write about a person contact details in plain HTML, i.e., without using microformats, we would write something as follows:

<div>
<img src="www.sample.com/piyush.jpg" />
<strong>Piyush Agarwal</strong>
Student at University of Mason
100 Round St
Raleigh, NC 45678
</div>

The above information, although absolutely correct, still does not gives much information about the content. Look at the same information written in HTML, but with Microformats:

<div class="vcard">
<img class="photo" src="www.sample.com/piyush.jpg" />
<strong class="fn">Piyush Agarwal</strong>
<span class="title">Student</span> at <span class="org"> University of Mason</span>
<span class="adr">
<span class="street-address">100 Round St</span>
<span class="locality">Raleigh</span>,
<span class="region">NC</span>
<span class="postal-code">45678</span>
</span>
</div>

One can clearly see the difference in the above two codes. The above mentioned microformat is known as the hCard Microformat. It starts with the class vcard which basically marks the beginning of the hCard microformat. Although it is said as hCard microformat, it is written as vcard (this is not a typo). After that we specify the image of the person with a class photo, which tells the search engine that it is the photo of the person referred to by the contact. Then we specify the full name of the person with a class fn. Then comes the title, i.e., Student and then the organisation he is associated with, i.e., org. Then starts the address span (represented by class adr), which is subdivided into street-address (for Street Address), locality (for City), region (for State) and postal-code (for Postal Code).

You can also check out how your HTML, containing microformats will be rendered by Google Search, on the Google's Structured Data Testing Tool

This is just a simple hCard microformat which explains how helpful rich snippets can be in structuring your webpage data. You can look into this topic in the help section of the Google's Webmaster Tools, where you can also find the formats for other microformats which I mentioned in the beginning of this post.

You can also view the video tutorial for this post on my Youtube Channel.

Please feel free to post any of your queries or suggestion in the comments, and I will try and answer them.

1 comment: