Microdata and Microformats

Microdata and Microformats

Search engines like Google love knowing what your content MEANS. Microdata and microformats add extra meaning.

Microdata: machine-readable labels

Microdata lets you add labels (like "this is a person" or "this is a review") inside your HTML. Search engines read them.

Three key attributes:

• itemscope: "a new item starts here."
• itemtype: "this item is a Person" (a URL from schema.org).
• itemprop: "this piece of text is the person's name."

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Ada Lovelace</span>
  <span itemprop="jobTitle">Mathematician</span>
</div>

More microdata attributes

• itemid: a global identifier for the item.
• itemref: lets an item include properties from elsewhere in the page.

Why it matters

Rich results! A recipe could show a photo, rating, and cooking time right in search results: all because of microdata.

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Chocolate Cake</h1>
  <span itemprop="cookTime">PT30M</span>
</div>

Microformats: another way

Microformats are a different system using class attributes with special names (like h-card for a person, h-event for an event).

<div class="h-card">
  <a class="p-name u-url" href="https://example.com">Ada Lovelace</a>
</div>

Which one?

• Microdata: uses itemscope/itemprop, pairs with schema.org. Very common.
• Microformats: uses special class names. Older but still around.

Both give machines a way to understand your content.

TL;DR

• Microdata: itemscope + itemtype + itemprop label content for machines.
• Pair with schema.org types (Person, Recipe, Review...).
• Microformats use special class names like h-card.
• Both help search engines show rich results.