HtmlConceptBeginner · 4 min read

What is Schema Markup in HTML: Simple Explanation and Example

Schema markup in HTML is a special code added to web pages using structured data that helps search engines understand the content better. It uses a vocabulary called Schema.org to label information like events, products, or reviews so search results can show rich details.

⚙️

How It Works

Think of schema markup as adding labels or tags to parts of your webpage that explain what those parts mean. Just like putting labels on boxes in a storage room helps you find things faster, schema markup helps search engines like Google understand your page content clearly.

This is done by adding special code inside your HTML that follows a shared language called Schema.org. This language tells search engines if a piece of text is a person's name, a product price, a review rating, or an event date. With this extra information, search engines can show richer results, like star ratings or event times, making your page more attractive in search listings.

💻

Example

This example shows how to add schema markup for a simple product using JSON-LD format, which is the recommended way by Google.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Page</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Coffee Mug",
    "image": "https://example.com/photos/coffeemug.jpg",
    "description": "A ceramic coffee mug",
    "sku": "12345",
    "offers": {
      "@type": "Offer",
      "priceCurrency": "USD",
      "price": "12.99",
      "availability": "https://schema.org/InStock"
    }
  }
  </script>
</head>
<body>
  <h1>Coffee Mug</h1>
  <p>A ceramic coffee mug perfect for your morning coffee.</p>
  <p>Price: $12.99</p>
</body>
</html>

Output

A webpage titled 'Product Page' showing a heading 'Coffee Mug', a description 'A ceramic coffee mug perfect for your morning coffee.', and the price '$12.99'. The page includes hidden schema markup describing the product for search engines.

🎯

When to Use

Use schema markup whenever you want search engines to better understand your page content and show enhanced results. It is especially useful for:

Online stores to highlight products, prices, and availability.
Event pages to show dates, locations, and ticket info.
Recipe sites to display cooking time, ingredients, and ratings.
Review sites to show star ratings and reviewer details.

Adding schema markup can improve your website’s visibility and click-through rates by making your listings stand out in search results.

✅

Key Points

Schema markup uses structured data to label content clearly.
It helps search engines show rich snippets like ratings and prices.
JSON-LD is the preferred format to add schema markup in HTML.
It improves search result appearance and can increase traffic.

✅

Key Takeaways

Schema markup helps search engines understand your webpage content better.

Use JSON-LD format to add schema markup inside your HTML section.

It is useful for products, events, recipes, reviews, and more to get rich search results.

Adding schema markup can make your site listings more attractive and increase clicks.