Structured Data & Schema

Structured data is machine-readable markup that describes your content's meaning — not just its appearance. When Google understands your content type, it can display rich results: FAQ accordions, star ratings, breadcrumbs, how-to steps, and article bylines directly in search results, dramatically increasing click-through rates.

JSON-LD — The Recommended Format

JSON-LD is injected as a <script> tag in your HTML and is separate from the visible content. Google strongly prefers it over the older Microdata and RDFa inline attribute approaches.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Complete Guide to TypeScript Generics",
  "description": "Learn to write type-safe, reusable code with TypeScript generics.",
  "datePublished": "2026-01-15",
  "dateModified": "2026-04-01",
  "author": {
    "@type": "Person",
    "name": "Jane Doe",
    "url": "https://example.com/authors/jane"
  },
  "publisher": {
    "@type": "Organization",
    "name": "TechLead",
    "logo": { "@type": "ImageObject", "url": "https://example.com/logo.png" }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/learn-typescript/generics"
  }
}
</script>

FAQ Schema — Rich Results

FAQ schema renders expandable question/answer accordions directly in Google search results. Each question and answer must be visible on the page — you cannot fake it with hidden content.

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is a TypeScript generic?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A generic is a type parameter that lets you write reusable functions and classes that work with multiple types while preserving type safety."
      }
    },
    {
      "@type": "Question",
      "name": "When should I use generics?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Use generics when you have logic that should work identically for multiple types — data fetching, collections, utility functions — without using 'any'."
      }
    }
  ]
}

BreadcrumbList Schema

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home",       "item": "https://example.com" },
    { "@type": "ListItem", "position": 2, "name": "TypeScript", "item": "https://example.com/learn-typescript" },
    { "@type": "ListItem", "position": 3, "name": "Generics",   "item": "https://example.com/learn-typescript/generics" }
  ]
}

Multiple Types with @graph

Use a @graph array to include multiple schema types on one page without repeating @context.

{
  "@context": "https://schema.org",
  "@graph": [
    { "@type": "Article", "headline": "..." },
    { "@type": "BreadcrumbList", "itemListElement": [...] },
    { "@type": "FAQPage", "mainEntity": [...] }
  ]
}

Other Useful Schema Types

• HowTo — step-by-step tutorial with images; appears as rich result with steps
• Product with AggregateRating — star ratings in search results
• Event — date, location, ticket info in search results
• LocalBusiness — address, hours, phone for local search
• JobPosting — appears in Google for Jobs
• Course and LearningResource — for educational content

Testing and Validation

• Google Rich Results Test (search.google.com/test/rich-results) — validates JSON-LD and shows eligible rich results
• Schema Markup Validator (validator.schema.org) — validates against schema.org spec
• Google Search Console → Enhancements — shows errors and impressions from deployed structured data