In today’s competitive world it is very important that you understand the various strategies that might boost your visibility on Google. One way of standing out in Google’s search engine ranking page (SERP) is by enabling rich snippets for each webpage of your website. Now, before we dig in further to understand the concept of promoting website content on Google’s Search Engine Ranking Page (SERP), let’s first have a look at what Rich Snippets exactly are.

What are Rich Snippets?

As you can see, in the screen grab below, a rich snippet is a short description which gives a preview of what is mentioned in the actual web page in the Search Engine Ranking Page (SERP). However, looking at the technical aspect of rich snippets, it’s a structured data markup that webmasters can include in their website’s existing HTML so that search engines understand the content in a structured manner. Based on the understanding create a rich snippet and display it of the SERP.

star-review-widget

Advantages of having Customized Rich Snippets

Apart from ensuring that you have your webpage ruling the roost out there on the SERP, its also equally important to ensure that displayed snippet is informative and attractive so that more and more customers are lured to it.

How to Create Rich Snippets?

Google and a lot of other search engines recommend the usage of Schema.org vocabulary for creating Rich Snippets. This vocabulary is merged and embedded to the HTML of the website using any one of the three formats, namely, RDFa, microdata, and JSONLD.

In order to have the rich snippet of your data on the SERP of Google or any other search engines, you must comply with certain policies.

As if now, there are only certain web page types that Google supports.  These web pages must fall under either one of the following categories:

  1. Product – The web page that falls in this category must describe a product such that it must also have the price, review ratings and availability clearly mentioned.
  2. Review – The web page that falls in this category must mention reviews of a particular business domain such as a hotel, store, mall, or a restaurant.
  3. Event – The web page which falls in this category may describe the details of an event for example, a music concert. This page must describe the time, place and the number of attendees of the event.
  4. Video – The web page which falls in this category must have a thumbnail and a descriptionmentioned on the webpage.

 

Creating Rich Snippets of your Product Web Pages Displayed on Google SERP

If you own an e-commerce website or are selling your products through your own website, you can submit your product details to Google by embedding them to the HTML codes of your web pages. As discussed above, you may do this with the help of one of the formats of Schema.org vocabulary (i.e microdata, RDFa, and JSON-LD). By submitting the product information to Google for each product web page, you increase the possibilities of Google indexing that particular page and display a rich snippet describing the product on the SERP (Refer to the screen grab below).

iphone-review-snippets

Codes that needs to be embedded in the HTML if your product webpage discusses the details of a single product:

MICRODATA

<div itemscope itemtype=”http://schema.org/Product”>
<span itemprop=”brand”>ACME</span>
<span itemprop=”name”>Executive Anvil</span>
<img itemprop=”image” src=”anvil_executive.jpg” alt=”Executive Anvil logo” />
<span itemprop=”description”>Sleeker than ACME’s Classic Anvil, the
Executive Anvil is perfect for the business traveler
looking for something to drop from a height.
</span>
Product #: <span itemprop=”mpn”>925872</span>
<span itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<span itemprop=”ratingValue”>4.4</span> stars, based on <span itemprop=”reviewCount”>89
</span> reviews
</span>

<span itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>
Regular price: $179.99
<meta itemprop=”priceCurrency” content=”USD” />
$<span itemprop=”price”>119.99</span>
(Sale ends <time itemprop=”priceValidUntil” datetime=”2020-11-05″>
5 November!</time>)
Available from: <span itemprop=”seller” itemscope itemtype=”http://schema.org/Organization”>
<span itemprop=”name”>Executive Objects</span>
</span>
Condition: <link itemprop=”itemCondition” href=”http://schema.org/UsedCondition”/>Previously owned,
in excellent condition
<link itemprop=”availability” href=”http://schema.org/InStock”/>In stock! Order now!</span>
</span>
 

Codes that needs to be embedded in the HTML codes if your product webpage discusses the details of a Shopping Aggregator page (A shopping aggregator page displays the details of multiple offers by various merchants on a single webpage):

MICRODATA
<div itemscope itemtype=”http://schema.org/Product”>
<span itemprop=”brand”>ACME</span> <span itemprop=”name”>Executive Anvil</span>
<img itemprop=”image” src=”anvil_executive.jpg” /><span itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
Average rating: <span itemprop=”ratingValue”>4.4</span>, based on
<span itemprop=”ratingCount”>89</span> reviews
</span>

<span itemprop=”offers” itemscope itemtype=”http://schema.org/AggregateOffer”>
from $<span itemprop=”lowPrice”>119.99</span> to
$<span itemprop=”highPrice”>199.99</span>
<meta itemprop=”priceCurrency” content=”USD” />
</span>
</div>

 

Creating Rich Snippets for Reviews & Critics Displayed on Google SERP

Google provides the leverage of getting a 5 star rating or a 10 star rating mentioned for businesses, products and creative works such as movie, songs and various types of art works. In order to have this rating displayed along with the rich snippet, you would have to embed Schema.org vocabulary to the HTML codes of the webpage in one of the formats i.e Microdata, RDFA, or JSON-LD.

How it actually Works?

In order to understand how the rating concept works, let’s first understand what the meaning of the term ‘Rating’ is. Well, rating is a process of evaluating the item mentioned on the webpage (which can be a product, a business or a movie).

Ratings can either be done by a single entity or it could be an aggregated version where the ratings are based on what multiple users have voted over a period of time. The ratings can be done on a scale of 1 to 5, where 1 is the ‘worst rating’ and 5 is the ‘best rating’.  Ratings can also be done on the scale of 1 to 10 as well.

