HTML5 Microdata & Schema

1 min read

While standard HTML tags (like <h1> or <p>) tell the browser what content is structurally, Microdata tells search engines (like Google, Bing, and Yahoo) what that content means contextually (e.g., “this is a movie review,” or “this is a price,” or “this is a person’s address”).

1. Introduction to Schema.org

Schema.org is a collaborative vocabulary (a set of agreed-upon names for entities, actions, and relationships) used to tag content on the web. It’s the standard vocabulary for Microdata.

Types: Defines types of entities, such as Person, Product, Recipe, LocalBusiness, and Review.
Properties: Defines attributes for those types, such as name, price, ingredients, and address.

2. Microdata Attributes

HTML Microdata uses three main attributes that can be added to any HTML tag to associate it with a Schema.org vocabulary term:

Attribute	Purpose	Description
`itemscope`	Scope	Creates a new item and defines the boundary of the entity.
`itemtype`	Type	Defines the type of entity being described, using a URL from Schema.org (e.g., `http://schema.org/Product`).
`itemprop`	Property	Defines a specific property of the item (e.g., `name`, `author`, `rating`).

3. Example: Marking Up a Product

Imagine you have a product on an e-commerce page. By adding Microdata, you tell search engines exactly what the product name, image, and price are.

<div itemscope itemtype="http://schema.org/Product">
    <h1 itemprop="name">Wireless Ergonomic Mouse</h1>
    <img itemprop="image" src="mouse.jpg" alt="Ergonomic Mouse">
    <span itemprop="description">A comfortable mouse for long workdays.</span>
    
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="priceCurrency" content="USD">$</span>
        <span itemprop="price">39.99</span>
        <link itemprop="availability" href="http://schema.org/InStock" />
    </div>
</div>

4. Benefits of Microdata: Rich Snippets

The primary benefit of using Microdata and Schema.org is the creation of Rich Snippets.

Definition: Rich Snippets are enhanced search results that display extra, contextually relevant information directly beneath the main title and description.
Examples:
- Reviews: Showing a star rating (e.g., 4.5/5 stars) next to the search result.
- Recipes: Showing cooking time and calorie count.
- Products: Showing price, availability, and stock status.

By providing this data, your content stands out, potentially increasing your Click-Through Rate (CTR) from search engine results pages.

5. Alternative: JSON-LD

While Microdata uses attributes within the HTML tags, the alternative and increasingly preferred method is JSON-LD (JavaScript Object Notation for Linked Data).

Format: JSON-LD places the structured data as a JavaScript object inside a <script> tag, usually in the <head> of the document.
Benefit: It keeps the data separate from the visual HTML, making the markup cleaner and easier to maintain.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Recipe",
  "name": "Quick Brownies",
  "author": {
    "@type": "Person",
    "name": "Jane Doe"
  },
  "cookTime": "PT30M"
}
</script>

What are your Feelings