“Schema.org was adopted by the three major search engines in 2011 and will be increasingly implemented on websites in 2013”.

In fact Rich Snippet are one of the TOP SEO trends 2013. This is not only what I say but this is what others say as well. The above citation came from the article “Which Top SEO Tactics Will You Focus On In 2013?” and was found on SearchEngineLand.com (written by Paul Bruemmer).

However, implementing this stuff is not that easy as it seems. Especially because it has something to do with coding. And we know that a lot of the wordpress-users do not really have any experiences in coding. And this is okay. That’s why we’re here.

So in this article I want to show you how you can implement Rich Snippets for WordPress yourself or by using one of our themes or plugins.

Alright. Let’s start with a simple example. We just want to add a rating to our current page.

Difference between aggregateRating, rating and review

When you browse through the schema.org list of microdata-types you can see some different rating-snippets that can be used. One of them is the aggregate-rating microdata, the other one is the rating microdata and the last one is the review microdata.

As a summary we can say that:

1. The aggregateRating sums up all reviews (and their ratings).
2. The review is maybe a critic on an item which mostly is a text and of course the rating (see #3).
3. The rating is the actual rating someone has made (maybe because of a review). This can be a star-rating for example.

Just watch the picture below for a better understanding. The reviewer writes a text (which is the review) and give +1 to the blogpost. The blogpost then sums all ratings up to an aggregateRating item. The aggregateRating will then be used to display the stars on Google. But you can read more about that later.

The reviewer makes a review and rats the blogpost. The aggregate-rating sums everything up

[box type=”success”]Side Note: If you don’t want to get deeply into the code, please check out my Schema.org WordPress theme which fully automates everything (no coding needed). If you’re search for a WordPress Rating Plugin, check this page out. [/box]

1. AggregateRating

[box type=”info”]Note: An aggregateRating is always based on multiple ratings or reviews.[/box]

This means that there are a lot of ratings (typically made by the website-users) that can be summarized to one global rating.

1.1 AggregateRating Example

A typical rich snippets WordPress example for an aggregateRating is the comment-section on a blogpost. Some website-owners allow their users to rate the content while writing a comment. In the example below we have four users that all gave +1 to the item.

1.2 The aggregateRating Sourcecode

1.2.1 Initial sourcecode

The sourcecode of the AggregateRating looks like this:

<div itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
  <span itemprop="ratingValue">4</span> plus ones based on
  <span itemprop="ratingCount">4</span> ratings
</div>

As you can see, we now have a rating that tells the search engines that the item was rated four times and has 4 plus ones. But there is still something missing.

1.2.2 The calculating system

The search engines don’t know what the rating system is. What does +4 mean exactly? So we should extend our sourcecode like this:

<div itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
  <span itemprop="ratingValue">4</span> plus ones based on
  <span itemprop="ratingCount">4</span> ratings
  <meta itemprop="bestRating" content="4" />
  <meta itemprop="worstRating" content="-4" />
</div>

In the example above you can see that the AggregateRating has been extended with the bestRating and the worstRating elements. This now tells the search engines that the maximum rating is 4 and the worst rating is -4 (which is the worst rating that theoretically can be reached). Search engines like Google will then transform (and recalculate) this into a star-rating system like this:

But there is again something missing:

1.2.3 The rated item

Search engines now don’t know what was rated. For this you should integrate the aggregateRating into an element that supports the aggregateRating attribute. Here are some Schemas that support it:

Aggregate Rating: (some types can have subtypes as well)

• CreativeWork
• Article
• Blog
• Book
• Code
• Comment
• DataCatalog
• Dataset
• Diet
• ExercisePlan
• ItemList
• Map
• MediaObject
• Movie
• MusicPlaylist
• MusicRecording
• Painting
• Photograph
• Recipe
• Review
• Sculpture
• SoftwareApplication
• TVEpisode
• TVSeason
• TVSeries
• WebPage
• WebPageElement
• Offer
• Organization
• Place
• Product

[box type=”info”]Note: An aggregateRating should aways be inside a Schema that supports the aggregateRating attribute.[/box]

Let’s put everything together:

1.2.4 The final code:

<div itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
  <meta itemprop="url" content="http://wp-buddy-web.local" />
  <div itemprop="aggregateRating" itemscope="itemscope" itemtype="http://schema.org/AggregateRating">
    <span itemprop="ratingValue">4</span> plus ones based on
    <span itemprop="ratingCount">4</span> ratings
    <meta itemprop="bestRating" content="4" />
    <meta itemprop="worstRating" content="-4" />
  </div>
</div>

Test this code with Google’s Rich Snippet Testing Tool

1.3 The rich snippets WordPress AggregateRating final result

The testing tool should show something like this:

2. Reviews and Ratings

[box type=”info”]Note: Only reviews can have ratings. All other Schemas need the aggregateRating instead of the rating attribute.[/box]

2.1. Review example

The review should:

• have a review text
• have a rating
• refer to an item

2.2 The review-sourcecode

2.2.1 Initial sourcecode

<div itemscope="itemscope" itemtype="http://schema.org/Review">
  <span itemprop="itemReviewed">
    <span itemscope="itemscope" itemtype="http://schema.org/Thing">
      <meta content="http://wp-buddy-web.local" itemprop="url" />
    </span>
  </span>
  Reviewed by <span itemprop="author">Ellie</span>,
  <span itemprop="reviewBody">Cool blogpost, mate! Love it!</span>
</div>

Here we have the name, the reviewBody (the text) and the item that was reviewed. Now we want to add the rating:

2.2.2 Adding the rating = the final code

<div itemscope="itemscope" itemtype="http://schema.org/Review">
  <span itemprop="itemReviewed" itemscope="itemscope" itemtype="http://schema.org/Thing">
    <meta content="http://wp-buddy-web.local" itemprop="url" />
  </span>
  Review by <span itemprop="author">Ellie</span>,
  <span itemprop="reviewBody">Cool blogpost, mate! Love it! I give you +1 for this!</span>
  <div itemprop="reviewRating" itemscope="temscope" itemtype="http://schema.org/Rating">
    <meta itemprop="worstRating" content="-1" />
    <meta itemprop="bestRating" content="1" />
    <meta itemprop="ratingValue" content="1" />
  </div>
</div>

Please note: You have to add the aggregateRAting to the Review if you want the stars displaying on search results.

3. Adding the codes to the Rich Snippets WordPress Plugin

You maybe know that I’ve wrote a very useful plugin: The Rich Snippets WordPress Plugin which lets you add your own codes to generate a shortcode out of it. This is making reuse of codes very easy. Please follow the video tutorial on how to add a Rich Snippet to the Rich Snippets Plugin.

Please also check out my schema.org plugins and themes: