Thursday, 1 August 2013

Using Rich Snippets: Microdata

You must all be familiar with Rich Snippets by now. If not then read my previous post which gives a brief description of Rich Snippets and especially Microformats.

In this post I am going to discuss in brief about Microdata. Microdata is also a type of rich snippet. The similarities between Microdata and Microformat are:

1. As you all know by now, that they are types of the same class, i.e., Rich Snippets;
2. They are both embedded into HTML pages;
3. They help in increasing the machine-readable information of the web pages;
4. They both are considered as Structured Data in the web pages and help increase the semantic     meaning of the HTML code; and
5. They both can be tested using the Google's Structured Data Testing Tool.

So, besides these similarities there are many differences between the two (Microformats and Microdata), as well. These differences can be summed up as follows:

1. Microformats are predefined formats like format for People, Recipes, Reviews, etc., whereas, Microdata is completely flexible and customize-able. You can define any item as a Microdata (in your HTML), by specifying the itemscope and the itemprop (item properties);
2. Microdata are universally recognised due to their flexible nature;
3. You don't have to remember any predefined classes in microdata, as you have to do in case of microformats.

Till now, I hope you must have got a basic idea about Microdata and how it is different from Microformat. Now let me give you an example of Microdata.

Suppose you want to write a paragraph about someone in HTML (In this example I am writing a short paragraph about myself). In normal HTML, i.e., without the use of Rich Snippets, you would write a paragraph somewhat as follows:

<p>
Hello, my name is Piyush Agarwal and I am a Student at University of North Carolina 
at Raleigh, NC
</p>

Now if we write the same paragraph using Microdata, then it would look something as follows:

<p itemscope>
Hello, my name is <span itemprop="given-name">Piyush</span>
<span itemprop="family-name">Agarwal</span> and I am a 
<span itemprop="role">Student</span> at 
<span itemprop="organisation">University of North Carolina</span>
at <span itemprop="city">Raleigh</span>, <span itemprop="state">NC</span>

</p>

You can clearly make out the difference between the code of the two paragraphs. This is what Microdata (rather Rich Snippets) does to your code. It makes it structured, more meaningful, and also more machine-readable. Its as simple as that but still I would like to tell you about the code. The paragraph tag (<p>) has got an attribute - itemscope. Itemscope is responsible for marking the scope of the item. Here it means, that everything which is present between the opening and closing tags of the paragraph is one single item. Next comes the itemprop attribute which marks the name of the item property which is enclosed within the opening and closing tags of that span. So, in case of first span, the property name is "given-name" and its value is "Piyush" [ hey that's my name :-) ]. Similarly in the second span, the property name is "family-name" and its value is "Agarwal", and so on. 

That is all what is in Microdata. Just by the use of itemscope and itemprop, it makes our code well structured and efficiently-readable. The property names which I have used in the above code are just random and are based on my choice only. They are completely customize-able and you can use any property name you want, that of course goes with the code you are writing [otherwise you yourself will get confused ;-)].

You can test how the above codes will be rendered by the Google's Structured Data Testing Tool and check the difference between them yourself. (See the Extracted Data Section for difference)

So that's a summary about microdata.You can look more into this topic in the help section of the Google's Webmaster Tools, where you can also find about other rich snippets.

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.

3 comments:

  1. Thank for sharing your valuable thoughts. It's very useful for me to understand more about it.
    best data rooms

    ReplyDelete
  2. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.apply website marketing jobs in hyderabad.

    ReplyDelete
  3. Enlighting post! I really like and appreciate your effort, thank you for sharing such a useful knowledge about micro data strategies, hear i prefer some more information to build your career in digital marketing by DoDigital

    ReplyDelete