Schema Review Snippet

Used to display a rich snippet customer review.

sdlawrence.com

This is the schema layout for a customer review.

HTML

Using blockquote:

<div itemscope itemtype="http://schema.org/Service"><meta itemprop="serviceType" content="Web Design" />
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<blockquote>
<p itemprop="reviewBody">The customer's testimonial or review goes here.” </p>
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue"><span class="hidden">5/5 Stars</span>
<meta itemprop="ratingValue" content="5" />
<span class="rating_scale">
<i  class="x-icon ylw mrs mls x-icon-star" data-x-icon="&#xf005;" aria-hidden="true"></i><i  class="x-icon ylw mrs x-icon-star" data-x-icon="&#xf005;" aria-hidden="true"></i><i  class="x-icon ylw mrs x-icon-star" data-x-icon="&#xf005;" aria-hidden="true"></i><i  class="x-icon ylw mrs x-icon-star" data-x-icon="&#xf005;" aria-hidden="true"></i><i  class="x-icon ylw mbs x-icon-star" data-x-icon="&#xf005;" aria-hidden="true">
</i>
</span>
</span>
</span>
<em itemprop="author">– Joe Customer</em>: <em><span class="review_service">Web Design</span>
<span class="review_location"> Customer in Houston</span> -- <meta itemprop="datePublished" content="2016-08-25" />
<span class="review_time">August 25, 2016</span></em>
</blockquote>
</div>
</div>

CSS

Using blockquote:

/* REVIEWS BLOCKQUOTE
   ================================================== */

blockquote {
    font-size:16px; 
    padding:18px 20px 1px 20px;
    margin-left:3px; 
    margin-bottom:40px;
    background:#efefef;
    background:rgba(255, 255, 255, 0.70);
}	

blockquote:before {
    color: #333;
    font-size: 30px;
    line-height: 0.5em;
    margin-right: 0.27em;
    content: "\f10d";
    font-family: FontAwesome;
    float:left;
}

Example usage: Demo