HTML Microdata & Schema
In this page:
What is Microdata?
Microdata is a specification used to nest machine-readable structured data directly inside your HTML. It allows search engines to understand the exact context of your content beyond basic text descriptions.
Note: Use Schema.org vocabulary as the global standard for your microdata type definitions.
Warning: Failing to write microdata cleanly can prevent search engines from displaying rich snippets for your site.
Example: What is Microdata?
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">Coffee Maker</span>
</div>Defining Scope with itemscope
The itemscope attribute defines the boundaries of a specific structured item. It tells search engines that all the nested itemprop properties inside this container belong to the same item.
Note: Place the itemscope attribute on the outermost parent container of your content block.
Warning: If you forget to declare itemscope, any nested itemprop attributes will be ignored by search bots.
Example: Defining Scope with itemscope
<div itemscope>
<span itemprop="name">Coffee Maker</span>
</div>Declaring Types with itemtype
The itemtype attribute specifies the exact vocabulary category of your item (like a Book, Product, or SoftwareApplication) using a URL that links directly to its official definition on Schema.org.
Note: Always pair your itemtype attribute with itemscope on the same parent element.
Warning: Using custom, unregistered itemtype URLs will prevent search engines from parsing your data.
Example: Declaring Types with itemtype
<div itemscope itemtype="https://schema.org/Book">
<span itemprop="name">The Great Gatsby</span>
</div>Marking Properties with itemprop
The itemprop attribute labels specific properties (like name, description, price, or operatingSystem) inside your item scope. Search engines map these values directly to their indexing databases.
Note: Check the exact property names allowed for your itemtype on Schema.org to prevent validation errors.
Warning: Do not mix itemprop attributes from different schema types within the same scope without nesting.
Example: Marking Properties with itemprop
<div itemscope itemtype="https://schema.org/SoftwareApplication">
<span itemprop="name">My App</span>
<span itemprop="operatingSystem">Android</span>
</div>Nesting Item Properties
You can nest structured items inside other items. For example, a SoftwareApplication item can contain an Offer item (for pricing), which in turn contains price and currency properties, creating a rich hierarchical tree of details.
Note: Use nested properties to supply rich price details that display directly in search results.
Warning: Ensure your nested items contain their own itemscope attributes to declare their local boundaries.
Example: Nesting Item Properties
<div itemscope itemtype="https://schema.org/SoftwareApplication">
<span itemprop="name">My App</span>
<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
<span itemprop="price">4.99</span>
<span itemprop="priceCurrency">USD</span>
</div>
</div>- Forgetting to declare the parent itemscope attribute, which invalidates all nested itemprop properties.
- Misspelling or capitalizing property names incorrectly compared to Schema.org standards.
- Writing unquoted schema URLs inside your itemtype attributes.
- HTML Microdata adds machine-readable structured labels to your webpage content for search engine crawlers.
- Declare item scopes using the itemscope attribute and specify their category definitions with itemtype.
- Tag specific content items inside your scope using the itemprop attribute, nesting items to structure complex data.
HTML Microdata parsing is supported natively by all major search engine crawlers and browsers.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: