What are rich snippets?

In simple words rich snippets are designed for brief explanation of web-page content to make it easier for users to understand, what the page is about in search result. When considering, inheriting the advantages of rich-snippets, keep in mind that user would find your information helpful when

selecting from different search results.

Three different markup formats in which we can design rich-snippets data:-

1. Microdata
Microdata uses straight forward attributes in markup language tags (often) to assign transient and descriptive names to things and properties.

Microdata Consists of 3 elements:-
1. itemscope
2. itemtype
3. itemprop

HTML marked up with microdata example:-
<div itemscope itemtype=”http://schema.org/Product”>
<a itemprop=”url” href=”http://www.buysellteach.com/Product-Detail/39/Bubble-Gum-Balancing-Equations-Center”>
<div itemprop=”name”>
<strong>Bubble Gum Balancing Equations Center</strong>
</div>
</a>
<div itemprop=”brand” itemscope itemtype=”http://schema.org/Organization”>
<span itemprop=”name”>BuySellTeach</span></div>
<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<span itemprop=”ratingValue”>4.0</span> based on <span itemprop=”reviewCount”>10</span> reviews</div>
<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”><span itemprop=”price”>$4.00</span><link itemprop=”itemCondition” href=”http://schema.org/NewCondition” /> New</div></div>

Testing Tool:- http://www.google.com/webmasters/tools/richsnippets

Microdata generator Tool:- You can use microdata generator tool for rich design snippets in microdata format http://schema-creator.org/, http://www.microdatagenerator.com/.

Information:- Microdata only supports html5 and css3 version in which you can design
rich snippets and structure data.

2. Microformats
Microformats are easy conventions (known as entities) used on web content to explain a particular type of data. Microformats, use the category attribute in HTML tags (often <span> or <div>) to assign temporary and descriptive names to entities and their properties.

Microformats elements:-
1) hreview – Restaurant, Books, Movies etc…
2) hcalendar – Events
3) hcard – People, Companies and Organization.

HTML marked up with microformats example:-
<div id=””> by <span>
<span>Roshan Chauhan</span></span><span style=”display: none;”>product</span><img src=”http://www.buysellteach.com/img/product_images/thumb.php?file=605d935e4b968d78de8a68bf7b3c60c9.png” alt=”photo of ‘Bubble Gum Balancing Equations Center'”>
<div><a href=”http://www.buysellteach.com/Product-Detail/39/Bubble-Gum-Balancing-Equations-Center”>Bubble Gum Balancing Equations Center</a></div>
<abbr title=”4″>★★★★☆</abbr><span style=”display: none;”>0.3</span>

Testing Tool:-http://www.google.com/webmasters/tools/richsnippets

Microformats generator Tool:- You can use Microformats generator tool for designing rich snippets in microformats http://microformats.org/code/hcard/creator.

Information:- Microformats supports all html and css versions.

3. RDFa
RDFa (Resource Description Framework in attributes) is a set of attributes used to explain selective information, like building a review: for a person, for an event or for listing a product. This attribute info sorts square measure are known as entities or things. Every entity includes a variety of properties. RDFa uses straight forward attributes in HTML, XHTML tags to assign descriptive names to entities and properties. You can use the entities and their properties: xmlns:v, typeof and span property.

RDFa Has 4 Basic Attributes:-
1) voctype
2) typeof
3) property
4) resource

XHTML marked up with RDFa example:-
<div xmlns:v=”http://rdf.data-vocabulary.org/#” typeof=”v:Person”>
My name is <span property=”v:name”>Roshan Chauhan</span>,
but people call me <span property=”v:nickname”>Roshan</span>.
Here is my homepage:
<a href=”http://www.example.com” rel=”v:url”>www.example.com</a>.
I live in
<span rel=”v:address”>
<span typeof=”v:Address”>
<span property=”v:locality”>New York</span>,
<span property=”v:region”>NY</span>
</span>
</span>
and work as an <span property=”v:title”>SEO Expert</span>
at <span property=”v:affiliation”>Zapbuild</span>.
</div>

Testing Tool:- http://www.google.com/webmasters/tools/richsnippets

RDFa generator Tool :- You can use RDFa generator tool for designing rich snippets in RDFa http://websnippetr.com/events.php, http://rdfa.info/play/.

Information:- RDFa supports all xml, html and xhtml versions.

Markup your content specific types:-
1. Event
2. Music
3. Organization
4. People
5. Products
6. Recipes
7. Review Rating
8. Software Application
9. Videos Facebook Share and RDFa
and for sub types go on schema.org website.

Rich snippets – Breadcrumbs

A breadcrumb trail is a set of links (breadcrumbs) that can help a user understand and navigate your site’s hierarchy, like this:
Properties
Breadcrumbs can contain a number of different properties which can be labeled using microdata or RDFa markup. Google recognizes the following breadcrumb properties.

Property:-
Title : The title of a breadcrumb.
URL : The URL of a breadcrumb.
Child : The next breadcrumb in the hierarchy. The child must be another Breadcrumb item.

The following HTML code describes a breadcrumb trail for a product page on a kindergarten site.
<a href=”http://www.example.com/pre-k-K”>Pre K – K</a> ›
<a href=”http://www.example.com/pre-k-k/kindergarten”>Kindergarten</a> ›
<a href=”http://www.example.com/pre-k-k/kindergarten/language-arts”>Language Arts</a>

This set of breadcrumbs will appear on the page like this:
The following sections describe how to mark up this content using microdata or RDFa.

1. Microdata
Here is the same HTML code marked up with microdata:

<div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”http://www.buysellteach.com/Grade-Levels/PreK-K/1/GRADE/1/GROUP” itemprop=”url”>
<span itemprop=”title”>Pre K – K</span>
</a> ›
</div>
<div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”http://www.buysellteach.com/Grade-Levels/Kindergarten/45/GRADE/1/GROUP” itemprop=”url”>
<span itemprop=”title”>Kindergarten</span>
</a> ›
</div>
<div itemscope itemtype=”http://data-vocabulary.org/Breadcrumb”>
<a href=”http://www.buysellteach.com/subjects/Language-Arts/45/GRADE/1/GROUP/9/SUBJECT/SEARCH” itemprop=”url”>
<span itemprop=”title”>Language Arts</span>
</a>
</div>

2. RDFa
Here is the same HTML content marked up with RDFa.

<div xmlns:v=”http://rdf.data-vocabulary.org/#”>
<span typeof=”v:Breadcrumb”>
<a href=”http://www.buysellteach.com/Grade-Levels/PreK-K/1/GRADE/1/GROUP” rel=”v:url” property=”v:title”>
Pre K – K
</a> ›
</span>
<span typeof=”v:Breadcrumb”>
<a href=”http://www.buysellteach.com/Grade-Levels/Kindergarten/45/GRADE/1/GROUP” rel=”v:url” property=”v:title”>
Kindergarten
</a> ›
</span>
<span typeof=”v:Breadcrumb”>
<a href=”http://www.buysellteach.com/subjects/Language-Arts/45/GRADE/1/GROUP/9/SUBJECT/SEARCH” rel=”v:url” property=”v:title”>
Language Arts
</a> ›
</span>
</div>