Structured Data

JSON-LD, Schema.org, rich snippets, and SEO enhancement.

Overview

Structured data helps search engines understand your content.

Key Concepts

• JSON-LD — JavaScript notation for linked data
• Schema.org — Vocabulary for structured data
• Rich Snippets — Enhanced search results
• Knowledge Graph — Entity recognition
• Validation — Testing structured data

Code Examples

<!-- Article structured data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to Learn HTML",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "datePublished": "2024-01-15",
  "dateModified": "2024-01-20",
  "image": "https://example.com/article.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "Web Dev Academy",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

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

<!-- FAQ structured data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTML is the standard markup language for creating web pages."
      }
    },
    {
      "@type": "Question",
      "name": "What is CSS?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "CSS is used to style and layout web pages."
      }
    }
  ]
}
</script>

<!-- Breadcrumb structured data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog" },
    { "@type": "ListItem", "position": 3, "name": "Post" }
  ]
}
</script>

Practice

Add structured data to a blog post and validate it with Google's tool.