Use Schema to Add Structure to Site in Search Results

A typical search result on Google can be broken up into three parts:

1. Page Title
2. Page URL
3. Page Description

 
These three parts do a good job of telling a potential site visitor the name of the page and its description (highlighting your actual search terms in their text) as well as where the page is located.  But how do you present some of the more “fancy” search results that include images, author info, ratings and more?  Content on these indexed pages are using schemas to present structured data to search engines, which those search engines can then display in a search results page.

To a web developer, schemas are simple HTML tags with unique attributes such as itemprop, itemscope, etc.

One useful schema is the Product Schema.   When the schema is applied to product content, a search engine result will resemble this:
 

Below is a snippet of code from this product’s page:

<div itemscope itemtype="http://schema.org/Product"> 
 <div itemprop="name">
  <h1>Office Star Professional Air Grid Deluxe Task Chair</h1>
 </div>
 <div id="mainCenter_ratingsSmall">
  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <img id="starImage" alt="Overall Rating" src="http://ak1.ostkcdn.com/img/mxc/stars4_6.gif"/> Rating <span itemprop="ratingValue"> 4.6 </span> <span class="ratingsSep">&nbsp;|&nbsp;</span> <a id="readReviewsLink" title="Read Reviews" href="#custreviews"> <span itemprop="reviewCount"> 181</span> reviews </a> <span class="ratingsSep">&nbsp;|&nbsp;</span> <a id="writeReviewLink" title="Write Review" href="https://www.overstock.com/review-form.html?productId=2605023" rel="nofollow">Write a review</a> </div></div>
<div id="mainCenter_priceDescWrap"> 
 <div class="hideOverflow">
  <div class="main-price-red">
   <div class="Oprice" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <link itemprop="availability" href="http://schema.org/InStock" content="In Stock"/>
    <span class="price_sale main-price-red "> Today <span name="Ovalue" class="Ovalue main-price-red" itemprop="price"> $189.99 </span> </span> </div>
     <div class="Ocompare" name="Ocompare"> <span name="Olabel" class="main-price-compare"> <a href="http://www.overstock.com/compare-at?TID=COMPAREAT" target="_blank" style="text-decoration: underline;">Compare </a> <span name="Ovalue" class="strikethrough"> $240.39 </span> </span> </div>
    </span>
</div>
<div class="main-price-save"> <span name="Olabel" class="Olabel main-price-save">Save</span> <span name="Ovalue" class="Ovalue  main-price-save-green"> $44.40 (18%) </span> </div>

Schema markup is bolded.

By adding these tags around your content, you can present product data such as product name, price, review count, rating and in-stock information that will then be presented on a  user’s search results page.

A complete list of schema.org tags can be found here - http://schema.org/docs/schemas.html.  It is for more than just products.  Content such as organizational contact information, local business listings, events, movie reviews and blog posts all have relevant schema markup.