How to Add Product Schema Markup to Your Website

What are Product Schema Markup?

Product schema markup is a type of structured data you can add to your website's HTML code on product pages, typically used by e-commerce shops.

This markup can enable rich snippets for showing price, review ratings, availability, shipping information, price drop and pros & cons (new visual element) in search results. It also makes it easier for search engines to fetch relevant product information and for users to find and compare your products.

Product structured data can combine schema markup types for Product, Review and Offer, each requiring its own set of properties.

Product information has two result types: product snippets and merchant listing experience. The latter has additional avenues for being display at Google.

How to Add Product Schema Markup?

Structured data for product pages can be deployed to your website in 3 steps:

Make sure content meets Google guidelines for product schema
Create JSON-LD markup code with product information
Add Product markup to product page

Step 1: Make Sure Content Meets Google Guidelines for Product Schema

Google has guidelines you need to follow in order to enable rich results for product pages.

There's extensive information about each structured data attribute you can add to a markup, but on a general basis you should:

Only use up-to-date information
Use original content either you or users have made
Don't mark up information not on the page
No fake or misleading reviews
Do not impersonate any person or organization
Use markup for a specific product page, rather than categories or pages listing multiple products
If you have multiple currencies, have a specific URL per currency.
Reviewer's name must be valid
Pros and cons: Only editorial product reviews, and it has to be visible on page.
No prohibited or regulated goods, services or information

Note: You can find errors with product schemas in Google's Merchant listings report or Product snippets report.

Step 2: Create JSON-LD Markup Code With Product Information

There's a lot of attributes that can be used, and all of them are relevant for Google and Bing one way or another, but there's certain information that are required for enabling rich results:

Product Schema Markup example:

{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "description": "Sleeker than ACME's Classic Anvil...",
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "4",
      "bestRating": "5"
    },
    "author": {
      "@type": "Person",
      "name": "Fred Benson"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "reviewCount": "89"
  }
}

(truncated for visual purposes)

The most common structured data formats are: Microdata, RDFa, and JSON-LD. Google recommend JSON-LD markup, so our recommendation is to use it:

We currently prefer JSON-LD markup. I think most of the new structured data that are kind of come out for JSON-LD first. So that's what we prefer.

- John Mueller (Google Search Advocate)

Examples above are using JSON-LD, and contains structured data for a product page. Additional information can be added to Merchant Center with a shopping feed and review feed.

Adding both product schema markups to website and feeds in Merchant Centers will maximize the chance of attaining rich snippets in Google search, and ensuring they correctly understands and verifies your data.

Step 3: Add Product Markup to Product Page

Schemas can be deployed in primarily 3 different ways:

Directly in your site's HTML
Through a plugin
With a third party solution

Directly in Your Site's HTML

Add your schema markup code inside a script tag. This tag is then added to either the head or body section of your HTML.

<html>
  <head>
    <title>Your page title</title>
  </head>
  <body>
    <script type="application/ld+json">
      {
      "@context": "https://schema.org/",
      "@type": "Product",
      {YOUR PRODUCT STRUCTURED DATA}
      }
    </script>
  </body>
</html>

Warning: Avoid adding product structured data manually and automate whenever possible. Product information can be accessible and easy to automate.

Simplified example with Javascript, with product information in "rows":

const rows = [
  {
    id: "A2B4",
    title: "Product title text",
    description: "Product description text",
    price: 999,
    ...
  },
  {other rows...}
]

The use "rows" data to populate Product schema markup:

{rows.map(row => {
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": row.title,
    "description": row.description,
    "offers": {
      "@type": "Offer",
      "itemCondition": "https://schema.org/NewCondition",
      "availability": "https://schema.org/InStock",
      "price": 999.00,
      "priceCurrency": "NOK"
    }
  }
})}

Through a Plugin

If you're using content management system (CMS) with a rich ecosystem of plugins, chances are that you can find a plugin for deploying product schema.

Wordpress is often used for e-commerce, and you can embed WooCommerce or Shopify plugins to transform your site into a webshop. E-commerce solutions such as this gives you the option to mark up product information and generate product schema.

Example of settings for automating product markup in Wordpress:

Other CMS are specifically made for shopping such as Magento or BigCommerce, and structured data are either activated by default or available for deployment through plugins.

With a Third Party Solution

metamanager is a solid solution to get product schema markup.

It's a SaaS solution for SEO that specialize in on-page SEO optimization, and one of the features is publishing structured data. It supports all schema markup types, herein Product.

If you already have a shopping feed (perhaps for Merchant Center or Facebook Product Ads), then you can add it in the platform and it will populate all product pages with data from the feed.

Step 1: Connect website to metamanager and get a full overview of your URLs and their traffic insight:

Step 2: Add feed and auto-create product schemas, and update if necessary:

Step 3: Edit title and description for how it will show up in search results:

Bonus: Do you have reviews on your page? A shopping feed do not usually contain product reviews, but if you have data from either Lipscore or Trustpilot it can merge ratings and product information for a complete markup for organic search results and shopping ads.

"metamanager is an excellent solution for implementing product schema markup on your website, fast."