Mark up with Microdata

Reference

Microdata adds structured data inline using HTML attributes. It is useful when you want the structured data to live directly on the visible elements of the page.

The three core attributes

• itemscope declares that the element and its descendants describe one item.
• itemtype names the type of that item using a vocabulary identifier such as https://schema.org/Movie.
• itemprop names a property of the current item.

Steps

1. Wrap the item. Add itemscope and itemtype to the container element.

<div itemscope itemtype="https://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director:
    <span itemprop="director">James Cameron</span>
  </span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

2. Add properties. Mark each value with itemprop. The text content of the element becomes the value.

3. Use nested items for complex values. When a property value is itself an entity, give that element its own itemscope and itemtype.

<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
  Rated <span itemprop="ratingValue">4</span> based on
  <span itemprop="ratingCount">25</span> reviews.
</div>

4. Handle hidden machine values with meta. When the human readable value differs from the value a machine needs, use a meta element with a content attribute. Use this sparingly.

<div itemprop="reviews" itemscope itemtype="https://schema.org/AggregateRating">
  <meta itemprop="ratingValue" content="4" />
  <meta itemprop="bestRating" content="5" />
  Based on <span itemprop="ratingCount">25</span> user ratings
</div>

Done when

• Every value that search engines should read is wrapped in an itemprop.
• Nested entities have their own itemscope and itemtype.
• Validation reports the expected item and properties.

Notes

• For links, the itemprop value comes from the href attribute of an a element or the src of an image.
• Microdata works well when the structured data closely tracks the visible content. For most modern sites, JSON-LD is easier to maintain.