|

HTML 29 💻 microdata

Microdata is a way to add structured data to HTML documents. It helps search engines understand the content of your page, enables rich snippets in search results, and improves accessibility for screen readers.


What is Microdata?

Microdata uses attributes added to HTML elements that provide additional semantic information. It defines a vocabulary of name-value pairs that describe the content.

Key Benefits:

BenefitDescription
SEOImproves search engine understanding and rankings
Rich SnippetsEnables enhanced search results (ratings, prices, etc.)
AccessibilityBetter context for screen readers
InteroperabilityMachine-readable data for apps and services

Microdata Attributes

AttributePurposeExample
itemscopeCreates a new item — indicates the enclosed HTML block contains information about a single itemitemscope
itemtypeSpecifies the type of item being described (usually a URL from schema.org)itemtype="https://schema.org/Person"
itempropIndicates that the content is a property name of the itemitemprop="name"

Basic Example

<div itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">Kronos</span>
    <span itemprop="jobTitle">Fullstack Developer</span>
    <a href="mailto:johndoe@example.com" itemprop="email">something@example.com</a>
</div>

Common Schema.org Types

TypeDescriptionExample Properties
PersonA personname, jobTitle, email, address, birthDate
ArticleA news articleheadline, author, datePublished, articleBody
BookA bookname, author, isbn, datePublished
MovieA moviename, director, actors, duration
RecipeA recipename, recipeIngredient, recipeInstructions, cookTime
ReviewA reviewreviewRating, reviewBody, author
WebPageA webpagename, description, url, breadcrumb
OrganizationAn organizationname, url, logo, address
LocalBusinessA local businessname, address, telephone, openingHours
ProductA productname, description, image, offers
EventAn eventname, startDate, location, performer
PlaceA placename, address, geo

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microdata - Structured Data</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            margin-top: 30px;
            border-left: 4px solid #28a745;
            padding-left: 15px;
        }

        .demo-container {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            margin: 20px 0;
        }

        .demo-container .microdata-example {
            background: #e9ecef;
            padding: 15px;
            border-radius: 6px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .reference-table tr:hover {
            background: #e9ecef;
        }

        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #dc3545;
        }

        .badge {
            display: inline-block;
            background: #28a745;
            color: white;
            padding: 2px 12px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: bold;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }
    </style>
