Microdata and Schema.org

1. Introduction

Microdata is an HTML specification that embeds structured, machine-readable data directly into your markup using special attributes. Combined with the Schema.org vocabulary — backed by Google, Bing, Yahoo, and Yandex — microdata enables rich search results (star ratings, event dates, product prices, FAQ dropdowns) that significantly improve click-through rates from search engine results pages.

2. Concept

Microdata Attributes

Attribute	Where Used	Purpose
`itemscope`	Any element	Declares this element describes a structured item
`itemtype`	With itemscope	Schema.org type URL (e.g. https://schema.org/Product)
`itemprop`	Child elements	Names a property of the parent item
`itemid`	With itemscope	Global identifier (ISBN, URL) for the item
`content`	<meta itemprop>	Machine-readable value when visible text is unsuitable

Note: Schema.org supports three syntaxes: Microdata (HTML attributes), JSON-LD (a script tag), and RDFa. Google recommends JSON-LD for new implementations because it is easier to maintain without restructuring HTML. Microdata is fully supported and widely used on existing sites.

Tip: Validate your structured data with Google’s Rich Results Test at search.google.com/test/rich-results before deploying. Errors in microdata suppress rich snippets entirely, so testing early saves significant debugging time.

Warning: Never mark up content that is hidden from users. Google’s guidelines prohibit hiding structured data in display:none elements or marking up content that contradicts what is visible on the page — this can result in a manual action penalty.

3. Basic Example

<!DOCTYPE html>
<html lang="en">
  <head><meta charset="UTF-8"><title>Product Page</title></head>
  <body>

    <article itemscope itemtype="https://schema.org/Product">

      <h1 itemprop="name">Pro Wireless Headphones</h1>

      <img
        itemprop="image"
        src="/images/headphones.jpg"
        alt="Pro Wireless Headphones in midnight black"
        width="400" height="300"
      >

      <p itemprop="description">
        Premium over-ear headphones with 30-hour battery life,
        active noise cancellation, and hi-res audio certification.
      </p>

      <!-- Nested AggregateRating -->
      <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
        <span itemprop="ratingValue">4.7</span>/5
        based on <span itemprop="reviewCount">312</span> reviews
      </div>

      <!-- Nested Offer -->
      <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <span itemprop="priceCurrency" content="GBP"></span>
        <span itemprop="price" content="149.99">£149.99</span>
        <link itemprop="availability" href="https://schema.org/InStock">In Stock
      </div>

    </article>

  </body>
</html>

4. How It Works

Step 1 — itemscope and itemtype Declare the Item

itemscope on the <article> tells parsers “this element and its descendants describe a single structured item”. itemtype="https://schema.org/Product" specifies the Schema.org vocabulary, defining which properties are valid for this item type.

Step 2 — itemprop Names Properties

Any descendant with itemprop="name" contributes its content as that property’s value. For <img> the value is the src; for <a> it is href; for all others it is the text content.

Step 3 — Nesting Items for Complex Properties

Properties like aggregateRating and offers expect structured objects, not plain text. Add both itemprop and itemscope itemtype to the same element — creating a nested item that is simultaneously a property value and its own typed object.

Step 4 — content Attribute for Machine Values

The content attribute provides a machine-readable value that differs from displayed text. Used here for priceCurrency (“GBP” rather than the £ symbol) and the exact numeric price without formatting characters.

5. Real-World Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Fundamentals — Online Course</title>
  </head>
  <body>
    <main>
      <article itemscope itemtype="https://schema.org/Course">

        <h1 itemprop="name">HTML5 Fundamentals</h1>

        <p itemprop="description">
          A comprehensive beginner-to-advanced course covering HTML5 structure,
          semantic elements, forms, accessibility, and performance.
        </p>

        <p>Provider:
          <span itemprop="provider" itemscope itemtype="https://schema.org/Organization">
            <span itemprop="name">Dev Academy</span>
          </span>
        </p>

        <p>Duration: <span itemprop="timeRequired" content="PT8H">8 hours</span></p>
        <p>Level: <span itemprop="educationalLevel">Beginner to Advanced</span></p>

        <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
          Rating: <span itemprop="ratingValue">4.9</span>/5
          (<span itemprop="ratingCount">1,248</span> students)
        </div>

        <a href="/enroll" itemprop="url">Enrol Now — Free</a>

      </article>
    </main>
  </body>
</html>

6. Common Mistakes

❌ Marking up hidden content

<p style="display:none" itemprop="price">£9.99</p>

✓ Structured data must match what is visible to users

<span itemprop="price" content="149.99">£149.99</span>

❌ Forgetting itemscope on nested compound properties

<div itemprop="offers">
  <span itemprop="price">£49</span>
</div>

✓ Nested properties need their own itemscope and itemtype

<div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
  <span itemprop="price" content="49.00">£49</span>
</div>

7. Try It Yourself

▶ Test with Google Rich Results Tool

8. Quick Reference

Attribute	Purpose	Value Format
`itemscope`	Marks item boundary	Boolean — no value
`itemtype`	Schema.org type URL	https://schema.org/TypeName
`itemprop`	Property name	Schema.org property key
`itemid`	Global identifier	URL or URN
`content`	Machine value override	ISO 8601, numeric, URL
`<link itemprop href>`	Enumerated URL value	https://schema.org/InStock etc.
`<meta itemprop content>`	Invisible machine property	Any string

Microdata and Schema.org

Microdata and Schema.org

1. Introduction

2. Concept

Microdata Attributes

3. Basic Example

4. How It Works

Step 1 — itemscope and itemtype Declare the Item

Step 2 — itemprop Names Properties

Step 3 — Nesting Items for Complex Properties

Step 4 — content Attribute for Machine Values

5. Real-World Example

6. Common Mistakes

7. Try It Yourself

8. Quick Reference

9. Quiz

🧠 Test Yourself

Microdata and Schema.org

1. Introduction #

2. Concept #

Microdata Attributes #

3. Basic Example #

4. How It Works #

Step 1 — itemscope and itemtype Declare the Item #

Step 2 — itemprop Names Properties #

Step 3 — Nesting Items for Complex Properties #

Step 4 — content Attribute for Machine Values #

5. Real-World Example #

6. Common Mistakes #

7. Try It Yourself #

8. Quick Reference #

9. Quiz #

🧠 Test Yourself #

📚 More in this Tutorial Series

1. Introduction

2. Concept

Microdata Attributes

3. Basic Example

4. How It Works

Step 1 — itemscope and itemtype Declare the Item

Step 2 — itemprop Names Properties

Step 3 — Nesting Items for Complex Properties

Step 4 — content Attribute for Machine Values

5. Real-World Example

6. Common Mistakes

7. Try It Yourself

8. Quick Reference

9. Quiz

🧠 Test Yourself