âš¡IntermediateStructured Data and SEO
Microdata
Embed schema.org structured data directly in HTML using itemscope, itemtype, and itemprop.
Overview
Microdata is an alternative to JSON-LD for structured data instead of a separate script block, you annotate your existing HTML elements directly with schema.org attributes.
Three attributes:
- itemscope: marks an element as the container for structured data
- itemtype: specifies the schema.org type URL (e.g., https://schema.org/Product)
- itemprop: names a property of the enclosing itemscope (e.g., itemprop="name")
Google supports both JSON-LD and Microdata. JSON-LD is generally preferred because it separates data from presentation, but Microdata has the advantage of making the page's visible content do double duty as structured data.
Key Points
- •itemscope marks an element as a schema.org item container
- •itemtype takes the full schema.org type URL
- •itemprop names properties and reads value from element content (or src/href/content attribute)
- •itemid can specify a unique URI for the item
- •Nested itemscope creates structured data for nested objects
- •Google supports Microdata but recommends JSON-LD for new implementations
Examples
Product with Microdata
<div itemscope itemtype="https://schema.org/Product">
<img itemprop="image" src="headphones.jpg" alt="Pro Headphones">
<h1 itemprop="name">Pro Wireless Headphones</h1>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="priceCurrency" content="USD">$</span>
<span itemprop="price" content="129.99">129.99</span>
<link itemprop="availability" href="https://schema.org/InStock">In stock
</div>
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<span itemprop="ratingValue">4.7</span> / 5
(<span itemprop="reviewCount">832</span> reviews)
</div>
</div>Article Microdata
<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">Getting Started with HTML5</h1>
<p>
By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Jane Smith</span>
</span>
</p>
<time itemprop="datePublished" datetime="2024-06-01">June 1, 2024</time>
<div itemprop="articleBody">
<p>HTML5 introduced many semantic elements...</p>
</div>
</article>Common Mistakes
- Forgetting to include the full https://schema.org/ URL in itemtype
- Adding itemprop to elements outside an itemscope container they have no effect
- Using Microdata and JSON-LD simultaneously for the same entity choose one
Note
For new projects, use JSON-LD over Microdata. JSON-LD is easier to maintain, doesn't require restructuring your HTML, and is Google's recommended format. Use Microdata only when you prefer data-in-markup or are migrating an existing site.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4