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. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “JSON-LD Structured Data Basics” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “JSON-LD Structured Data Basics”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
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