Thursday, 8 August 2013

Using Rich Snippets: Microdata DOM API

This is in continuation with my previous post in which I explained about Microdata. In this post I am going to discuss further about the Microdata DOM API which can be used in programming to retrieve the structured data written on the HTML page. Here I will be using the same paragraph as the example, which I used in my last post.

The code of the HTML page along with the JavaScript is as follows:

<!doctype html>
<html lang="en">


<head>
<meta charset="utf-8" />
<title>Microdata API</title>
</head>
 
<body>


<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>
 

<button id="btnGetVals" onclick="getVals();">Get Values</button>
<br><br>
 

<div id="divContainer">
<strong>Extracted Microdata:</strong><br>
</div>
 
<script>
function getVals(){

var dispDiv = document.getElementById('divContainer');
if (document.getItems){
var docItems = document.getItems();
dispDiv.innerHTML += 'given-name: ' + docItems[0].properties['given-name'][0].itemValue;dispDiv.innerHTML += '<br>family-name: ' + docItems[0].properties['family-name'][0].itemValue;dispDiv.innerHTML += '<br>role: ' + docItems[0].properties['role'][0].itemValue;dispDiv.innerHTML += '<br>organisation: ' + docItems[0].properties['organisation'][0].itemValue;dispDiv.innerHTML += '<br>city: ' + docItems[0].properties['city'][0].itemValue;dispDiv.innerHTML += '<br>state: ' + docItems[0].properties['state'][0].itemValue;

}
else{
alert('Your browser does not support Microdata API');

}}
</script>
 

</body>
</html>



In the above code, I first create a paragraph which contains the microdata (similar to the one in my previous post). Then I make a button - "Get Values", on the click of which the javascript function getVals will be called. Then there is a div which has a heading of "Extracted Data:". On the click of the button, the extracted microdata from the HTML page will be displayed in this div. Next I define the getVals function in the script tags. In the function I first check if the browser supports microdata API, by the command "document.getItems". If this statement returns True, that means that browser supports Microdata API and so the code is executed otherwise an alert message is displayed to the user.

Note: It is always beneficial to check for the same, as although, almost every browser nowadays supports the Microdata API, but there might be some users who are still using old browsers which do not support it. So, by checking, we can reduce the possibilities of any errors.

The document.getItems function returns a node-list containing all the microdata items on the HTML page, along-with their properties. Then we can use this list to get the property value of a particular item. The docItems[0] defines that we are referring to the first item in the node-list, which in this case is our paragraph. Next we get the property we want to use from the HTMLPropertiesCollection, by specifying the correct name of the property to be used.
Example: document[0].properties['city']
The above command returns a node-list of the specified property which has just one element, i.e., the specified property itself. So, we can specify the first object in the list by using its index, i.e., 0. Then we can get the value of that property from the itemValue property in the node-list (as show in the code above).

So, you can see that how helpful microdata can be for programmers(Microdata DOM API) as well as Search Engines(the structured microdata on the HTML page). As far as we say that Microdata is flexible as in keeping any names for our item properties, but it is still better to use some predefined names so that any person who looks at your code understands it. For this purpose a website - schema.org has been created, which lists some predefined microdata item names according to their use. Various search engines like Bing, Google, Yahoo, etc. look for microdata names specified on this website to improve their search results.


So, this is all about Microdata DOM API. Please feel free to post your comments and views regarding it. If you have any questions, then I will be more than happy to answer them. You can also watch the video tutorial for this post on my Youtube Channel.

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.