When you do a search for businesses and services online you might have noticed that your search engine has been posting the number of stars along with the results. These are associated wtih very large rating companies like Google Places, Trip Advisor, etc., but you can have that functionality too by adding microformatting to your site.

Rating Microformatting

The place to go is Schema.org for all your microformatting needs. If you are a web developer and you have a site that has a large enough following to get comments and ratings on your content (products, posts, responses, etc.), then you can mark up that microdata with microformatting.

Example:

Ponte Vedra Inn & Club **** – 18 Reviews

kazyk | Mar 14, 2012 | 5 Stars | This is the nicest place that I’ve ever stayed. The staff was very helpful and friendly and the room was gorgeous!!! Our room overlooked the beach, so the scenery was impeccable!!! I always tell my friends about this place!

The example shows two things: 1. The aggregate rating from the 18 reviews; and 2. A single rating from a customer. Let’s use schema.org to mark both of these up:

<div itemscope itemtype=”http://schema.org/Organization”>
    <span itemprop=”name”>Ponte Vedra Inn &amp; Club</span>
    <div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
        <meta itemprop=”ratingValue” content = “4” />****
        <span itemprop=”reviewCount”>18</span> Reviews
    </div>
</div>

<div itemprop=”reviews” itemscope itemtype=”http://schema.org/Review”>
    <span itemprop=”author”>kazyk</span> |
    <time itemprop=”datePublished” datetime=”2012-03-14″>March 14, 2012</time> |
    <div itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”>
        <meta itemprop=”worstRating” content=”1″ /><meta itemprop=”bestRating” content=”5″ />
        <span itemprop=”ratingValue” content=”5″>5</span> Stars |
    </div>
    <span itemprop=”description”>This is the nicest place that I’ve ever stayed. The staff was very helpful and friendly and the room was gorgeous!!! Our room overlooked the beach, so the scenery was impeccable!!! I always tell my friends about this place!</span>
</div>

* The number of stars can be replaced with an image of the stars. Make sure the alt tag for the image states the number of stars.

What does it mean?

The base <div> tag refers to the itemtype I pulled all those itemprop attributes from. So if you go to the Review page on Schema.org you will find author, datePublished, reviewRating and description, but you will not find worstRating, bestRating or ratingValue. These three are found under the Rating section. So I need to create a nested <div> with the itemtype of the missing microformats. Same with Organization, it does not include the information from AggregateRating and I have included another nested <div>.

If you have rating systems in place on your site, go and find the template for your rating system in your CMS and add the appropriate microformatting. Now the major search engines can catalog the ratings data on your site and if you’re lucky Google will put it in the SERPs.