Many microdata(microformats), formats like RDFa were brought forth by different sources working in different directions for structuring data on the webpage. Google, Yahoo & MSN came together to formulate a universal categorization language on the web. Their Joint collaboration is schema.org convention of tagging information, which can be easily mastered, applied and understood by Search Engines & webmasters.
RDFa has been a popular way of Data Structuring for a long time now. After the adoption of RDfa open graph by Facebook and RDFa goodrelations for ecommerce, it has become a popular convention. However, with all major search engines announcing the transition towards Schema.org, it is better to talk about schema only.
Schema taxonomy relies on hierarchical structuring of data along the attributes, itemscope, itemtype & itemprop. There are few other attributes which are of lesser importance, like itemid. We shall concentrate on the most important ones only, here.
Itemscope, is the signal to search robots that the container where it is present, contains some data of interest to them which are structured according to the schema.org convention. Like, if the <div itemscope..... is encountered, it expects itemtype data to know what is the subject of the structured data. Whether, it is person, profession, organisation.... Here, comes the role of the attribute itemtype. So, the container div now should give the information about the kind of data expected within it. The attribute itemtype, refers to a particular url for this purpose. If the data contained is of a person, then itemtype should refer to schema.org/Person, if the data is of a professional service. It should refer to schema.org/ProfessionalService. So, our div container may look like,
< div itemscope itemtype="schema.org/Person"
<div itemscope itemtype="schema.org/ProfessionalService"
OR, if I want it to remain composite and split the div into two spans containing, personal and professional informations, then, I would go like this:
<div > <span itemscope itemtype="schema.org/Person"
<span itemprop="....."
<span....... Data about person
........
/span>
<span itemscope itemtype="schema.org/ProfessionalService"
<span itemprop="......"
<span....... Data about Professional Service
/span></div>
The above is a div container that contains both kind of information. Important point here is that, You can write only those values of itemprop, which are present on the itemtype referred schema url. So, just go there and pick them for marking. It is itemprop, which tells search robots, what the container contains. It may be name, nick, job-title, organization.....
So, if I write about myself, the structured data would look like:
<div class="profile"> <span itemscope itemtype="http://schema.org/Person">
<span itemproperty="name"> Ramesh Kumar</span> is a
<span itemproperty="job-title"
>Google Adwords Qualified Professional</span>
at <span itemproperty="affiliation">Netargument</span>
</span>.
<span itemscope itemtype="http://schema.org/ProfessionalService">
<span itemproperty="logo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNinMGO7o9iRlFm7p0ZExxC9GpiCPUuRVxyc1owTbC8ADKMBZ20ciPGQcQFK_S8SyCD9JGj0FBvFQ4czCOHKhsEHHqofMs-aOzFyuYbzDJNIjlS_T78dFja_1PzvH_fDGbuOulOy-ZPSQ/s144/logo_qualified_ind_500.jpg"/></span></span></div>
Search Engine will interpret this data as,
Name: Ramesh Kumar, job-title: Google Adwords ...... Working at: Netargument. Logo: image URL.
 |
| Rich Snippet showing Job-title and Org, appearing in Google Custom Search |
Here, if I don't use itemtype="/ProfessionalService", then , I may not have been able to use "logo" attribute and may have been using "photo" as itemprop, which would confuse the bots that the image is my pic. Two spans prevent this situation.
Similarly, you may mark up an offer within a product div, like
<div itemscope itemtype="http://schema.org/Product"><span itemprop="brand">........<span itemprop="offers"></span></span></div>
The markups are not limited to search snippets only. The new Offer Extension in Adwords too are rumored to work through it.
Warning: Image-url is not a valid itemproperty, Blogger Template Error![Solved]
Please note, blogger's default template contains
itemprop="image-url", because of which you may get error in rich snippet tool, wherever you have hyper-linked images. This itemprop value is wrong, you should change all such values to
itemprop="image". This will solve the problem.
Note: In the Examples, above, I have broken the divs into span, which is actually an styling element. You can use any element like, <p>, <a> or even nested div, depending on the situation. However, I personally avoid nested divs, because of SEO reasons.
