Rating System

Posted on | March 21, 2012 | No Comments

Most eCommerce websites have a rating system for their products or services, such as Amazon’s below.

These rating systems provide customers with other customers’ experiences with the particular product or service. But did you know that these ratings can also influence your ranking on search engines, such as Google? And that some search engines even show the ratings in the results pages?

This post will demonstrate some example html showing the average rating based on multiple ratings or reviews.

By using Microdata to embed markup into HTML documents you can give a whole amount of information and still have valid (x)HTML. https://schema.org/ have a LOT of schemas that help describe a lot of scenarios – such as displaying the average rating based on multiple ratings or reviews, to a listing that describes a job opening in a certain organization.

This post will not explore how to implement a rating system in PHP, but simply show some example HTML with a description of what is going on.

<div itemscope itemtype="https://schema.org/Product">
   <span itemprop="name">Kenmore White 17" Microwave</span>
   <img src="kenmore-microwave-17in.jpg" alt="Kenmore 17&quot; Microwave" />
 
   <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
      Rated <span itemprop="ratingValue">3.5</span>/5
      based on <span itemprop="reviewCount">11</span> customer reviews
   </div>
 
   Product description:
   <span itemprop="description">0.7 cubic feet countertop microwave.
   Has six preset cooking categories and convenience features like
   Add-A-Minute and Child Lock.</span>
 
   Customer reviews:
 
   <div itemprop="reviews" itemscope itemtype="https://schema.org/Review">
      <span itemprop="name">Not a happy camper</span> -
      by <span itemprop="author">Ellie</span>,
      <meta itemprop="datePublished" content="2011-04-01" />
      April 1, 2011
      <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
         <meta itemprop="worstRating" content="1" />
         <span itemprop="ratingValue">1</span>/
         <span itemprop="bestRating">5</span>stars
      </div>
      <span itemprop="description">The lamp burned out and now I have to replace it. </span>
   </div>
 
   <div itemprop="reviews" itemscope itemtype="https://schema.org/Review">
      <span itemprop="name">Value purchase</span> -
      by <span itemprop="author">Lucas</span>,
      <meta itemprop="datePublished" content="2011-03-25" />
      March 25, 2011
      <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
         <meta itemprop="worstRating" content="1" />
         <span itemprop="ratingValue">4</span>/
         <span itemprop="bestRating">5</span>stars
      </div>
      <span itemprop="description">Great microwave for the price. It is small and
      fits in my apartment.</span>
   </div>
   ...
</div>

While this is valid HTML5, to be valid (x)HTML you will need to change the attribute ‘itemscope’ to ‘itemscope=”itemscope”‘.

The above code may look confusing at first, but let’s break it down:

An element with the itemscope attribute specified creates a new item. What our HTML is saying is everything in the div is a single item of type Product (itemtype="https://schema.org/Product"). An item may have one or more properties (itemprop). A property of a product is a name (itemprop="name").

Whenever you create a new item you must reference an accompanying schema. This is demonstrated on line 5, where we explain the total rating for this product (the Aggregate Rating). There are only two properties for this item, the ratingValue – the average rating – and the reviewCount – the total number ratings that have been given.

Lines 17 to 28 show example individual reviews that may make up a portion of the total reviews given. Because each review is it’s own item, they must start by declaring the itemtype. They are also a property of Product, so declare the itemprop as ‘reviews’.

As you read more of the HTML you may start recognising that items may be the properties of other items: a reviewRating is a property of reviews, which is a property of Product, and all three are items with their own schema.

Lines 22 to 26 (and 35 to 39) give the meat of an individual rating. worstRating refers to the lowest possible score. In most rating systems this is either 0 or 1. ratingValue is the actual rating this customer has given, and bestRating is the maximum rating a customer may give.

So, to summarise:

• Every item MUST have an itemscope.
• Each item has an itemtype, which is linked to a schema.
• Each item may have one or more properties, including meta data (used only by software – no need to show this to humans) and other items.
• You do not need to include all of the items in the above example; but the more your supply, the better as it gives search engines (such as Google) more information about the reviews.

Conclusion:

This post has shown some example html describing the average rating based on multiple ratings or reviews, then explained what the microdata was doing.

Posted By:Richard Parnaby-King

Comments