HTML Microdata

Master HTML microdata and structured data markup to improve SEO, enhance search result appearance, and help search engines understand your content.

Understanding Structured Data

HTML microdata is a specification that allows you to embed machine-readable data within HTML content. It helps search engines, browsers, and other applications understand the meaning and context of your content, leading to enhanced search results with rich snippets, improved SEO, and better content discovery.

By adding structured data markup, you can help search engines display your content more effectively in search results, including star ratings, pricing information, event details, author information, and much more.

🔍 Key Concept

Microdata transforms your HTML from human-readable content into machine-readable structured data that search engines and applications can understand and process.

Microdata Attributes

HTML5 microdata uses five key attributes to structure information: 

<!-- Basic microdata structure -->
<div itemscope itemtype="https://schema.org/Person">
    <h2 itemprop="name">John Doe</h2>
    <p>Job: <span itemprop="jobTitle">Web Developer</span></p>
    <p>Company: <span itemprop="worksFor">Tech Solutions Inc.</span></p>
    <p>Email: <a href="mailto:john@example.com" itemprop="email">john@example.com</a></p>
</div>

<!-- Nested microdata items -->
<div itemscope itemtype="https://schema.org/Organization">
    <h1 itemprop="name">CodeMaster Academy</h1>
    
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
        <span itemprop="streetAddress">123 Learning Street</span><br>
        <span itemprop="addressLocality">Education City</span>,
        <span itemprop="addressRegion">Learning State</span>
        <span itemprop="postalCode">12345</span>
    </div>
    
    <p>Phone: <span itemprop="telephone">(555) 123-4567</span></p>
</div>
Microdata Attributes:
  • itemscope - Creates a new item scope
  • itemtype - Defines the type of item (Schema.org URL)
  • itemprop - Defines a property of the item
  • itemid - Global identifier for the item
  • itemref - References other elements as part of the item

Schema.org Vocabulary

<!-- Product schema example -->
<article itemscope itemtype="https://schema.org/Product">
    <h2 itemprop="name">Wireless Bluetooth Headphones</h2>
    
    <img src="headphones.jpg" alt="Product image" itemprop="image">
    
    <p itemprop="description">
        Premium quality wireless headphones with noise cancellation 
        and 30-hour battery life.
    </p>
    
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <span itemprop="priceCurrency" content="USD">$</span>
        <span itemprop="price" content="199.99">199.99</span>
        
        <link itemprop="availability" href="https://schema.org/InStock">
        <span>In Stock</span>
        
        <span>Valid until: <time itemprop="priceValidUntil" datetime="2025-12-31">December 31, 2025</time></span>
    </div>
    
    <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
        <span itemprop="ratingValue">4.5</span> out of
        <span itemprop="bestRating">5</span> stars
        (<span itemprop="reviewCount">324</span> reviews)
    </div>
</article>

<!-- Recipe schema example -->
<article itemscope itemtype="https://schema.org/Recipe">
    <h1 itemprop="name">Chocolate Chip Cookies</h1>
    
    <p>By <span itemprop="author">Chef Maria</span></p>
    
    <p itemprop="description">
        Classic chocolate chip cookies that are crispy on the outside
        and chewy on the inside.
    </p>
    
    <ul>
        <li>Prep time: <time itemprop="prepTime" datetime="PT15M">15 minutes</time></li>
        <li>Cook time: <time itemprop="cookTime" datetime="PT10M">10 minutes</time></li>
        <li>Yield: <span itemprop="recipeYield">24 cookies</span></li>
    </ul>
    
    <div itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
        <span itemprop="calories">120</span> calories per cookie
    </div>
</article>

Event and Organization Markup

<!-- Event schema -->
<div itemscope itemtype="https://schema.org/Event">
    <h2 itemprop="name">Web Development Conference 2025</h2>
    
    <p itemprop="description">
        Join industry experts for three days of talks, workshops, 
        and networking focused on modern web development.
    </p>
    
    <div itemprop="location" itemscope itemtype="https://schema.org/Place">
        <span itemprop="name">Convention Center Downtown</span>
        <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
            <span itemprop="streetAddress">456 Conference Blvd</span>,
            <span itemprop="addressLocality">Tech City</span>,
            <span itemprop="addressRegion">CA</span>
        </div>
    </div>
    
    <p>
        Date: <time itemprop="startDate" datetime="2025-09-15T09:00">September 15, 2025 9:00 AM</time>
        to <time itemprop="endDate" datetime="2025-09-17T17:00">September 17, 2025 5:00 PM</time>
    </p>
    
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
        <span itemprop="price" content="299">$299</span>
        <span itemprop="priceCurrency" content="USD">USD</span>
        <span itemprop="availability" content="https://schema.org/InStock">Available</span>
    </div>
    
    <div itemprop="organizer" itemscope itemtype="https://schema.org/Organization">
        <span itemprop="name">Tech Events Inc.</span>
    </div>
