JSON-LD Structured Data Basics
Add machine-readable structured data with JSON-LD.
JSON-LD Structured Data Basics is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is Structured Data?
Structured data is machine-readable JSON describing what the page is about — an article, a recipe, a product, an event. Search engines use it to render rich results (star ratings, recipe cards, breadcrumbs) instead of plain blue links.
JSON-LD is the Recommended Format
Google's preferred format is JSON-LD: a single <script type="application/ld+json"> block in the head or body containing one or more schema.org objects. It is decoupled from the visible HTML, so adding or updating it requires no template rewrite.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Learn HTML",
"author": { "@type": "Person", "name": "Ada Lovelace" },
"datePublished": "2024-05-01"
}
</script>@context and @type
Every JSON-LD object needs @context (almost always "https://schema.org") and @type (the schema.org class: Article, Recipe, Product, FAQPage). @context tells parsers which vocabulary the property names come from.
Common Article Properties
For Article, supply headline, image (URL or array), datePublished, dateModified, author (a Person or Organization object) and publisher (Organization with logo). These are the minimum fields needed for Google's top-stories carousel to consider the page.
Product Schema
Product pages declare @type Product with name, image, description, brand, sku, and an offers sub-object containing price, priceCurrency and availability. Combined with aggregateRating, Google can render star ratings and price snippets directly in the search result.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Coddy Plus",
"offers": { "@type": "Offer", "price": "29.00", "priceCurrency": "USD" }
}Breadcrumb Schema
BreadcrumbList describes the navigation hierarchy. Each itemListElement is a ListItem with position, name and item (the URL). When present, Google replaces the URL line in the snippet with the labeled breadcrumb trail, which earns more clicks.
FAQ and HowTo
FAQPage and HowTo schemas previously unlocked rich result widgets in the SERP. Google has since restricted FAQ rich results to a few site categories (gov, edu), but the markup is still valuable for voice assistants and other consumers — keep it on real FAQ pages.
Match the Visible Page
Google penalizes markup that does not match what users see. Do not declare a 5-star rating that does not appear on the page; do not list a $9.99 price the user never sees. Structured data must accurately describe the rendered content.
Validating with Rich Results Test
Google's Rich Results Test (search.google.com/test/rich-results) parses any URL or pasted code, lists detected schema types, and warns about missing required properties. Run it before deploying any change to structured data.
Multiple Schemas Per Page
You can declare several JSON-LD blocks on the same page (Article + BreadcrumbList + Organization, for example) or combine them in a single @graph array. Both forms are valid; pick whichever is easier to template in your build pipeline.
Updating Without Re-rendering
JSON-LD lives in a script tag separate from visible content. To update it, regenerate the JSON block — never inject structured data via client-side JavaScript only, because Googlebot does not always execute JS reliably before indexing.
Knowledge Check
Which two top-level properties must every JSON-LD object include to be valid structured data?
Summary
JSON-LD declares structured data in a single application/ld+json script block, with @context and @type identifying every object. Common schemas (Article, Product, BreadcrumbList) unlock rich search results when the markup accurately reflects the visible page. Validate with the Rich Results Test before deploy.
Frequently asked questions
Is the “JSON-LD Structured Data Basics” lesson free?
Yes — the full text of “JSON-LD Structured Data Basics” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “JSON-LD Structured Data Basics”?
Add machine-readable structured data with JSON-LD. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “JSON-LD Structured Data Basics” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- OpenGraph og:title og:description og:image
- Twitter Card Meta Tags
- JSON-LD Structured Data Basics
- Hreflang for International Pages