Rich snippets - Review ratings

New! schema.org lets you mark up a much wider range of item types on your pages, using a vocabulary that Google, Microsoft, and Yahoo! can all understand. Find out more. (Google still supports your existing rich snippets markup, though.)

There are several ways to include ratings in reviews.

The most common way is to include the rating written out as a number directly in the HTML, like this microformats example:

 
Rating: <span class="rating">4.5</span> 

Regardless of how you've conveyed rating information on your page—for example, by using numerical strings, percentages, images, or sprites—you can convey this information to Google using microdata, RDFa, or microformats markup. (Unless you indicate otherwise, Google assumes that you're using a rating scale of 1 (worst) to 5 (best), as in the code above.) This article describes how to mark up a variety of rating information. Tip: Don't add a separate hidden text block to specify the rating. Hidden content will not be displayed.

Using images (stars) to convey ratings

This section describes how you can mark up your rating information to use images (for example, an image of four stars) to convey ranking information.

Microdata

If you use an image (for example, an image of four stars) to display ratings, add itemprop="rating" to the img tag. Google can extract the rating from the alt text.

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

In some cases, where image sprites and Javascript and/or CSS is used to render the image, it may not be possible to include the rating in the alt text. Let's say that the following line uses image sprites and CSS to display an image of 4.5 stars:

 
<span class="rating-foreground" style="width:90%" /> 

If you use this method to display ratings, here is how you should use microdata to mark up the HTML block that will be rendered as an image.

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

By including <meta itemprop="rating" content="4.5" /> inside the HTML block that causes the stars to be displayed, you indicate that the rich snippets parser should use the value in the content attribute to find the rating.

Microformats

If you use an image (for example, an image of four stars) to display ratings, add class="rating" to the img tag. Google can extract the rating from the alt text.

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

In some cases, where image sprites and Javascript and/or CSS is used to render the image, it may not be possible to include the rating in the alt text. Let's say that the following line uses image sprites and CSS to display an image of 4.5 stars:

 
<span class="rating-foreground" style="width:90%" /> 

If you use this method to display ratings, here is how you should use the microformats value class pattern to mark up the HTML block that will be rendered as an image.

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

By including <span class="value-title" title="4.5" /> inside the block labeled with class="rating", you indicate that the rich snippets parser should use the value in the title attribute to find the rating.

RDFa

If you use an image (for example, an image of four stars) to display ratings, add property="v:rating" to the img tag, and specify the rating with the content attribute, like this:

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

There are many ways to mark up rating information on your web pages. However you do it, use the content attribute to specify the actual rating.

Let's say that the following line uses image sprites and CSS to display an image of 4.5 stars.

 
<span class="rating-foreground" style="width:90%" /> 

Here it is with the rating specified by the content attribute:

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

Ratings that don't use a 5-point scale

By default, Google assumes that your site uses a 5-point scale, where 5 is the best possible rating and 1 is the worst.

Many reviews sites show ratings on a different scale-for example a rating that ranges from 1-10 points or from 0-100%. This section describes how you can mark up your rating information if you use a different scale.

Microdata

Marking up a single review

For simple ratings on a 5-point scale, the rating property can be used to indicate the rating. Here is an example snippet of text without any markup:

 
Blast 'Em Up—Game Review 
Rating: 3.5 out of 5 

Here is that same HTML content marked up using microdata:

 
<span itemscope itemtype="http://data-vocabulary.org/Review"> 
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Game Review
   Rating: <span itemprop="rating">3.5</span> out of 5 
</span> 

Now, let's look at an example of a rating that is on a 10-point scale. In this case, the goal is to convey not only the actual rating, but the rating scale it's based on.

 
Blast 'Em Up—Game Review 
Rating: 7 out of 10 

Here is that same content with microdata markup:

 
<span itemscope itemtype="http://data-vocabulary.org/Review">  
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Game Review
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
         Rating:
         <span itemprop="value">7</span> out of 
         <span itemprop="best">10</span> 
    </span>
</span> 

In this case, the rating property consists of another item, as indicated by itemscope. The itemtype attribute indicates that the nested item is a rating: itemtype="http://data-vocabulary.org/Rating".

Marking up an aggregate review

For sites with aggregate reviews (the rating is based on the average of a collection of reviews rather than on a single review), the process is analogous to the single review case. Here is an example snippet of text without any markup:

 
Blast 'Em Up Review 
Rating: 88 out of 100 
based on 35 reviews. 

