Difficulty: Advanced
Structured data is a standardized format for providing information about a page and classifying its content. By adding structured data to your HTML, you help search engines understand not just the text on the page but the meaning behind it - whether a number is a price, a rating, or a date; whether a page describes a recipe, a product, a job listing, or an event. This understanding enables search engines to display rich results (also called rich snippets) - enhanced search listings with ratings, prices, images, FAQs, and other interactive elements.
JSON-LD (JavaScript Object Notation for Linked Data) is the format recommended by Google for implementing structured data. It uses a <script type="application/ld+json"> tag in the document head (or body) containing a JSON object that describes the page content. Unlike Microdata or RDFa, JSON-LD does not interleave data with HTML markup, making it cleaner, easier to maintain, and simpler for dynamic sites to generate programmatically. The JSON-LD object references types and properties from schema.org, a shared vocabulary created by Google, Microsoft, Yahoo, and Yandex.
Schema.org defines hundreds of types - from generic ones like Thing, CreativeWork, and Organization to specific ones like Recipe, JobPosting, Event, Product, Course, and FAQPage. Each type has properties that describe it: a Product has name, description, price, and review; a Recipe has ingredients, cookTime, and nutrition. Types can be nested: a Product can contain an AggregateRating which contains ratingValue and reviewCount. The @context field points to schema.org, and @type identifies the schema type.
Breadcrumb structured data tells search engines about the page's position in the site hierarchy. Instead of showing a plain URL in search results, Google can display a breadcrumb trail like "Home > Blog > CSS > Grid Layout", which gives users a better understanding of the site structure. FAQ schema (FAQPage type) is particularly powerful - it can make your search result expand with collapsible question-and-answer pairs, dramatically increasing the visual real estate your listing occupies in search results.
Testing and validation are essential. Google's Rich Results Test (search.google.com/test/rich-results) checks whether your structured data is valid and eligible for enhanced display. The Schema Markup Validator (validator.schema.org) validates against the full schema.org vocabulary. Common mistakes include using incorrect types, missing required properties, or providing data that contradicts the visible page content - Google may penalize sites that use structured data deceptively.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Complete Guide to CSS Grid Layout",
"description": "Learn CSS Grid from fundamentals to advanced techniques with practical examples.",
"image": "https://example.com/images/css-grid-hero.jpg",
"author": {
"@type": "Person",
"name": "Jane Developer",
"url": "https://example.com/authors/jane"
},
"publisher": {
"@type": "Organization",
"name": "Dev Blog",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"datePublished": "2026-03-01",
"dateModified": "2026-03-10",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://example.com/blog/css-grid-guide"
}
}
</script>The Article schema tells Google this page is a news or blog article. Required properties include headline, image, author, publisher, and dates. The nested objects (Person, Organization, ImageObject) provide rich type information for each related entity.
<!-- Visible breadcrumb navigation -->
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/tutorials">Tutorials</a></li>
<li><a href="/tutorials/css">CSS</a></li>
<li aria-current="page">Grid Layout</li>
</ol>
</nav>
<!-- JSON-LD breadcrumb schema -->
<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": "Tutorials",
"item": "https://example.com/tutorials"
},
{
"@type": "ListItem",
"position": 3,
"name": "CSS",
"item": "https://example.com/tutorials/css"
},
{
"@type": "ListItem",
"position": 4,
"name": "Grid Layout"
}
]
}
</script>BreadcrumbList schema replaces the raw URL in search results with a readable breadcrumb path. Each ListItem has a position (1-based), name, and item URL. The last item (current page) omits the item URL since it is the page itself.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What is CSS Grid?",
"acceptedAnswer": {
"@type": "Answer",
"text": "CSS Grid is a two-dimensional layout system that allows you to create complex grid-based layouts using rows and columns. Unlike Flexbox which is one-dimensional, Grid handles both dimensions simultaneously, making it ideal for page-level layouts."
}
},
{
"@type": "Question",
"name": "What is the difference between CSS Grid and Flexbox?",
"acceptedAnswer": {
"@type": "Answer",
"text": "CSS Grid is designed for two-dimensional layouts (rows AND columns simultaneously), while Flexbox is designed for one-dimensional layouts (either a row OR a column). Use Grid for overall page layout and Flexbox for component-level alignment within those grid areas."
}
},
{
"@type": "Question",
"name": "Is CSS Grid supported in all browsers?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes, CSS Grid is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Global browser support exceeds 97%. The subgrid feature has more recent support, reaching full cross-browser availability in late 2023."
}
}
]
}
</script>FAQPage schema creates expandable Q&A pairs directly in search results, significantly increasing your listing's visual footprint. Each Question has a name (the question text) and an acceptedAnswer with the answer text. The FAQ content must be visible on the page.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Wireless Noise-Cancelling Headphones",
"image": [
"https://store.com/images/headphones-front.jpg",
"https://store.com/images/headphones-side.jpg"
],
"description": "Premium over-ear headphones with active noise cancellation and 30-hour battery.",
"brand": {
"@type": "Brand",
"name": "AudioPro"
},
"offers": {
"@type": "Offer",
"url": "https://store.com/products/headphones",
"priceCurrency": "USD",
"price": "249.99",
"availability": "https://schema.org/InStock",
"priceValidUntil": "2026-12-31"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"reviewCount": "1284"
},
"review": [
{
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "5",
"bestRating": "5"
},
"author": {
"@type": "Person",
"name": "Alex M."
},
"reviewBody": "Best noise cancellation I have ever experienced. Battery life is incredible."
}
]
}
</script>Product schema can display price, availability, and star ratings directly in Google search results. The aggregateRating shows the overall score, while individual reviews provide social proof. The offers object must include priceCurrency, price, and availability using schema.org URL values.
JSON-LD, schema.org, Breadcrumbs, FAQ Schema, Rich Results