JSON-LD & Schema.org — HTML

JSON-LD and Schema.org

JSON-LD (JSON for Linked Data) is the modern, preferred format for embedding structured data in an HTML page. Instead of scattering attributes across your visible markup like microdata does, you write one self-contained JSON block describing the page's structured facts.

The script tag

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Understanding JSON-LD",
  "author": {
    "@type": "Person",
    "name": "Jane Doe"
  },
  "datePublished": "2026-01-15"
}
</script>

type="application/ld+json" tells the browser this is structured data, not executable JavaScript.
@context is almost always "https://schema.org", declaring which vocabulary the type names below come from.
@type names the schema.org type this object represents (Article, Product, Organization, and so on).
The script can be placed anywhere in the document — head or body — since it never renders visibly.

Why it's preferred over microdata

Aspect	JSON-LD	Microdata
Separation of concerns	Fully separate from display markup	Interleaved with visible HTML attributes
Ease of editing	One JSON block, easy to generate programmatically	Requires touching multiple elements throughout the page
Risk of breakage	Independent of HTML/CSS refactors	Attributes can be accidentally removed during redesigns
Google's stated preference	Recommended format	Supported, but not preferred for new projects

Example: Product schema

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Wireless Mechanical Keyboard",
  "image": "https://example.com/keyboard.jpg",
  "description": "A compact 75% mechanical keyboard with hot-swappable switches.",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "89.00",
    "availability": "https://schema.org/InStock"
  }
}
</script>

Example: Organization schema

HTML

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Let Codes",
  "url": "https://letcodes.example",
  "logo": "https://letcodes.example/logo.png",
  "sameAs": [
    "https://twitter.com/letcodes",
    "https://github.com/letcodes"
  ]
}
</script>

Tip

Use a structured data testing tool to validate JSON-LD before shipping — a single typo in a property name silently produces no error but also no rich result, since the type just goes unrecognized.

Note

Multiple JSON-LD blocks can coexist on one page — for example, an Organization block describing the whole site alongside an Article block describing the current post.