Here is that same text with microdata markup:

 
<span itemscope itemtype="http://data-vocabulary.org/Review-aggregate">  
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Game Review
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">      
         Rating: 
         <span itemprop="average">88</span> out of
         <span itemprop="best">100</span> 
   </span>
   based on
   <span itemprop="count">35</span> reviews.
</span> 

Just as in the single review case, best indicates the best possible rating. In this case an average rating is specified, so average is used instead of value to mark up the rating itself.

Marking up a single review when there is no best score

Here is an example snippet of text without any markup:

 
Blast 'Em Up Review 
Score: 9.0—Outstanding 

In this case, the best possible score is 10, but it isn't actually written on the page. People see this message and intuitively realize that the score is out of a 10-point scale. In this case, you can add the relevant data using the meta tag:

 
<span itemscope itemtype="http://data-vocabulary.org/Review">  
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Game Review
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">      
         Rating:  
         <span itemprop="value">9.0</span> 
         <meta itemprop="best" content="10"/>—Outstanding 
    </span> 
</span> 

The content attribute in the meta tag allows you to provide information that isn't explicitly written on the page. Note that in general Google will not display content that isn't visible to the end user, but when the best and worst ratings aren't present on the page, using meta with best or worst is allowed.

Marking up an aggregate review when there is no best score

This final example shows how to mark up aggregate review information that isn't on a 5-point scale, when the best/worst possible scores are not explicitly written on the page. The goal is to display not only the average rating, but also the scale that it's based on.

Here is an example snippet of text without any markup:

 
Blast 'Em Up Review 
Avg. Rating: 9 
4 Reviews 

Here is the same HTML content marked up with microdata:

 
<span itemscope itemtype="http://data-vocabulary.org/Review-aggregate">  
   <span itemprop="itemreviewed">Blast 'Em Up</span>—Game Review
   <span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">    
      Avg. Rating:
      <span itemprop="average">9</span> 
      <meta itemprop="best" content="10"/>  
      <meta itemprop="worst" content="1"/> 
   </span>
   <span itemprop="count">4</span> Reviews 
</span> 
Microformats

Marking up a single review

You can use the best and worst subproperties of rating (which is in turn a property of hReview) to mark up your content. Here is an example snippet of text without any markup:

Blast 'Em Up—Game Review 
Rating: 7 out of 10 

Here is the same HTML content marked up with the hReview microformat:

 
<span class="hreview"> 
   <span class="item">
      <span class="fn">Blast 'Em Up</span>
   </span>—Game Review 
   <span class="rating"> 
      Rating:
      <span class="value">7</span> out of 
      <span class="best">10</span> 
   </span> 
</span> 

The value sub-property of rating indicates the actual rating, whereas best indicates the best possible rating.

Marking up an aggregate review

Here is an example snippet of text without any markup:

Blast 'Em Up Review 
Rating: 88 out of 100 
based on 35 reviews. 

Here is the same HTML content marked up with the hReview-aggregate microformat:

<span class="hreview-aggregate"> 
   <span class="item">
      <span class="fn">Blast 'Em Up</span></span> Review 
   <span class="rating">Rating: 
      <span class="average">88</span> out of <span class="best">100</span> 
   </span> 
   based on
   <span class="count">35</span> reviews. 
</span> 

Just like the single review case above, best indicates the best possible rating. In this case an average rating is specified, so average is used instead of value to mark up the rating itself.

Marking up a single review where there is no best score

You can mark up aggregate review information that isn't on a 5-point scale, when the best/worst possible scores are not explicitly written on the page. Here is an example snippet of text without any markup:

Blast 'Em Up—Game Review 
Rating: 7

In this case, you can ensure that this is clear to search engines that the rating of 7 is on a scale of 1-10 by marking up the content with the hReview microformat and adding the relevant data using the microformats value class pattern:

<span class="hreview"> 
   <span class="item">
      <span class="fn">Blast 'Em Up</span>
   </span>—Game Review 
   <span class="rating"> 
      Rating: 
      <span class="value">7</span>
      <span class="best">
         <span class="value-title" title="10"/> 
      </span>
   </span> 
</span> 

Marking up an aggregate review when there is no best score

