· SEO

Microdata and Structured Data in HTML

Help search engines understand your content with structured data.

Structured data helps search engines understand what your content means, not just what it says. By adding schema markup to your HTML, you can provide explicit clues about your content—whether it’s a recipe, product, event, or article. This can lead to rich snippets in search results, better visibility, and improved click-through rates. In this guide, you’ll learn how to implement structured data using microdata, JSON-LD, and Schema.org vocabulary.

Structured data is like adding labels to your content that search engines can read and understand.

Why Structured Data Matters

Benefits

  • Rich snippets - Enhanced search results with ratings, prices, images
  • Better visibility - Stand out in search results
  • Voice search - Help assistants understand your content
  • Knowledge graphs - Appear in Google’s knowledge panels
  • Click-through rates - Rich results get more clicks

What You Can Mark Up

  • Articles and blog posts
  • Products and offers
  • Recipes and cooking times
  • Events and tickets
  • Local businesses
  • People and organizations
  • Reviews and ratings
  • Videos and images
  • FAQs and how-tos

Three Ways to Add Structured Data

JSON-LD is the easiest and most flexible approach:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chocolate Chip Cookies Recipe</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Recipe",
    "name": "Chocolate Chip Cookies",
    "author": {
      "@type": "Person",
      "name": "Jane Smith"
    },
    "datePublished": "2024-01-15",
    "description": "Classic chocolate chip cookies that are crispy on the outside and soft inside",
    "prepTime": "PT15M",
    "cookTime": "PT10M",
    "totalTime": "PT25M",
    "recipeYield": "24 cookies",
    "recipeIngredient": [
      "2 1/4 cups all-purpose flour",
      "1 cup butter",
      "3/4 cup sugar",
      "2 eggs",
      "2 cups chocolate chips"
    ],
    "recipeInstructions": [
      {
        "@type": "HowToStep",
        "text": "Preheat oven to 375°F"
      },
      {
        "@type": "HowToStep",
        "text": "Mix butter and sugar until fluffy"
      },
      {
        "@type": "HowToStep",
        "text": "Add eggs and vanilla"
      },
      {
        "@type": "HowToStep",
        "text": "Stir in flour and chocolate chips"
      },
      {
        "@type": "HowToStep",
        "text": "Bake for 9-11 minutes"
      }
    ],
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.8",
      "ratingCount": "234"
    }
  }
  </script>
</head>
<body>
  <h1>Chocolate Chip Cookies</h1>
  <p>Classic recipe that everyone loves...</p>
</body>
</html>

Why JSON-LD is best:

  • Keeps markup separate from content
  • Easier to maintain
  • Can be dynamically generated
  • Google’s preferred format

2. Microdata (HTML Attributes)

Microdata adds attributes directly to HTML elements:

<article itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">How to Build a Website</h1>
  
  <div itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">Jane Smith</span>
  </div>
  
  <time itemprop="datePublished" datetime="2024-01-15">
    January 15, 2024
  </time>
  
  <div itemprop="articleBody">
    <p>Article content goes here...</p>
  </div>
</article>

3. RDFa (Less Common)

RDFa uses different attributes:

<article vocab="https://schema.org/" typeof="Article">
  <h1 property="headline">Article Title</h1>
  <span property="author" typeof="Person">
    <span property="name">Jane Smith</span>
  </span>
  <div property="articleBody">
    Content here...
  </div>
</article>

Common Schema Types

Article

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "10 Tips for Better HTML",
  "image": "https://example.com/article-image.jpg",
  "author": {
    "@type": "Person",
    "name": "Jane Smith"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Tech Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20"
}
</script>

Product

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Wireless Headphones",
  "image": "https://example.com/headphones.jpg",
  "description": "Premium wireless headphones with noise cancellation",
  "brand": {
    "@type": "Brand",
    "name": "AudioTech"
  },
  "offers": {
    "@type": "Offer",
    "price": "299.99",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "url": "https://example.com/product/headphones"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "127"
  }
}
</script>

Local Business

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Restaurant",
  "name": "The Tasty Bistro",
  "image": "https://example.com/restaurant.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main Street",
    "addressLocality": "San Francisco",
    "addressRegion": "CA",
    "postalCode": "94102",
    "addressCountry": "US"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "37.7749",
    "longitude": "-122.4194"
  },
  "telephone": "+1-415-555-0123",
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "11:00",
      "closes": "22:00"
    },
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Saturday", "Sunday"],
      "opens": "10:00",
      "closes": "23:00"
    }
  ],
  "servesCuisine": "Italian",
  "priceRange": "$$"
}
</script>

