Neptune Web, Inc. logo Neptune Web, Inc. logo

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
Search Engine result with the three parts


 
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 itempropitemscope, etc.

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

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.  

Neptune Web is a full-service Boston-area interactive web and digital marketing agency with expertise in Website Design, Web Development, Digital Marketing Strategy and Execution.

We look forward to your comments and would be most happy to address and help solve any Digital Marketing or Website Design & Development challenges you may have.

comments powered by Disqus