Learn how to add structured data to your HTML using Schema.org microdata and JSON-LD to help search engines understand your content and generate rich results.
Structured data is a standardised way to describe the content of a page so that search engines, social platforms, and other machines can understand it.
For example, a product page might contain a title, price, rating, and availability. Humans can read these from the page layout. Structured data makes this information machine-readable so Google can display rich results — star ratings, price ranges, FAQ accordions, recipe cards, and more.
The most widely used vocabulary is Schema.org, maintained jointly by Google, Microsoft, Yahoo, and Yandex. It defines types like Article, Product, Person, Organization, Event, Recipe, and hundreds more.
Microdata is a set of HTML attributes that annotate your existing markup:
| Attribute | Purpose |
|---|---|
itemscope | Creates a new item (like opening a JSON object) |
itemtype | Specifies the Schema.org type (URL) |
itemprop | Names a property of the item |
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">Understanding Microdata</h1>
<p>By <span itemprop="author">Jane Doe</span></p>
<time itemprop="datePublished" datetime="2025-06-15">June 15, 2025</time>
<p itemprop="description">Learn how to add structured data to HTML.</p>
</article>Microdata is woven into the existing HTML — you do not need to duplicate content. This makes it easy to maintain since the structured data and the visible content stay in sync.
JSON-LD (JSON for Linked Data) is Google's recommended format. Instead of annotating HTML elements, you place a separate <script> block with the structured data:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Understanding Microdata",
"author": {
"@type": "Person",
"name": "Jane Doe"
},
"datePublished": "2025-06-15",
"description": "Learn how to add structured data to HTML."
}
</script>| Type | Rich Result | Key Properties |
|---|---|---|
Article | News/blog article | headline, author, datePublished, image |
Product | Product listing | name, description, offers (price, availability) |
Person | Knowledge panel | name, jobTitle, url, image |
Organization | Company info | name, logo, url, contactPoint |
Event | Event listing | name, startDate, location, offers |
FAQPage | FAQ accordion | mainEntity (array of Question items) |
Recipe | Recipe card | name, cookTime, recipeIngredient |
BreadcrumbList | Breadcrumb trail | itemListElement (array of ListItem) |
<!-- MICRODATA approach: annotations on existing HTML -->
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">Getting Started with HTML</h1>
<p>By <span itemprop="author">Jane Doe</span></p>
<time itemprop="datePublished" datetime="2025-06-15">June 15, 2025</time>
<p itemprop="articleBody">HTML is the foundation of every web page...</p>
</article>
<!-- JSON-LD approach: separate script block -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Getting Started with HTML",
"author": {
"@type": "Person",
"name": "Jane Doe"
},
"datePublished": "2025-06-15",
"description": "HTML is the foundation of every web page."
}
</script>What is the main advantage of JSON-LD over Microdata?