Adding Schema.org / Rich Snippets to your products

Storefront > Themes > Edit Theme > Pages > Product Details > HTML Editor

Overview

The Tags

Troubleshooting

Getting Help

Overview

Structured data tags are used by search engines to index product pages and display search results. Some Google services require pages to use schema.org tags. This article provides code snippets examples of how you might use schema.org tags on your product pages. 

For more information on schema.org structured data tags, see: schema.org/docs/documents.html

Commonly Used Tags

Below is a compilation of the required, and commonly used, schema.org tags for products. These can be added and/or edited in Themes > Edit Theme > Pages > Product Details > HTML Editor.  The "..." indicate that your theme might have additional code between the tags shown. The item properties must be spelled exactly and use the correct character casing. For example in the tag <meta itemprop="name" content="##PRODUCTNAME##"> , itemprop must equal exactly "name".

• This would not be valid: itemprop="Name"
• This would not be valid: itemprop="itemname"
• This would not be valid: itemprop="name". 

In general, meta tags are interchangeable with other HTML tags. For example:

• This is valid: <meta itemprop="name" content="##PRODUCTNAME##">
• This is valid: <div itemprop="name">##PRODUCTNAME##</div>
• This is valid: <div itemprop="name" style="dispaly:none;">##PRODUCTNAME##</div>

<!-- BEGIN Schema.org Product Rich Snippet Markup -->
<!-- meta tags -->

##SET[shortDesc=##SHORTDESCRIPTION##]##
##IF[shortDesc=]##
<meta property="og:description" 
content="##TRIM[55]####LONGDESCRIPTION1####ENDTRIM##">
<meta name="twitter:description" 
content="##TRIM[55]####LONGDESCRIPTION1####ENDTRIM##">
##ELSE##
<meta property="og:description" 
content="##SHORTDESCRIPTION##">
<meta name="twitter:description" content="##SHORTDESCRIPTION##">

##ENDIF##

<meta property="og:title" content="##PRODUCTNAME##">

<meta property="og:image" content="https://##SSLDOMAIN####ITEMPHOTOURL##">

<meta name="twitter:image" content="https://##SSLDOMAIN####ITEMPHOTOURL##">


<div itemtype="http://schema.org/Product" itemscope="">

<meta itemprop="category" content="##CATNAME##">
<meta itemprop="mpn" content="##MFGPARTNUMBER##">

<meta itemprop="name" content="##PRODUCTNAME##">
<meta itemprop="gtin" content="##GTIN##">


<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">

<meta itemprop="seller" content="##STORENAME##">

<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition">

<meta itemprop="availability" content="##AVAILABILITYSCHEMATYPE##">

<meta itemprop="priceValidUntil" content="##CURRENTDATE[]##">
<meta itemprop="priceCurrency" content="USD">

<meta itemprop="price" content="##RAWPRICE##">
<meta itemprop="url" content="##ITEMURL##">

</div>
<!-- END meta tags -->

    <!-- review -->
    <div itemprop="review" itemscope="" itemtype="http://schema.org/Review">
       ...
       <span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
         <span itemprop="name">$$AUTHORNAME$$</span>
       </span>
       ...
       <span itemprop="description">$$REVIEWBODY$$</span>
    </div>
    ...
    

    <!-- aggregateRating -->
    ##IF[ReviewCount!=0]##  <!-- display if review count isn't 0 -->
    <div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating">
        <meta itemprop="ratingValue" content="##AVERAGERATING##">
        <meta itemprop="bestRating" content="5">
        <meta itemprop="worstRating" content="1">
        <meta itemprop="reviewCount" content="##REVIEWCOUNT##">
    </div>
    ##ENDIF##
    ...
    
    <!-- manufacturer and sku... -->
    <div itemprop="manufacturer" content="##MFGNAME##">$$MFGNAME$$</div>
    <div class="ItemNR">Item # <span itemprop="sku">$$ITEMNR$$</span></div>
    ...
  <!-- END Schema.org Product Structured Data Markup -->

Troubleshooting

Google may notify you through your Google Merchant Center that your products have missing or broken tags. The first step to fixing the tags is to use Google Rich Results Testing Tool. The tool asks for a product page URL and then runs the test. Errors and/or warnings will be displayed and marked:

The above screenshot shows a warning on the product "price" property: "Price: $10 is not a valid price specification". If we go to http://schema.org/price, we can see an example of how the tag should be structured: 

schema.org/price also provides some nice usage guidelines: 

Usage guidelines:

• Use the priceCurrency property (with ISO 4217 codes e.g. "USD") instead of including ambiguous symbols such as '$' in the value.
• Use '.' (Unicode 'FULL STOP' (U+002E)) rather than ',' to indicate a decimal point. Avoid using these symbols as a readability separator.
• Note that both RDFa and Microdata syntax allow the use of a "content=" attribute for publishing simple machine-readable values alongside more human-friendly formatting.
• Use values from 0123456789 (Unicode 'DIGIT ZERO' (U+0030) to 'DIGIT NINE' (U+0039)) rather than superficially similiar Unicode symbols.

 As always, we recommend backing up your theme or code before making any changes. 

Getting Help

There's many resources online on editing, maintaining, and adding scheme.org tags to websites. Here's some we recommend: 

• https://support.google.com/merchants/answer/7353427?hl=en
• https://support.google.com/merchants/answer/6069143?hl=en
• https://moz.com/learn/seo/schema-structured-data
• http://schema.org/docs/gs.html

Our free technical support can help you navigate the admin to find the appropriate edit page. If you're not comfortable making changes yourself, the account management team can provide you with a quote on the work. If you have any additional questions, don't hesitate to submit a support ticket or give us a call.