</div>

<!-- Local Business schema -->
<div itemscope itemtype="https://schema.org/LocalBusiness">
    <h1 itemprop="name">Mario's Pizza</h1>
    
    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
        <span itemprop="streetAddress">123 Main Street</span><br>
        <span itemprop="addressLocality">Hometown</span>,
        <span itemprop="addressRegion">NY</span>
        <span itemprop="postalCode">12345</span>
    </div>
    
    <p>Phone: <span itemprop="telephone">(555) 123-PIZZA</span></p>
    
    <div itemprop="openingHoursSpecification" itemscope itemtype="https://schema.org/OpeningHoursSpecification">
        <span itemprop="dayOfWeek" content="Monday Tuesday Wednesday Thursday Friday Saturday Sunday">Every day</span>
        <time itemprop="opens" content="11:00">11:00 AM</time> -
        <time itemprop="closes" content="23:00">11:00 PM</time>
    </div>
    
    <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
        Rating: <span itemprop="ratingValue">4.2</span>/5
        (<span itemprop="reviewCount">89</span> reviews)
    </div>
</div>

Article and Blog Post Markup

<!-- Article schema -->
<article itemscope itemtype="https://schema.org/Article">
    <header>
        <h1 itemprop="headline">10 Essential Web Development Tips for 2025</h1>
        
        <p>
            By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
                <span itemprop="name">Jane Developer</span>
            </span>
            
            | Published: <time itemprop="datePublished" datetime="2025-01-15">January 15, 2025</time>
            | Updated: <time itemprop="dateModified" datetime="2025-01-20">January 20, 2025</time>
        </p>
    </header>
    
    <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <img src="web-dev-tips.jpg" alt="Web development tips" itemprop="url">
        <meta itemprop="width" content="1200">
        <meta itemprop="height" content="630">
    </div>
    
    <div itemprop="articleBody">
        <p>Web development continues to evolve rapidly, and staying current with best practices is essential...</p>
        
        <h2>1. Embrace Modern CSS Features</h2>
        <p>CSS Grid and Flexbox have revolutionized layout design...</p>
        
        <!-- More article content -->
    </div>
    
    <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <span itemprop="name">CodeMaster Academy</span>
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
            <img src="logo.png" alt="CodeMaster Academy Logo" itemprop="url">
        </div>
    </div>
    
    <meta itemprop="wordCount" content="1250">
</article>

Testing and Validation

<!-- Tools for testing structured data -->

Google Rich Results Test: https://search.google.com/test/rich-results
Schema.org Validator: https://validator.schema.org/
Google Structured Data Testing Tool (deprecated but still useful)
Yandex Structured Data Validator: https://webmaster.yandex.com/tools/structured-data/

JSON-LD alternative to microdata:
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": "2025-01-15",
  "dateModified": "2025-01-20"
}
</script>

Common Schema Types

Business & Organizations

  • Organization
  • LocalBusiness
  • Corporation
  • EducationalOrganization
  • GovernmentOrganization

Content Types

  • Article
  • BlogPosting
  • NewsArticle
  • Recipe
  • Review

Products & Services

  • Product
  • Service
  • Offer
  • AggregateOffer
  • Brand

Events & Places

  • Event
  • Place
  • PostalAddress
  • GeoCoordinates
  • OpeningHoursSpecification

Best Practices

✅ Do

  • Use Schema.org vocabulary for consistency
  • Test markup with Google's Rich Results Test
  • Include all required properties for schema types
  • Use specific schema types when available
  • Keep structured data synchronized with visible content
  • Validate markup regularly

❌ Avoid

  • Adding markup for content not visible to users
  • Using incorrect schema types
  • Including false or misleading information
  • Over-marking content unnecessarily
  • Using deprecated schema properties
  • Ignoring schema validation errors