</head>
<body>

    <h1>Microdata — Structured Data</h1>

    <!-- ====== SECTION 1: PERSON ====== -->
    <h2>1. Person</h2>

    <div class="demo-container">
        <div class="microdata-example">
            <h3>Rendered Content:</h3>
            <div itemscope itemtype="https://schema.org/Person">
                <p><strong>Name:</strong> <span itemprop="name">Kronos</span></p>
                <p><strong>Job Title:</strong> <span itemprop="jobTitle">Fullstack Developer</span></p>
                <p><strong>Email:</strong> <a href="mailto:johndoe@example.com" itemprop="email">johndoe@example.com</a></p>
                <p><strong>Birth Date:</strong> <span itemprop="birthDate">1990-05-15</span></p>
                <p><strong>Nationality:</strong> <span itemprop="nationality">American</span></p>
            </div>
        </div>

        <div class="code-block">
            <span style="color: #569cd6;">&lt;div</span> <span style="color: #9cdcfe;">itemscope</span> <span style="color: #9cdcfe;">itemtype</span>=<span style="color: #ce9178;">"https://schema.org/Person"</span><span style="color: #569cd6;">&gt;</span>
            <span style="color: #569cd6;">    &lt;p&gt;&lt;strong&gt;</span>Name:<span style="color: #569cd6;">&lt;/strong&gt;</span> <span style="color: #569cd6;">&lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"name"</span><span style="color: #569cd6;">&gt;</span>Kronos<span style="color: #569cd6;">&lt;/span&gt;&lt;/p&gt;</span>
            <span style="color: #569cd6;">    &lt;p&gt;&lt;strong&gt;</span>Job Title:<span style="color: #569cd6;">&lt;/strong&gt;</span> <span style="color: #569cd6;">&lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"jobTitle"</span><span style="color: #569cd6;">&gt;</span>Fullstack Developer<span style="color: #569cd6;">&lt;/span&gt;&lt;/p&gt;</span>
            <span style="color: #569cd6;">    &lt;p&gt;&lt;strong&gt;</span>Email:<span style="color: #569cd6;">&lt;/strong&gt;</span> <span style="color: #569cd6;">&lt;a</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"mailto:johndoe@example.com"</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"email"</span><span style="color: #569cd6;">&gt;</span>johndoe@example.com<span style="color: #569cd6;">&lt;/a&gt;&lt;/p&gt;</span>
            <span style="color: #569cd6;">    &lt;p&gt;&lt;strong&gt;</span>Birth Date:<span style="color: #569cd6;">&lt;/strong&gt;</span> <span style="color: #569cd6;">&lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"birthDate"</span><span style="color: #569cd6;">&gt;</span>1990-05-15<span style="color: #569cd6;">&lt;/span&gt;&lt;/p&gt;</span>
            <span style="color: #569cd6;">    &lt;p&gt;&lt;strong&gt;</span>Nationality:<span style="color: #569cd6;">&lt;/strong&gt;</span> <span style="color: #569cd6;">&lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"nationality"</span><span style="color: #569cd6;">&gt;</span>American<span style="color: #569cd6;">&lt;/span&gt;&lt;/p&gt;</span>
            <span style="color: #569cd6;">&lt;/div&gt;</span>
        </div>
    </div>

    <!-- ====== SECTION 2: ORGANIZATION ====== -->
    <h2>2. Organization</h2>

    <div class="demo-container">
        <div class="microdata-example">
            <h3>Rendered Content:</h3>
            <div itemscope itemtype="https://schema.org/Organization">
                <p><strong>Organization:</strong> <span itemprop="name">TechCorp Inc.</span></p>
                <p><strong>URL:</strong> <a href="https://techcorp.com" itemprop="url">https://techcorp.com</a></p>
                <p><strong>Description:</strong> <span itemprop="description">A leading provider of innovative technology solutions.</span></p>
                <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                    <p><strong>Address:</strong></p>
                    <p itemprop="streetAddress">123 Tech Street</p>
                    <p itemprop="addressLocality">Silicon Valley</p>
                    <p itemprop="addressRegion">CA</p>
                    <p itemprop="postalCode">94043</p>
                </div>
                <p><strong>Phone:</strong> <span itemprop="telephone">(555) 123-4567</span></p>
            </div>
        </div>

        <div class="code-block">
            <span style="color: #569cd6;">&lt;div</span> <span style="color: #9cdcfe;">itemscope</span> <span style="color: #9cdcfe;">itemtype</span>=<span style="color: #ce9178;">"https://schema.org/Organization"</span><span style="color: #569cd6;">&gt;</span>
            <span style="color: #569cd6;">    &lt;div</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"address"</span> <span style="color: #9cdcfe;">itemscope</span> <span style="color: #9cdcfe;">itemtype</span>=<span style="color: #ce9178;">"https://schema.org/PostalAddress"</span><span style="color: #569cd6;">&gt;</span>
            <span style="color: #569cd6;">        &lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"streetAddress"</span><span style="color: #569cd6;">&gt;</span>123 Tech Street<span style="color: #569cd6;">&lt;/span&gt;</span>
            <span style="color: #569cd6;">        &lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"addressLocality"</span><span style="color: #569cd6;">&gt;</span>Silicon Valley<span style="color: #569cd6;">&lt;/span&gt;</span>
            <span style="color: #569cd6;">        &lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"addressRegion"</span><span style="color: #569cd6;">&gt;</span>CA<span style="color: #569cd6;">&lt;/span&gt;</span>
            <span style="color: #569cd6;">        &lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"postalCode"</span><span style="color: #569cd6;">&gt;</span>94043<span style="color: #569cd6;">&lt;/span&gt;</span>
            <span style="color: #569cd6;">    &lt;/div&gt;</span>
            <span style="color: #569cd6;">&lt;/div&gt;</span>
        </div>
    </div>

    <!-- ====== SECTION 3: ARTICLE ====== -->
    <h2>3. Article</h2>

    <div class="demo-container">
        <div class="microdata-example">
            <h3>Rendered Content:</h3>
            <div itemscope itemtype="https://schema.org/Article">
                <h2 itemprop="headline">The Future of Web Development</h2>
                <p><strong>Author:</strong> <span itemprop="author">John Doe</span></p>
                <p><strong>Published:</strong> <time itemprop="datePublished" datetime="2024-01-15">January 15, 2024</time></p>
                <p itemprop="description">An in-depth look at the emerging trends in web development.</p>
                <div itemprop="articleBody">
                    <p>Web development is evolving rapidly. New frameworks, tools, and methodologies are emerging every year...</p>
                </div>
                <p><strong>Keywords:</strong> <span itemprop="keywords">HTML, CSS, JavaScript, Web Development</span></p>
            </div>
        </div>

        <div class="code-block">
            <span style="color: #569cd6;">&lt;div</span> <span style="color: #9cdcfe;">itemscope</span> <span style="color: #9cdcfe;">itemtype</span>=<span style="color: #ce9178;">"https://schema.org/Article"</span><span style="color: #569cd6;">&gt;</span>
            <span style="color: #569cd6;">    &lt;h2</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"headline"</span><span style="color: #569cd6;">&gt;</span>The Future of Web Development<span style="color: #569cd6;">&lt;/h2&gt;</span>
            <span style="color: #569cd6;">    &lt;p&gt;&lt;strong&gt;</span>Author:<span style="color: #569cd6;">&lt;/strong&gt;</span> <span style="color: #569cd6;">&lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"author"</span><span style="color: #569cd6;">&gt;</span>John Doe<span style="color: #569cd6;">&lt;/span&gt;&lt;/p&gt;</span>
            <span style="color: #569cd6;">    &lt;time</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"datePublished"</span> <span style="color: #9cdcfe;">datetime</span>=<span style="color: #ce9178;">"2024-01-15"</span><span style="color: #569cd6;">&gt;</span>January 15, 2024<span style="color: #569cd6;">&lt;/time&gt;</span>
            <span style="color: #569cd6;">    &lt;div</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"articleBody"</span><span style="color: #569cd6;">&gt;</span>...<span style="color: #569cd6;">&lt;/div&gt;</span>
            <span style="color: #569cd6;">&lt;/div&gt;</span>
        </div>
    </div>

    <!-- ====== SECTION 4: PRODUCT ====== -->
    <h2>4. Product with Offer</h2>

    <div class="demo-container">
        <div class="microdata-example">
            <h3>Rendered Content:</h3>
            <div itemscope itemtype="https://schema.org/Product">
                <img src="https://via.placeholder.com/150x150/007bff/ffffff?text=Product" itemprop="image" alt="Product Image">
                <h2 itemprop="name">Wireless Bluetooth Headphones</h2>
                <p itemprop="description">Premium wireless headphones with noise cancellation and 20-hour battery life.</p>
                <p><strong>SKU:</strong> <span itemprop="sku">WH-1000X</span></p>
                <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
                    <p><strong>Price:</strong> <span itemprop="price">199.99</span> <span itemprop="priceCurrency">USD</span></p>
                    <p><strong>Availability:</strong> <link itemprop="availability" href="https://schema.org/InStock">In Stock</p>
                </div>
                <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
                    <p><strong>Rating:</strong> <span itemprop="ratingValue">4.5</span> / 5 (<span itemprop="reviewCount">127</span> reviews)</p>
                </div>
            </div>
        </div>

        <div class="code-block">
            <span style="color: #569cd6;">&lt;div</span> <span style="color: #9cdcfe;">itemscope</span> <span style="color: #9cdcfe;">itemtype</span>=<span style="color: #ce9178;">"https://schema.org/Product"</span><span style="color: #569cd6;">&gt;</span>
            <span style="color: #569cd6;">    &lt;div</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"offers"</span> <span style="color: #9cdcfe;">itemscope</span> <span style="color: #9cdcfe;">itemtype</span>=<span style="color: #ce9178;">"https://schema.org/Offer"</span><span style="color: #569cd6;">&gt;</span>
            <span style="color: #569cd6;">        &lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"price"</span><span style="color: #569cd6;">&gt;</span>199.99<span style="color: #569cd6;">&lt;/span&gt;</span>
            <span style="color: #569cd6;">        &lt;span</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"priceCurrency"</span><span style="color: #569cd6;">&gt;</span>USD<span style="color: #569cd6;">&lt;/span&gt;</span>
            <span style="color: #569cd6;">        &lt;link</span> <span style="color: #9cdcfe;">itemprop</span>=<span style="color: #ce9178;">"availability"</span> <span style="color: #9cdcfe;">href</span>=<span style="color: #ce9178;">"https://schema.org/InStock"</span><span style="color: #569cd6;">&gt;</span>
            <span style="color: #569cd6;">    &lt;/div&gt;</span>
            <span style="color: #569cd6;">&lt;/div&gt;</span>
        </div>
    </div>

    <!-- ====== SECTION 5: RECIPE ====== -->
    <h2>5. Recipe</h2>

    <div class="demo-container">
        <div class="microdata-example">
            <h3>Rendered Content:</h3>
            <div itemscope itemtype="https://schema.org/Recipe">
                <h2 itemprop="name">Classic Chocolate Chip Cookies</h2>
                <p><strong>Author:</strong> <span itemprop="author">Sarah Baker</span></p>
                <p><strong>Prep Time:</strong> <span itemprop="prepTime">PT15M</span> (15 minutes)</p>
                <p><strong>Cook Time:</strong> <span itemprop="cookTime">PT10M</span> (10 minutes)</p>
                <p><strong>Yield:</strong> <span itemprop="recipeYield">24 cookies</span></p>
                <p><strong>Ingredients:</strong></p>
                <ul>
                    <li itemprop="recipeIngredient">2 1/4 cups all-purpose flour</li>
                    <li itemprop="recipeIngredient">1 tsp baking soda</li>
                    <li itemprop="recipeIngredient">1 cup unsalted butter, softened</li>
                    <li itemprop="recipeIngredient">3/4 cup granulated sugar</li>
                    <li itemprop="recipeIngredient">2 cups chocolate chips</li>
                </ul>
                <p><strong>Instructions:</strong></p>
                <ol>
                    <li itemprop="recipeInstructions">Preheat oven to 375°F.</li>
                    <li itemprop="recipeInstructions">Mix flour and baking soda together.</li>
                    <li itemprop="recipeInstructions">Cream butter and sugars until smooth.</li>
                    <li itemprop="recipeInstructions">Add eggs and vanilla.</li>
                    <li itemprop="recipeInstructions">Gradually add dry ingredients.</li>
                    <li itemprop="recipeInstructions">Stir in chocolate chips.</li>
                    <li itemprop="recipeInstructions">Drop spoonfuls onto baking sheets.</li>
                    <li itemprop="recipeInstructions">Bake for 10-12 minutes.</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 6: EVENT ====== -->
    <h2>6. Event</h2>

    <div class="demo-container">
        <div class="microdata-example">
            <h3>Rendered Content:</h3>
            <div itemscope itemtype="https://schema.org/Event">
                <h2 itemprop="name">Tech Conference 2025</h2>
                <p><strong>Description:</strong> <span itemprop="description">The largest technology conference in the region.</span></p>
                <p><strong>Start Date:</strong> <time itemprop="startDate" datetime="2025-05-15T09:00">May 15, 2025 9:00 AM</time></p>
                <p><strong>End Date:</strong> <time itemprop="endDate" datetime="2025-05-17T18:00">May 17, 2025 6:00 PM</time></p>
                <div itemprop="location" itemscope itemtype="https://schema.org/Place">
                    <p><strong>Location:</strong> <span itemprop="name">Convention Center</span></p>
                    <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                        <p itemprop="streetAddress">123 Main Street</p>
                        <p itemprop="addressLocality">San Francisco</p>
                        <p itemprop="addressRegion">CA</p>
                        <p itemprop="postalCode">94105</p>
                    </div>
                </div>
                <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
                    <p><strong>Price:</strong> <span itemprop="price">299.00</span> <span itemprop="priceCurrency">USD</span></p>
                </div>
                <p><strong>Performer:</strong> <span itemprop="performer">Keynote Speakers</span></p>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 7: REVIEW ====== -->
    <h2>7. Review</h2>

    <div class="demo-container">
        <div class="microdata-example">
            <h3>Rendered Content:</h3>
            <div itemscope itemtype="https://schema.org/Review">
                <div itemprop="itemReviewed" itemscope itemtype="https://schema.org/Product">
                    <h3 itemprop="name">Wireless Bluetooth Headphones</h3>
                </div>
                <p><strong>Rating:</strong></p>
                <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating">
                    <span itemprop="ratingValue">4.5</span> / 5 stars
                </div>
                <p><strong>Review:</strong> <span itemprop="reviewBody">Excellent sound quality and comfortable to wear for long periods.</span></p>
                <p><strong>Author:</strong> <span itemprop="author">John Doe</span></p>
                <p><strong>Published:</strong> <time itemprop="datePublished" datetime="2024-02-10">February 10, 2024</time></p>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 8: REFERENCE TABLES ====== -->
    <h2>8. Quick Reference</h2>

    <h3>Microdata Attributes</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Purpose</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>itemscope</code></td>
                <td>Creates a new item</td>
                <td><code>itemscope</code></td>
            </tr>
            <tr>
                <td><code>itemtype</code></td>
                <td>Specifies the item type (schema.org URL)</td>
                <td><code>itemtype="https://schema.org/Person"</code></td>
            </tr>
            <tr>
                <td><code>itemprop</code></td>
                <td>Specifies a property of the item</td>
                <td><code>itemprop="name"</code></td>
            </tr>
        </tbody>
    </table>

    <h3>Common Schema.org Types</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Type</th>
                <th>Description</th>
                <th>Common Properties</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>Person</code></td>
                <td>A person</td>
                <td><code>name</code>, <code>jobTitle</code>, <code>email</code>, <code>address</code></td>
            </tr>
            <tr>
                <td><code>Organization</code></td>
                <td>An organization</td>
                <td><code>name</code>, <code>url</code>, <code>address</code>, <code>logo</code></td>
            </tr>
            <tr>
                <td><code>Article</code></td>
                <td>A news article</td>
                <td><code>headline</code>, <code>author</code>, <code>datePublished</code></td>
            </tr>
            <tr>
                <td><code>Product</code></td>
                <td>A product</td>
                <td><code>name</code>, <code>offers</code>, <code>aggregateRating</code></td>
            </tr>
            <tr>
                <td><code>Recipe</code></td>
                <td>A recipe</td>
                <td><code>name</code>, <code>recipeIngredient</code>, <code>recipeInstructions</code></td>
            </tr>
            <tr>
                <td><code>Event</code></td>
                <td>An event</td>
                <td><code>name</code>, <code>startDate</code>, <code>location</code>, <code>offers</code></td>
            </tr>
            <tr>
                <td><code>Place</code></td>
                <td>A place</td>
                <td><code>name</code>, <code>address</code>, <code>geo</code></td>
            </tr>
        </tbody>
    </table>

    <!-- ====== SECTION 9: BEST PRACTICES ====== -->
    <h2>9. Best Practices</h2>

    <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
        <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
        <ul>
            <li>Use <strong>schema.org</strong> vocabulary — the most widely supported</li>
            <li>Add structured data to <strong>all pages</strong> where applicable</li>
            <li>Use <strong>nested items</strong> for complex data (e.g., address inside a person)</li>
            <li>Use <strong>appropriate data types</strong> (e.g., <code>datetime</code> for dates)</li>
            <li>Test your structured data with <strong>Google's Rich Results Test</strong></li>
            <li>Keep your microdata <strong>up-to-date</strong> with page content</li>
        </ul>
    </div>

    <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
        <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
        <ul>
            <li>Don't use <strong>irrelevant</strong> schema types</li>
            <li>Don't add <strong>hidden</strong> or invisible structured data</li>
            <li>Don't use <strong>inconsistent</strong> data (e.g., mismatched prices)</li>
            <li>Don't forget to <strong>validate</strong> your microdata</li>
            <li>Don't use <strong>outdated</strong> schema.org versions</li>
        </ul>
    </div>

    <!-- ====== SECTION 10: OTHER FORMATS ====== -->
    <h2>10. Other Structured Data Formats</h2>

    <div class="grid-2">
        <div style="background: white; padding: 20px; border-radius: 8px; border: 2px solid #ddd;">
            <h3>📝 JSON-LD</h3>
            <p>JSON-LD (JavaScript Object Notation for Linked Data) is the <strong>recommended</strong> format by Google.</p>
            <div class="code-block" style="font-size: 0.8em;">
                <span style="color: #569cd6;">{</span>
                <span style="color: #569cd6;">  "@context":</span> <span style="color: #ce9178;">"https://schema.org"</span>,
                <span style="color: #569cd6;">  "@type":</span> <span style="color: #ce9178;">"Person"</span>,
                <span style="color: #569cd6;">  "name":</span> <span style="color: #ce9178;">"John Doe"</span>,
                <span style="color: #569cd6;">  "jobTitle":</span> <span style="color: #ce9178;">"Developer"</span>
                <span style="color: #569cd6;">}</span>
            </div>
        </div>

        <div style="background: white; padding: 20px; border-radius: 8px; border: 2px solid #ddd;">
            <h3>🧩 RDFa</h3>
            <p>RDFa (Resource Description Framework in Attributes) is another way to add structured data.</p>
            <div class="code-block" style="font-size: 0.8em;">
                <span style="color: #569cd6;">&lt;div</span> <span style="color: #9cdcfe;">vocab</span>=<span style="color: #ce9178;">"https://schema.org/"</span> <span style="color: #9cdcfe;">typeof</span>=<span style="color: #ce9178;">"Person"</span><span style="color: #569cd6;">&gt;</span>
                <span style="color: #569cd6;">  &lt;span</span> <span style="color: #9cdcfe;">property</span>=<span style="color: #ce9178;">"name"</span><span style="color: #569cd6;">&gt;</span>John Doe<span style="color: #569cd6;">&lt;/span&gt;</span>
                <span style="color: #569cd6;">&lt;/div&gt;</span>
            </div>
        </div>
    </div>

