Bits of .NET

🔍 Microdata = Semantic Web

Search engines understand structure. Microdata adds semantic meaning. Rich snippets, better SEO, enhanced search results.

📝 Microdata Basics

<!-- Schema.org Vocabulary -->
<div itemscope itemtype="http://schema.org/Product">
    <span itemprop="name">Product Name</span>
    <img itemprop="image" src="product.jpg" alt="Product">
    <span itemprop="description">Product description...</span>
    <span itemprop="sku">SKU-123</span>
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
        <span itemprop="price" content="99.99">$99.99</span>
        <span itemprop="priceCurrency" content="USD">USD</span>
        <link itemprop="availability" href="http://schema.org/InStock" />
    </div>
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
        <span itemprop="ratingValue" content="4.5">4.5</span>
        <span itemprop="reviewCount" content="120">120 reviews</span>
    </div>
</div>

🎯 Common Schema Types

<!-- Person -->
<div itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">John Doe</span>
    <span itemprop="jobTitle">Software Developer</span>
    <span itemprop="email">john@example.com</span>
    <span itemprop="telephone">+1-123-456-7890</span>
    <a itemprop="url" href="https://example.com">Website</a>
</div>

<!-- Article -->
<div itemscope itemtype="http://schema.org/Article">
    <h1 itemprop="headline">Article Title</h1>
    <time itemprop="datePublished" datetime="2024-01-15">Jan 15, 2024</time>
    <span itemprop="author" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">John Doe</span>
    </span>
    <div itemprop="articleBody">Article content...</div>
    <img itemprop="image" src="article.jpg" alt="Article image">
</div>

<!-- Organization -->
<div itemscope itemtype="http://schema.org/Organization">
    <span itemprop="name">Company Name</span>
    <span itemprop="description">Company description...</span>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
        <span itemprop="streetAddress">123 Main St</span>
        <span itemprop="addressLocality">New York</span>
        <span itemprop="addressRegion">NY</span>
        <span itemprop="postalCode">10001</span>
    </div>
</div>

💡 Benefits

• Rich snippets in search results
• Better SEO ranking
• Enhanced search appearance
• Social sharing previews
• Better accessibility