How to Add Ratings and Review Stars on Google Search Results

Google tries to present the best search results to its users and reviews are a part of it. Ratings and reviews are of this user experience when the user searches for some local information where a decision making is in progress. Reviews helps the user to take the best decision and the choice becomes easier. This is the reasons Google includes star ratings and user reviews in its search results to help the user tracking the popularity of the product or service. Here is a tutorial that will help you to add review or user ratings on your site that will allow Google to fetch accurate ratings from your site and display it in the search results.

Types of Review Markup

You can add ratings and user reviews on your site with the help of Rich Snippets. Google allows you to add two kinds of review aggregate markup:-

Individual Reviews – Used for pages containing a single review.

Individual Reviews As Displayed on the Search Results

Aggregate Reviews- Used for pages containing multiple reviews.

Aggregate Reviews As Displayed on the Search Results

Ways To Convey Rating Information

You can convey the rating information on your site by any of the several options given below:-

Numerical Strings
Images
Sprites
Percentages

How to Mark Up and Display Rating On Your Site

There are three ways through which you can display ratings on your site:-

A- Using Microdata 

1- Add the itemprop rating tag to the img tag as suggested below:-

<img itemprop=”rating” src=”four_star_rating.gif” alt=”4 Star Rating: Recommended” /> 


2- In case you are using javascript or CSS sprites, add the itemprop rating tag as suggested below:- 


<span class=”rating-foreground” style=”width:90%”> 
   <meta itemprop=”rating” content=”4.5″ /> 
</span> 

B- Using Microformats

1- Add the class rating to the img tag as suggested below:-


<img class=”rating” src=”four_star_rating.gif” alt=”4 Star Rating: Recommended” /> 

2- In case you are using javascript or CSS sprites, add the value class as suggested below:- 


<span class=”rating-foreground rating” style=”width:90%”>   
<span class=”value-title” title=”4.5″ /> 
</span> 


C- Using RDFa



1- Add the “property=v:rating” to the img tag as suggested below:-


<img property=”v:rating” src=”four_star_rating.gif” content=”4″ />  

2- In case you are using javascript or CSS sprites, add the following content attribute as suggested below:- 


<span class=”rating-foreground” style=”width:90%” property=”v:rating” content=”4.5″ /> 

Example

<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>

<div class=”rating”>

<i class=”star-img stars_4_half” title=”4.5 star rating”>

<img alt=”4.5 star rating” class=”offscreen” height=”356″ src=”” width=”56″>

</i>

<meta itemprop=”ratingValue” content=”4.0″>

</div>

<span class=”review-count”><span itemprop=”reviewCount”>42</span> reviews</span>

Rich Snippet Testing Tool


After you have created the required code for your pages, then the last step in this process is the testing of your created code with the help of rich snippets testing tool :-

Google Structured Data Testing Tool

Hope this tutorial helps in making the task of adding reviews to your site easier.

Also See:- 

Navigation in Seo
How to Calculate Keyword Effectiveness Index
New Google Quick View Button on Mobile Search Results
Query Highlighting on Google Search Results
List of Google Search Operators
New Google Search Quality Updates
Google Search Tips and Tricks