</body>
</html>

Quick Reference

AttributePurposeExample
itemscopeCreates a new itemitemscope
itemtypeSpecifies the item typeitemtype="https://schema.org/Person"
itempropSpecifies a propertyitemprop="name"

Common Schema.org Types

TypeDescriptionExample Properties
PersonA personname, jobTitle, email, address, birthDate
OrganizationAn organizationname, url, address, logo, telephone
ArticleA news articleheadline, author, datePublished, articleBody
ProductA productname, offers, aggregateRating, image
RecipeA recipename, recipeIngredient, recipeInstructions, cookTime
EventAn eventname, startDate, location, offers
ReviewA reviewreviewRating, reviewBody, author
PlaceA placename, address, geo

Best Practices Checklist

  • ✅ Use schema.org vocabulary
  • ✅ Add structured data to all relevant pages
  • ✅ Use nested items for complex data
  • ✅ Use appropriate data types (datetime, etc.)
  • ✅ Test with Google’s Rich Results Test
  • ✅ Keep data up-to-date with page content
  • ✅ Use JSON-LD for better compatibility (Google’s recommended format)

Pro Tip: Microdata is a powerful tool for improving your website’s SEO. Using schema.org vocabulary helps search engines display rich snippets — enhanced search results with images, ratings, prices, and more. Always validate your structured data and keep it consistent with your page content!


Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!