Event

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Web Development Conference 2024",
  "startDate": "2024-06-15T09:00",
  "endDate": "2024-06-17T17:00",
  "eventStatus": "https://schema.org/EventScheduled",
  "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
  "location": {
    "@type": "Place",
    "name": "Convention Center",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "456 Conference Blvd",
      "addressLocality": "San Francisco",
      "addressRegion": "CA",
      "postalCode": "94103",
      "addressCountry": "US"
    }
  },
  "image": "https://example.com/event-banner.jpg",
  "description": "Three days of talks and workshops on modern web development",
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/tickets",
    "price": "299",
    "priceCurrency": "USD",
    "availability": "https://schema.org/InStock",
    "validFrom": "2024-01-01"
  },
  "performer": {
    "@type": "Person",
    "name": "Jane Smith"
  },
  "organizer": {
    "@type": "Organization",
    "name": "WebDev Events",
    "url": "https://example.com"
  }
}
</script>

FAQ

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of web content using a system of tags and elements."
      }
    },
    {
      "@type": "Question",
      "name": "Do I need to know CSS to use HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "No, HTML works independently of CSS. However, CSS is used to style HTML content, so learning both together provides the best results."
      }
    }
  ]
}
</script>

Testing Your Structured Data

Google Rich Results Test

  1. Go to https://search.google.com/test/rich-results
  2. Enter your URL or paste HTML
  3. Review results and fix errors

Schema Markup Validator

  1. Visit https://validator.schema.org/
  2. Paste your markup
  3. Check for warnings and errors

Google Search Console

Monitor structured data performance:

  • View which pages have valid markup
  • See errors and warnings
  • Track rich result impressions and clicks

Common Mistakes

❌ Missing required properties - Each type has required fields ❌ Wrong data types - Prices must be numbers, dates must be ISO format ❌ Duplicate markup - Don’t mark up the same content twice ❌ Invisible content - Don’t add markup for content not on the page ❌ Wrong schema type - Use the most specific type available ❌ Invalid JSON - Check for syntax errors ❌ Outdated schemas - Use current Schema.org vocabulary

Best Practices

✅ Use JSON-LD - Easiest to maintain ✅ Follow Schema.org - Use official vocabulary ✅ Include all required properties - Check documentation ✅ Test before deploying - Use validation tools ✅ Be accurate - Markup must match visible content ✅ Use specific types - More specific is better ✅ Update regularly - Keep data current ✅ Monitor performance - Check Search Console

Real-World Examples

Blog Post with Author and Publisher

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Getting Started with HTML",
  "image": "https://example.com/html-guide.jpg",
  "author": {
    "@type": "Person",
    "name": "Jane Smith",
    "url": "https://example.com/author/jane-smith"
  },
  "publisher": {
    "@type": "Organization",
    "name": "WebDev Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png",
      "width": 600,
      "height": 60
    }
  },
  "datePublished": "2024-01-15T08:00:00Z",
  "dateModified": "2024-01-20T09:30:00Z",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/html-guide"
  }
}
</script>

Product with Reviews

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Premium Laptop",
  "image": "https://example.com/laptop.jpg",
  "description": "High-performance laptop for professionals",
  "sku": "LAP-001",
  "brand": {
    "@type": "Brand",
    "name": "TechBrand"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/laptop",
    "priceCurrency": "USD",
    "price": "1299.99",
    "priceValidUntil": "2024-12-31",
    "availability": "https://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Tech Store"
    }
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.7",
    "reviewCount": "89"
  },
  "review": [
    {
      "@type": "Review",
      "author": {
        "@type": "Person",
        "name": "John Doe"
      },
      "datePublished": "2024-01-10",
      "reviewBody": "Excellent laptop! Fast and reliable.",
      "reviewRating": {
        "@type": "Rating",
        "ratingValue": "5",
        "bestRating": "5"
      }
    }
  ]
}
</script>

Keep Learning

Try adding structured data in the htmlEditor.net playground today!

Structured data helps search engines understand your content and can significantly improve your visibility in search results. Start with JSON-LD, test thoroughly, and watch your rich snippets appear!

← Back to all blog posts

    Share: