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.

2 comments:

  1. ERPTREE handles oracle fusion HCM training and its modules maintaining classroom based training with
    the self-paced videos. An expert having ten plus years of self-experience handles the training period through
    online and explains each and every point perfectly. We recently launched our institute in the USA and getting
    the best reputation over there.

    Oracle fusion HCM Online Training

    Oracle Fusion HCM Training

    ReplyDelete