You can mark up aggregate review information that isn't on a 5-point scale, when the best/worst possible scores are not explicitly written on the page.

Here is an example snippet of text without any markup:

Blast 'Em Up Review 
Avg. Rating: 7 
4 Reviews 

In this case, you can ensure that this is clear to search engines that the rating of 7 is on a scale of 1-10 by marking up the content with the hReview-aggregate microformat and adding the relevant data using the microformats value class pattern:

<span class="hreview-aggregate"> 
   <span class="item">
      <span class="fn">Blast 'Em Up</span> </span> Review
   <span class="rating"> 
      Avg. Rating:
         <span class="average">7</span> 
         <span class="best">
            <span class="value-title" title="10"/> 
         </span> 
         <span class="worst">
            <span class="value-title" title="1"/> 
         </span> 
   </span> 
   <span class="count">4</span> Reviews 
</span> 
RDFa

Marking up a single review

For simple ratings on a 5-point scale, the rating property can be used to indicate the rating. Here is an example snippet of text without any markup:

Blast 'Em Up—Game Review 
Rating: 3.5 out of 5 

Here is that same HTML content marked up using RDFa:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
   <span property="v:itemreviewed">Blast 'Em Up</span>—Game Review
   Rating: <span property="v:rating">3.5</span> out of 5 
</span> 

Now, let's look at an example of a rating that is on a 10-point scale.

Blast 'Em Up—Game Review 
Rating: 7 out of 10 

Here is that same content with RDFa markup:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
   <span property="v:itemreviewed">Blast 'Em Up</span>—Game Review
   <span rel="v:rating"> 
      <span typeof="v:Rating">
         Rating:
         <span property="v:value">7</span> out of 
         <span property="v:best">10</span> 
      </span>
   </span> 
</span> 

There are a few notable differences from this example and the first one in this section. rel is used (instead of property) to convey the relationship between the rating and the review; and value and best are used to specify the rating itself and the best possible rating, respectively.

Marking up an aggregate review

For sites with aggregate reviews (the rating is based on the average of a collection of reviews rather than on a single review), the process is analogous to the single review case. Here is an example snippet of text without any markup:

Blast 'Em Up Review 
Rating: 88 out of 100 
based on 35 reviews. 

Here is that same text with RDFa markup:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"> 
   <span property="v:itemreviewed">Blast 'Em Up</span> Review 
   <span rel="v:rating"> 
      <span typeof="v:Rating">      
         Rating: 
         <span property="v:average">88</span> out of
         <span property="v:best">100</span> 
      </span>
   </span>
   based on
   <span property="v:count">35</span> reviews.
</span> 

Just as in the single review case, best indicates the best possible rating. In this case an average rating is specified, so average is used instead of value to mark up the rating itself.

Marking up a single review when there is no best score

Here is an example snippet of text without any markup:

Blast 'Em Up Review 
Score: 9.0—Outstanding 

In this case, the best possible score is 10, but it isn't actually written on the page. People intuitively see this message and realize that the score is out of a 10-point scale. In this case, you can add the relevant data into the HTML tag itself using the content attribute:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review"> 
   <span property="v:itemreviewed">Blast 'Em Up</span> Review 
   <span rel="v:rating"> 
      <span typeof="v:Rating">
         Rating:
         <span property="v:value">9.0</span> 
         <span property="v:best" content="10"/>—Outstanding 
      </span>
   </span> 
</span> 

The content attribute allows you to provide information that isn't explicitly written on the page. Note that in general Google will not display content that isn't visible to the end user, but when the best and worst ratings aren't present on the page, using content with best or worst is allowed.

Marking up an aggregate review when there is no best score

This final example shows how to mark up aggregate review information that isn't on a 5-point scale, when the best/worst possible scores are not explicitly written on the page.

Here is an example snippet of text without any markup:

Blast 'Em Up Review 
Avg. Rating: 9 
4 Reviews 

Here is the same HTML content with RDFa markup:

<span xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"> 
   <span property="v:itemreviewed">Blast 'Em Up</span> Review 
   <span rel="v:rating"> 
      <span typeof="v:Rating">
         Avg. Rating:
         <span property="v:average">9</span> 
         <span property="v:best" content="10"/>  
         <span property="v:worst" content="1"/> 
      </span>
   </span> 
   <span property="v:count">4</span> Reviews 
</span>