Microdata is a whole new way through which your website can communicate with search engine like Google, Bing and Yahoo!. Microdata is a latest technology help you to improve your site appearance on search engine and give you best result but adding microdata to your website is really very confusing task for SEO Beginners.
Now first we need to understand what is snippets?
Snippets are few line of text which display when user look for something on search engine. These lines help user to understand for what’s on the page and why it’s relevant to their query.
Now what is microdata?.
Microdata is an html specification which allow us to add nested meta information within existing content of our page. I simple word microdata is used to add metadata in your body inside html tags and help search engine to extract richer snippets of information from webpage to provide a better user experience.
Google support snippets for these types of content:
- Reviews
- People
- Products
- Businesses and organizations
- Recipes
- Events
- Music
- Video
Microdata support by Bing:
- Breadcrumbs
- Businesses and organizations
- Events
- People
- Products and offers
- Recipes
- Reviews
Implement microdata to website.
Before adding microdata in our website first we need to check available attributes that link name-value pairs etc. And these attributes are:
- Itemscope: It defines a group of name and value – typically referred to as an item.
- Itemprop: It use to define property in microdata.
- Itemtype: defines the item’s type when used on the same HTML element as the itemscope attribute.
Itemtype use:
| Itemtype: | Description |
|---|---|
| http://www.schema.org/AggregateRating | The average rating based on multiple ratings or reviews. |
| http://www.schema.org/Review | A review of an item e.g. product or movie. |
| http://www.schema.org/Rating | An individual rating given for an item. |
to know more you also check http://schema.org/.
Implementing microdata to webpage or website:
<div itemscope itemtype="http://data-vocabulary.org/Person"> <span itemprop="name">Aneh Thakur</span> <span itemprop="nickname">Aneh</span>. <a href="https://plus.google.com/+AnehThakur" itemprop="url">+AnehThakur</a> <span itemprop="title">Web Designer & Developer</span> </div>
Copy this above code and paste in webmaster tool here to check output.
above code is very simple and easy to understand. In the first line, itemscope indicates that the content in the div is an item and also define the type of content we are display in it. And in next few line we use itemprop which use to describe the item eg. name, nickname etc.
Add nested entities.
<div itemscope itemtype="http://data-vocabulary.org/Person">
<span itemprop="name">Aneh Thakur</span>,
<span itemprop="nickname">Aneh</span>.
<a href="https://plus.google.com/+AnehThakur" itemprop="url">+AnehThakur</a>.
<span itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="locality">Shimla</span>,
<span itemprop="region">India</span>
</span>
<span itemprop="title">Web Designer</span>
</div>
Here’s how this sample works:
The address property is itself an item, containing its own set of properties. This is indicated by putting the itemscope attribute on the item that declares the address property, and using the itemtype attribute to specify the type of item being described, like this: <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">.
To know more about nested micro data follow this link.
Generate Microdata for product:
<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">[Product name]</span> <span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">[Product sale price]</span> </span> <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span itemprop="ratingValue">[Aggregate rating given]</span> stars – based on <span itemprop="reviewCount">[Number of reviews]</span> reviews <span itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"> <span itemprop="lowPrice">[lowest product price]</span> to <span itemprop="highPrice">[highest product price]</span> </span> </div> </div>
This code give aggregate review rating has been given for this product, the individual corresponding user reviews will need to be marked up using the code identified.
If you want to test your microdata you can use Google Structured Data Testing Tool at this location: http://www.google.com/webmasters/tools/richsnippets
Thanku!
Happy Coding.