HTML Structured Data (JSON-LD)

What is structured data?

Structured data describes the meaning of a page's content in a machine-readable format, using the schema.org vocabulary. Search engines use it for rich results such as product prices, ratings, recipes and breadcrumbs.

JSON-LD

The recommended format is JSON-LD in a script tag. It doesn't change what users see:

<article>
  <h1>Ceramic Mug, 350 ml</h1>
  <p>Price: <strong>12.00 USD</strong> - In stock</p>
</article>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Ceramic Mug, 350 ml",
  "sku": "MUG-01",
  "offers": {
    "@type": "Offer",
    "price": "12.00",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock"
  }
}
</script>
<p><small>The JSON-LD above isn't visible; it describes the product to search engines.</small></p>

• @context is https://schema.org and @type the kind of thing (Product, Article, Recipe, BreadcrumbList, Organization...).
• The data must match the visible content: don't mark up prices or reviews users can't see.
• Test it with Google's Rich Results Test or the Schema Markup Validator.

Microdata

An older alternative puts itemscope, itemtype and itemprop attributes on visible elements. It works, but JSON-LD is easier to maintain because it's separate from the layout.