Adding Schema.org / Rich Snippets to your products

Follow

At Spark Pay online, we use the theme engine to apply schema markup to all our new responsive themes.  You can view them at http://www.americommerce.com/ThemeGallery.html.  If you install the responsive themes on your store, the information in this article is already complete. Our new themes have many benefits beyond baked in rich snippets. They are responsive across all devices, and provide greater support for custom layouts across pages and widgets.

 

Since Google now supports schema.org markup as well as rich snippets, this article will focus on adding schema.org markup to product pages.

For more information on what schema information is available, checkout www.schema.org.

 

Note: This is an advanced article and requires modifying html code.

Requirements:

  • atleast a v2 theme 
  • html knowledge

This article will detail different spots in the theme to add certain schema.org markup.

 

Template

One of the most basic schemas is the WebPage schema. - http://schema.org/WebPage

The recommendation is to add this to your <body> tag.

To do this you'll need to edit the theme's template files.

Navigate to your Theme and expand the Templates section

Then you'll need to go to the HTML Editor for *each* Template in the themes.

Then insert the itemtype and itemscope code into the <body> tag

 

Category

The only thing necessary to markup on the category page is the breadcrumbs. This falls with the "WebPage" scope.

Add the itemprop="breadcrumb" code to the html element surrounding the $$CATEGORYTRAIL$$ merge code. If there isn't one, you can add a <div> tag around it.

 

Product Page

The same markup for the breadcrumbs can apply to the Product page as well.

The next step is to wrap the entire contents of the Product page in a container <div> (if it isn't already). 

NOTE: The breadcrumbs should be outside of this <div> as they belong to the WebPage, not the Product.

Most of the Product schema markup can be inserted into the existing html.

 

Some things aren't exposed by default. These can be added as <meta>tags inside of the product wrapper.

The following is an outline of what we chose to markup in our DejaVu and Base themes. (This represents a typical store - you can markup more or less than this)

  • Product
    • productID = GTIN
      gtin.jpg
    • image = Product Photo
      image.jpg
    • name = Product Name
      itemname.jpg
    • Review-aggregate
      • rating = Average Rating
      • count = Review Count
      • review-aggregate.jpg
    • Offer (this is what handles the pricing)
      • seller = Store Name
      • price = Price
      • pricing.jpg
    • sku = Item Number
    • manufacturer = Manufacturer/Brand
    • sku-mfg.jpg
    • Review (repeated for newest reviews)
      • author = Review Author
      • datePublished = Review Date
      • name = Review Title
      • description = Review Body
      • Review.jpg

 

Have more questions? Submit a request

Comments

  • Avatar
    Brian Gluck

    Great document for the DIYer, and even better that it is automatically included for the new responsive themes you release!