In general, there are two types of review ratings that are projected by Google on their SERP:

  1. Single Entity Ratings
  2. Aggregate Ratings

Let’s understand what these rating types are and know how to create rich snippets for this rating type.

Single Entity Ratings

When we say ‘Single Entity Ratings’, we mean the ratings provided by an expert in that particular field. Below we have provided the Schema.org vocabulary in 3 distinctive formats i.e. Microdata, RDFA and JSON-LD.  You may embed these codes in the HTML of the web pages where the reviews have been mentioned.

Schema.org Microdata to create Rich Snippets for Single Entity 5 Star Ratings

MICRODATA
<div itemscope itemtype=”http://schema.org/Product”>
<img itemprop=”image” src=”catcher-in-the-rye-book-cover.jpg” alt=”Catcher in the Rye”/>
<span itemprop=”name”>The Catcher in the Rye</span>
<div itemprop=”review” itemscope itemtype=”http://schema.org/Review”> Review:
<span itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”>
<span itemprop=”ratingValue”>5</span> –
</span>
<b>”<span itemprop=”name”>A masterpiece of literature</span>” </b> by
<span itemprop=”author” itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>John Doe</span></span>, written on
<meta itemprop=”datePublished” content=”2006-05-04″>May 4, 2006
<div itemprop=”reviewBody”>I really enjoyed this book. It captures the essential challenge people face as they try make sense of their lives and grow to adulthood.</div>
<span itemprop=”publisher” itemscope itemtype=”http://schema.org/Organization”>
<meta itemprop=”name” content=”Washington Times”>
</span>
</div>
</div>

 

Schema.org Microdata to create Rich Snippets for Single Entity 10 Star Ratings

You can also opt for a rating on the scale of 1 to 10 where 1 is the ‘worst rating’ and 10 is the ‘best rating’. Below are the codes that need to be embedded in the HTML of the web page that talks about the reviews and critics.

MICRODATA
<span itemscope itemtype=”http://schema.org/Review”>
<span itemprop=”itemReviewed” itemscope itemtype=”http://schema.org/Thing”>
<span itemprop=”name”>Super Book</span>
</span>
<span itemprop=”author” itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>Joe</span>
</span>
<span itemprop=”reviewRating” itemscope itemtype=”http://schema.org/Rating”>
Rating:
<span itemprop=”ratingValue”>7</span> out of
<span itemprop=”bestRating”>10</span>
</span>
<span itemprop=”publisher” itemscope itemtype=”http://schema.org/Organization”>
<meta itemprop=”name” content=”Washington Times”>
</span>
</span>

 

Aggregate Ratings

Aggregate rating means a process of evaluation by more than one user which is done through online votes. Let’s have a better understanding of aggregate ratings by having a look at the following examples given below.

Book-Review

As mentioned on the rich snippet above, the rating (3.9) is based on 127,306 votes that has been done by multiple users. The Meta description is auto-generated as per the query of the user on the Google search page. Here the ratings are aggregated as it has been generated with the help of the votes of multiple users.

Schema.org microdata that must be embedded in the HTML codes if you want to create rich snippets for Aggregate Ratings

MICRODATA
<div itemscope itemtype=”http://schema.org/Thing”>
<h2 itemprop=”name”> Super Book </h2>
<div itemprop=”description”>Ultra interesting. Super impressive.</div>
<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>
<div>Book rating:
<span itemprop=”ratingValue”>88</span> out of
<span itemprop=”bestRating”>100</span> with
<span itemprop=”ratingCount”>20</span> ratings
</div>
</div>
</div>

 

Creating Rich Snippets for Web Pages specifying Upcoming Events

Google also supports rich snippets for web pages which provide information about upcoming events. Below we have mentioned an excellent example of a rich snippet of events.

Rich Snippets for Web Pages

Here, in the above example a list of top events is mentioned in the rich snippet with the day and date. There is also a Meta description which is generated as per the query made by the user on the Google search page.

Schema.org Microdata that must be embedded in the HTML codes for creating rich snippets for web pages specifying details about upcoming events

MICRODATA
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “Event”,
“name”: “Example Band goes to San Francisco”,
“startDate” : “2013-09-14T21:30”,
“url” : “http://example.com/tourdates.html”,
“location” : {
“@type” : “Place”,
“sameAs” : “http://www.hi-dive.com”,
“name” : “The Hi-Dive”,
“address” : “7 S. Broadway, Denver, CO 80209”
}
}
</script>

 

Creating Rich Snippets for Web Pages Containing Videos

 You can enable rich snippets for videos that have been uploaded in a particular web page. In order to do so, a list of information is specified and forwarded to Google with the help of Schema.org microdata.  The list of information that needs to be marked up in the microdata are description, upload date, duration, and thumbnail URL.

Schema.org microdata that must be embedded in the HTML codes for creating rich snippets for web pages having videos
<div itemscope itemtype=”http://schema.org/VideoObject”>
<span itemprop=”name”>Title of video</span>
<span itemprop=”description”>Video description</span>
<img itemprop=”thumbnailUrl” src=”https://www.example.com/thumbnail1.jpg” alt=”thumbnail text”/>
<meta itemprop=”uploadDate” content=”2015-02-05T08:00:00+08:00″/>
<meta itemprop=”duration” content=”PT1M33S” />
<link itemprop=”contentUrl” href=”http://www.example.com/video123.flv” />
<link itemprop=”embedUrl” href=”http://www.example.com/videoplayer.swf?video=123″ />
<meta itemprop=”interactionCount” content=”2347″ />
</div>