Complete HTML Course Module 11: Advanced: SEO and Metadata

Structured Data with JSON-LD and Schema.org

  • Beginner
  • Lesson 11.3
  • 5 min read
  • 50 of 69 in the course

In short

Structured data is extra code that tells search engines exactly what your page contains, like a recipe, an article or a business. In this lesson you will learn to add JSON-LD structured data with Schema.org and test it. What are rich results?

Structured data is extra code that tells search engines exactly what your page contains, like a recipe, an article or a business. In this lesson you will learn to add JSON-LD structured data with Schema.org and test it.

What are rich results?

Normal Google results show a title, a URL and a description. Rich results show extra things: star ratings, cooking times, prices, event dates or a path of breadcrumbs. They stand out and can get more clicks.

Google can show rich results when your page includes structured data. Structured data is information written in a fixed format that computers understand perfectly. Your page might say "Ready in 45 minutes" in a sentence, and a human understands it. Structured data says "totalTime": "PT45M", and a machine understands it.

The words and types come from Schema.org, a shared vocabulary created by Google, Microsoft, Yahoo and Yandex. It defines types like Article, Product, Recipe, Event, Organization and many more, each with its own properties.

How to add JSON-LD to a page

There are a few ways to write structured data, but Google recommends JSON-LD. JSON is a simple data format of names and values in curly braces. LD means "Linked Data". You put it inside a <script> element with type="application/ld+json". The browser does not run it or show it. Only search engines and other tools read it.

Here is an Article example for a blog post:

<head>
  <title>How to Start a Vegetable Garden on a Balcony | Leafy Home</title>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "How to Start a Vegetable Garden on a Balcony",
    "image": ["https://leafyhome.example/images/balcony-garden.jpg"],
    "datePublished": "2026-03-14T09:00:00+01:00",
    "dateModified": "2026-05-02T16:30:00+01:00",
    "author": {
      "@type": "Person",
      "name": "Maria Lopez",
      "url": "https://leafyhome.example/authors/maria-lopez"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Leafy Home",
      "logo": {
        "@type": "ImageObject",
        "url": "https://leafyhome.example/images/logo.png"
      }
    }
  }
  </script>
</head>

Nothing changes on the visible page. But Google now knows the exact headline, image, author and dates. @context says "these words come from Schema.org", and @type says what kind of thing this is. Dates use the ISO format: year-month-day, then the time and time zone.

Common mistake: JSON is strict. Every name and text value needs "double quotes", items are separated by commas, and there must be no comma after the last item. One missing comma breaks the whole block.

You can add more than one JSON-LD block to a page. A BreadcrumbList describes where the page sits in your site, like "Home > Blog > Gardening". An Organization block, usually on the home page, tells Google your official name, logo and social profiles.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://leafyhome.example/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://leafyhome.example/blog" },
    { "@type": "ListItem", "position": 3, "name": "Gardening", "item": "https://leafyhome.example/blog/gardening" }
  ]
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Leafy Home",
  "url": "https://leafyhome.example",
  "logo": "https://leafyhome.example/images/logo.png",
  "sameAs": [
    "https://www.instagram.com/leafyhome",
    "https://www.youtube.com/@leafyhome"
  ]
}
</script>

The breadcrumb list numbers each step with position. The sameAs list connects your website to your official social media accounts, which helps Google (and AI search tools) recognise your brand.

FAQPage structured data

An FAQPage block describes questions and answers on the page:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How much sun do balcony tomatoes need?",
      "acceptedAnswer": { "@type": "Answer", "text": "At least six hours of direct sun per day." }
    },
    {
      "@type": "Question",
      "name": "Can I grow vegetables in winter?",
      "acceptedAnswer": { "@type": "Answer", "text": "Yes. Lettuce, spinach and kale handle cold weather well." }
    }
  ]
}
</script>

Note: Since 2023 Google only shows FAQ rich results for a small group of well-known government and health websites. FAQPage markup is still valid and other search engines and AI tools can read it, but don't expect FAQ boxes in Google for a normal site.

The most important rule: structured data must match the visible content. If your JSON-LD says "4.9 stars" but the page shows no reviews, Google may ignore your markup or even penalise the site.

How to test structured data

  1. Open Google's Rich Results Test (search for it by name), paste your URL or code, and click "Test". It shows which rich results your page can get and lists errors and warnings.
  2. Use the Schema Markup Validator at validator.schema.org to check any Schema.org type, even ones Google does not use.
  3. After your site is live, the "Enhancements" reports in Google Search Console show problems across all pages.

Tip: Valid structured data does not guarantee a rich result. Google decides what to show. Think of it as making the page easy to understand, not as a magic switch.

Practice exercise

Write a JSON-LD block of type Recipe for a pancake recipe. Include name, image, author, prepTime (use "PT10M" for 10 minutes), recipeIngredient as a list, and recipeInstructions. Paste it into the Rich Results Test using the "Code" option.

Hint: Look at the Recipe page on schema.org to see every property and an example.

Key takeaways

  • Structured data describes your content in a format machines understand.
  • Use JSON-LD inside <script type="application/ld+json"> with Schema.org types.
  • Common types are Article, BreadcrumbList, Organization, Product and Recipe.
  • Structured data must always match what users can see on the page.
  • Test with Google's Rich Results Test and the Schema Markup Validator.