âš¡IntermediateStructured Data and SEO
JSON-LD Structured Data
Add schema.org JSON-LD to enable rich results in Google Search (stars, FAQs, events, breadcrumbs).
Overview
Structured data is machine-readable markup that tells search engines exactly what your content represents. JSON-LD (JavaScript Object Notation for Linked Data) is Google's recommended format it's a <script> block in your HTML <head> or <body> containing a JSON object with schema.org vocabulary.
With structured data, Google can generate rich results (enhanced search snippets): star ratings for products, FAQ dropdowns, event dates, recipe info, breadcrumbs, job postings, and more.
The schema.org vocabulary defines hundreds of types (Article, Product, Recipe, Event, FAQPage, BreadcrumbList, LocalBusiness, etc.) and their properties.
Key Points
- •JSON-LD goes in a <script type="application/ld+json"> tag in <head> or <body>
- •@context is always "https://schema.org"
- •@type specifies the schema type: Article, Product, FAQPage, BreadcrumbList, etc.
- •Multiple JSON-LD blocks can appear on one page
- •Google's Rich Results Test validates your markup at search.google.com/test/rich-results
- •Structured data describes content it must match what's actually on the page
Examples
Article structured data
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "A Complete Guide to HTML5",
"description": "Learn HTML5 from scratch with examples and exercises.",
"image": "https://example.com/images/html-guide.jpg",
"author": {
"@type": "Person",
"name": "Jane Smith",
"url": "https://example.com/author/jane"
},
"publisher": {
"@type": "Organization",
"name": "DevMastery",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2024-06-01",
"dateModified": "2024-06-10"
}
</script>FAQPage for accordion/FAQ sections
<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."
}
},
{
"@type": "Question",
"name": "Is HTML a programming language?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No, HTML is a markup language. It structures content but has no logic or variables."
}
}
]
}
</script>FAQPage structured data can show expandable Q&A directly in Google search results.
Product with ratings
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Pro Wireless Headphones",
"image": "https://shop.example.com/headphones.jpg",
"description": "30-hour battery, noise-cancelling, USB-C charging.",
"brand": { "@type": "Brand", "name": "AudioMax" },
"sku": "HDP-2024",
"offers": {
"@type": "Offer",
"price": "129.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"reviewCount": "832"
}
}
</script>Common Mistakes
- Markup that doesn't match visible page content Google will penalize deceptive structured data
- Missing required properties for a type check Google's developer docs for required vs recommended properties
- Forgetting to test with Rich Results Test before deploying
Note
Start with FAQPage markup it's one of the easiest to implement and one of the highest-impact for click-through rates. Add Q&A structured data to any page that already has FAQ content.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4