Microdata is a feature in HTML5 that helps to embed structured data within your web pages.
It allows you to describe your content more clearly to search engines and other applications, enhancing SEO and enabling rich snippets in search results.
In this tutorial, you’ll learn:
- What Microdata is and its purpose.
- How to use Microdata in HTML5.
- Practical examples using common vocabularies like Schema.org.
- Best practices for using Microdata.
1. What is Microdata?
Microdata allows you to embed structured metadata into your HTML content. It uses:
- itemscope: Defines an item.
- itemtype: Specifies the type of the item (usually a vocabulary like Schema.org).
- itemprop: Specifies a property of the item.
Why Use Microdata?
- Improves SEO: Helps search engines better understand your content.
- Rich Snippets: Enables search engines to display rich, interactive snippets.
- Standardized Structure: Makes your content machine-readable.
2. Basic Structure of Microdata
Syntax
<div itemscope itemtype="http://schema.org/Type">
<span itemprop="propertyName">Property Value</span>
</div>
3. Example 1: Adding Microdata to a Web Page
Let’s mark up information about a book.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Microdata Example - Book</title>
</head>
<body>
<h1>Book Information</h1>
<div itemscope itemtype="http://schema.org/Book">
<h2 itemprop="name">The Great Gatsby</h2>
<p>Author: <span itemprop="author">F. Scott Fitzgerald</span></p>
<p>Published: <span itemprop="datePublished">1925</span></p>
<p>Publisher: <span itemprop="publisher">Charles Scribner's Sons</span></p>
<p>ISBN: <span itemprop="isbn">978-0743273565</span></p>
</div>
</body>
</html>
Explanation:
- itemscope: Declares a Microdata item (in this case, a book).
- itemtype: Specifies the type of the item (http://schema.org/Book).
- itemprop: Specifies the properties of the book, such as name, author, and datePublished.
4. Example 2: Adding Microdata for a Person
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Microdata Example - Person</title>
</head>
<body>
<h1>Person Information</h1>
<div itemscope itemtype="http://schema.org/Person">
<p>Name: <span itemprop="name">John Doe</span></p>
<p>Job Title: <span itemprop="jobTitle">Software Engineer</span></p>
<p>Email: <span itemprop="email">johndoe@example.com</span></p>
<p>Website: <a href="https://johndoe.com" itemprop="url">johndoe.com</a></p>
</div>
</body>
</html>
Explanation:
- The Person type from Schema.org is used to describe a person’s details like name, job title, email, and website.
5. Nesting Microdata
You can nest Microdata items to describe more complex relationships.
Example 3: Nesting Microdata for a Product and Review
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Microdata Example - Product and Review</title>
</head>
<body>
<h1>Product Information</h1>
<div itemscope itemtype="http://schema.org/Product">
<h2 itemprop="name">Smartphone XYZ</h2>
<p>Description: <span itemprop="description">A high-end smartphone with 128GB storage.</span></p>
<p>Price: $<span itemprop="price">799</span></p>
<p>Currency: <span itemprop="priceCurrency">USD</span></p>
<div itemprop="review" itemscope itemtype="http://schema.org/Review">
<p>Review by: <span itemprop="author">Jane Smith</span></p>
<p>Rating: <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">4.5</span> / 5
</span></p>
<p>Review Text: <span itemprop="reviewBody">Excellent smartphone with great performance!</span></p>
</div>
</div>
</body>
</html>
Explanation:
- Nested Microdata: The Product type contains a nested Review type, which in turn contains a nested Rating type.
- Each itemscope declares a new Microdata item.
6. Practical Examples
Example 4: Adding Microdata for a Local Business
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Microdata Example - Local Business</title>
</head>
<body>
<h1>Business Information</h1>
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h2 itemprop="name">The Coffee Corner</h2>
<p>Address: <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">123 Main St</span>,
<span itemprop="addressLocality">Springfield</span>,
<span itemprop="addressRegion">IL</span>,
<span itemprop="postalCode">62701</span>
</span></p>
<p>Phone: <span itemprop="telephone">(555) 123-4567</span></p>
<p>Website: <a href="https://coffeecorner.com" itemprop="url">coffeecorner.com</a></p>
</div>
</body>
</html>
Explanation:
- PostalAddress: Nested inside the LocalBusiness type to describe the address.
Example 5: Adding Breadcrumb Navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Microdata Example - Breadcrumbs</title>
</head>
<body>
<nav itemscope itemtype="http://schema.org/BreadcrumbList">
<ul>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/category" itemprop="item"><span itemprop="name">Category</span></a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/category/item" itemprop="item"><span itemprop="name">Item</span></a>
<meta itemprop="position" content="3">
</li>
</ul>
</nav>
</body>
</html>
Explanation:
- BreadcrumbList: Represents a navigation breadcrumb.
- ListItem: Each breadcrumb step is a list item with a position.
7. Testing Microdata
How to Test Microdata:
- Use Google’s Rich Results Test: Rich Results Test
- Inspect your page’s Microdata structure for errors and validate the content.
8. Best Practices for Microdata
- Use Standard Vocabularies: Schema.org is the most widely supported vocabulary.
- Keep It Human-Readable: Ensure the HTML remains readable for users.
- Validate Regularly: Check for errors using testing tools.
- Focus on Relevant Data: Only mark up data that adds value for search engines or users.
- Avoid Keyword Stuffing: Don’t misuse Microdata to manipulate rankings.
9. Conclusion
In this tutorial, you learned:
- The basics of HTML5 Microdata and its syntax.
- How to add Microdata for books, people, products, reviews, businesses, and breadcrumbs.
- How to use nested Microdata for complex relationships.
- Best practices for implementing Microdata.
Microdata helps search engines understand your content better and can significantly improve your website’s SEO and visibility.