Markup Helper - Products

Markup Helper can show you how to add schema.org markup to pages on your site describing products that are available for sale. If you mark up these pages, Google may make the information available as rich snippets on search result pages or in other Google properties. Information such as a product's name, price, and review ratings can help users decide which pages to click on in search results.

While you're tagging a page, Markup Helper will show you all of the required information and much of the optional information that you can tag for a product. The schema.org reference documentation for the Product schema lists all properties that you can tag, including properties that Markup Helper doesn't support.

What is schema.org?

schema.org is a collaboration by Google, Microsoft, and Yahoo! to improve the web by creating a common vocabulary for describing the data on the web. If you add schema.org markup to your HTML pages, many companies and products—including Google search—will understand the data on your site. Likewise, if you add schema.org markup to your HTML-formatted email, other email products in addition to GMail might understand the data.

You can use different types of markup to describe your data with the schema.org vocabulary. Markup Helper can show you how to use microdata and JSON-LD.

For more information about schema.org, see schema.org FAQ.

What is microdata and JSON-LD markup?

Microdata and JSON-LD are two different ways to mark up your data using the schema.org vocabulary. It's best to choose either microdata or JSON-LD and avoid using both types on a single page or email. Google prefers microdata for web content.

Microdata

Microdata uses HTML tags and attributes to define data. For example, here's some HTML that describes an event:

<div> 
  Come hear the Tiny Tim Tribute Band, live in concert on 
  July 6, 2013 at the beautiful Regency Theater!
</div>
    

And here's the same HTML with microdata markup:

<div itemscope itemtype="http://schema.org/Event"> 
  Come hear the 
  <span itemprop="name">Tiny Tim Tribute Band</span>, 
  live in concert on 
  <span itemprop="startDate" 
  content="2013-07-06>July 6, 2013</span> 
  at the beautiful
  <span itemprop="location" itemscope 
    itemtype="http://schema.org/Place"> 
    <span itemprop="name">Regency Theater</span>!
  </span>
</div>
    

See About microdata for more information.

JSON-LD

JSON-LD uses a JavaScript object in your HTML page to define data. For example, here's JSON-LD that describes an event:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "Slim Whitman Tribute",
  "startDate" : "2013-07-06",
  "location" : {
    "@type" : "Place",
    "name" : "Hollywood Bowl"
  }
}
</script>
    

See JSON-LD for more information.