Richard Parnaby-King

Rating System

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.
[html]

Kenmore White 17″ Microwave
Rated 3.5/5
based on 11 customer reviews

Product description:
0.7 cubic feet countertop microwave.
Has six preset cooking categories and convenience features like
Add-A-Minute and Child Lock.

Customer reviews:

Not a happy camper
by ,

April 1, 2011

1/
5stars

The lamp burned out and now I have to replace it.

Value purchase
by ,

March 25, 2011

4/
5stars

Great microwave for the price. It is small and
fits in my apartment.

[/html]

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:

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.