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>
<div>
<blockquote>
<p>The customer's testimonial or review goes here.” </p>
<span>
<span><span class="hidden">5/5 Stars</span>
<span class="rating_scale">
<i class="x-icon ylw mrs mls x-icon-star" data-x-icon="" aria-hidden="true"></i><i class="x-icon ylw mrs x-icon-star" data-x-icon="" aria-hidden="true"></i><i class="x-icon ylw mrs x-icon-star" data-x-icon="" aria-hidden="true"></i><i class="x-icon ylw mrs x-icon-star" data-x-icon="" aria-hidden="true"></i><i class="x-icon ylw mbs x-icon-star" data-x-icon="" aria-hidden="true">
</i>
</span>
</span>
</span>
<em>– Joe Customer</em>: <em><span class="review_service">Web Design</span>
<span class="review_location"> Customer in Houston</span> --
<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
Share this Post