If you’ve written a review in your WordPress blog and want to dress it up a little nicer with some extra “markup” (often called rich snippets when shown in search engines) then please read on. In this article I will explain how to add Schema.org review markup to the post. Don’t worry if the review has already been written, we’ll be adding a chunk of code/text to the top of the post with the marked up review bits. This will include the name of the product being reviewed, and a review summary, etc. When in place, the review can stand out more when shared socially (in some cases) or possibly when viewed on Google as well. See below for an example of how it looks in a post.

review sample

Now, when viewing the post with the above review in the Google Structured Data Testing Tool it looks like the image below. This is the structured data preview of how it can look in search engine results. Notice that it stands out nicely. Be sure to test yours in Google’s testing tool when complete to be certain it looks as desired.

structured data preview

Below is the code that can be added to the top of your post. It has all the “schema info” in place:


<div itemscope itemtype="http://schema.org/Review">
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"><meta itemprop="worstRating" content="1"><meta itemprop="bestRating" content="5"><meta itemprop="ratingValue" content="5"></div>
<ul class="rating-wrapper" style="margin: 0; padding: 0;">
<li class="rated"></li>
<li class="rated"></li>
<li class="rated"></li>
<li class="rated"></li>
<li class="rated"></li>
</ul>
<table>
<tr>
<td itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing"><strong>Item reviewed:</strong> <span itemprop="name">Name Of Item Being Reviewed</span></td>
</tr>
<tr>
<td><strong>Date published:</strong> <meta itemprop="datePublished" content="2013-08-07">08/07/2013</td>
</tr>
<tr>
<td itemprop="author" itemscope itemtype="http://schema.org/Person"><strong>Reviewed by:</strong> <span itemprop="name">Your Name</span></td>
</tr>
<tr itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<td><strong>Price:</strong> <meta itemprop="price" content="25">$25<meta itemprop="priceCurrency" content="USD" /></td>
</tr>
<tr>
<td><strong>Item URL:</strong> <a itemprop="url" href="URL.com" target="_blank" rel="nofollow" style="text-decoration:underline;">Visit</a></td>
</tr>
</table>
<p class="review-summary" itemprop="description"><img itemprop="image" width="235" height="137" border="0" src="imgURL.com" style="float:right;margin:0 0 5px 10px;" alt="" /></a><strong>Summary:</strong> Write a summary here.</p>
</div>

Comb through the above and be sure that you replace the necessary parts with your data. Most should be obvious. Leave the itemscope, itemtype, and itemprop values in place when present. Be sure to replace the Item URL and the URL for the image path as well. For SEO reasons add in some image alt text as well. It wouldn’t hurt also to wrap an anchor tag around the image to link out to the product being reviewed. People often get clicky on images.

For your rating, modify the “ratingValue” value. This is for bots to see it “behind the scenes.” For a visual representation of the ratings, change the classes for the 5 list items. The “rated” class means a full star will be present. The “half-rated” class will show half a star, and no class will display an “empty” star.

You can paste the above right above an existing post in Text View in WordPress. Preview your post, then re-publish (after you add the styles and image found below). Maybe ping it (unless your SEO plugin takes care of that) to get search engines to have another peek at it. Test it in the structured data tool as well to make sure the syntax is correct.

Wait Before You Save The Above!

OK, I’m doing this a little out of order. There are some styles that have to be in place (plus an image) before the above will look correctly in the browser. The styles are below, and the image you can download is to follow.


.rating-wrapper {
margin: 0;
padding: 0;
}

.rating-wrapper li {
width: 27px;
height: 30px;
display: inline-block;
background: transparent url('stars-sprite.png') no-repeat -54px top;
margin: 0;
padding: 0;
}

.rating-wrapper li.rated {
background-position: 0 0;
margin: 0;
padding: 0;
}

.rating-wrapper li.half-rated {
background-position: -27 0;
margin: 0;
padding: 0;
}

p.review-summary {
margin: 5px 0 15px 0;
}

This will go in your custom style sheet (or the main one) in your theme. If you have caching in place you might want to clear it because it may not show the new styles otherwise.

Here’s the image below. It’s a “sprite” which means only one image is used to display the star ratings. It gets shifted around depending how it’s called. It looks different in the browser based on its position. A better definition of sprites can be found here.

Be sure to specify the full path to the sprite image in the CSS above after you upload it.

stars sprite

Just right click the above image, save it to your computer and upload it to your server. Again, be sure to update the path in both spots of the CSS. Using a full path for the image including the http(s) makes it easier because the path is relative to the theme folder where the CSS file is and that can get confusing. Say what!? Exactly.

Video: How to Show Star Images Using a Sprite

In the video below you can see how to show star ratings visually within a web page (to the end user, this isn’t about Schema.org markup).