InBuild
GuidesMay 15, 202612 min read

JSON-LD Examples: The 12 Schema Types You Actually Need in 2026

Copy-paste JSON-LD snippets for Article, Product, FAQ, HowTo, Breadcrumb, Organization, LocalBusiness, Event, Recipe, Review, Video, and Software — with real working examples and pitfalls to avoid.

The short answer: JSON-LD is a JSON block you drop into your page's HTML that tells Google what the page is about. It unlocks rich results — FAQ accordions, star ratings, breadcrumbs, How-To steps — that have 30-50% higher CTR than plain blue links. Below are the 12 schema types that cover 95% of what you'll ever need, with code you can copy directly.

Why JSON-LD specifically

Google supports three structured-data formats: JSON-LD, Microdata, and RDFa. Of the three, only JSON-LD lets you keep your structured data separate from your visual markup. You can redesign your page entirely without touching the schema. That decoupling is why Google explicitly recommends it and why every major framework (Next.js, Astro, SvelteKit) ships first-class support.

Practical impact: every page on this site emits JSON-LD via a <script type="application/ld+json"> tag rendered server-side. That's how you get FAQ rich results, breadcrumb trails in search, and the "article preview" card on social shares — without writing a single line of microdata.

The 12 schema types you actually need

1. Article (blog posts, news, editorial)

Use on every blog post and news article. Unlocks the "rich article" card with author, date, and image. Mandatory fields: headline, author,datePublished, image.

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "JSON-LD Examples: The 12 Schema Types You Need",
  "image": "https://www.inbuild.io/og-image.png",
  "author": { "@type": "Organization", "name": "InBuild" },
  "publisher": {
    "@type": "Organization",
    "name": "InBuild",
    "logo": { "@type": "ImageObject", "url": "https://www.inbuild.io/logo.png" }
  },
  "datePublished": "2026-05-15",
  "dateModified": "2026-05-15"
}

2. Product (e-commerce, SaaS)

Unlocks star ratings, price, and stock status in search. Mandatory: name,image, offers. The aggregateRating block is what triggers the star widget — only include it if the ratings are real.

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "InBuild Pro",
  "image": ["https://www.inbuild.io/product.png"],
  "description": "AI website builder with code export.",
  "brand": { "@type": "Brand", "name": "InBuild" },
  "offers": {
    "@type": "Offer",
    "url": "https://www.inbuild.io/pricing",
    "priceCurrency": "USD",
    "price": "49.00",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "1247"
  }
}

3. FAQPage (the single biggest CTR boost)

FAQs render as expandable dropdowns directly in search results. They're the highest-ROI schema type — easy to author, huge visual real estate. The exact FAQPagestructure:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is JSON-LD?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JSON-LD is Google's preferred structured-data format..."
      }
    },
    {
      "@type": "Question",
      "name": "Where do I put it in my HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Inside a <script type=\"application/ld+json\"> tag, anywhere in <head> or <body>."
      }
    }
  ]
}

Gotcha: Google requires the FAQ content to also appear visibly on the page — don't add FAQ schema for questions you don't answer on the page itself. Mismatch triggers manual penalty.

4. HowTo (tutorial pages)

Renders as numbered steps in search. Required: name, step array with HowToStep items. Add image per step for richer display.

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to deploy Next.js to Vercel",
  "step": [
    {
      "@type": "HowToStep",
      "name": "Push your repo to GitHub",
      "text": "Run git init, git add, git commit, then push to a new GitHub repository."
    },
    {
      "@type": "HowToStep",
      "name": "Import the repo into Vercel",
      "text": "Go to vercel.com/new and select your GitHub repository."
    }
  ]
}

Replaces the ugly URL in Google's result with a clickable trail (Home › Blog › Post Title). Every page deeper than your homepage should emit this.

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.inbuild.io/" },
    { "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://www.inbuild.io/blog" },
    { "@type": "ListItem", "position": 3, "name": "JSON-LD Examples" }
  ]
}

6. Organization (your homepage)

Feeds Google's Knowledge Panel. One per site, on the homepage only. Critical fields: name, url, logo, sameAs (social profiles).

{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "InBuild",
  "url": "https://www.inbuild.io",
  "logo": "https://www.inbuild.io/logo.png",
  "sameAs": [
    "https://x.com/inbuild",
    "https://github.com/inbuild"
  ]
}

7. LocalBusiness (physical locations)

For brick-and-mortar — restaurants, gyms, doctors. Unlocks the Google Maps card with hours, phone, and reviews. Required: name, address,telephone, openingHoursSpecification.

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Joe's Coffee",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "Portland",
    "addressRegion": "OR",
    "postalCode": "97201"
  },
  "telephone": "+1-503-555-0100",
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "07:00", "closes": "19:00"
    }
  ]
}

8. Event (concerts, conferences, webinars)

{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "InBuild 2026 Launch",
  "startDate": "2026-09-12T18:00",
  "location": { "@type": "VirtualLocation", "url": "https://www.inbuild.io/launch" },
  "eventStatus": "https://schema.org/EventScheduled",
  "eventAttendanceMode": "https://schema.org/OnlineEventAttendanceMode"
}

9. Recipe

High-traffic vertical. Unlocks the rich recipe card with cook time, calories, and ratings. Mandatory: name, image, recipeIngredient,recipeInstructions.

10. Review (a single review of something)

Different from aggregateRating inside Product. Review is an entire page that's about reviewing one thing. Required: itemReviewed, reviewRating,author.

11. VideoObject

Required for video-hosted pages to appear in Google's video carousel. Fields: name, description, thumbnailUrl,uploadDate, contentUrl.

12. SoftwareApplication (apps, tools, SaaS)

Use on every product page, free tool, or downloadable app. Unlocks the price/rating card. See our free slug generator for a live example.

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "InBuild",
  "applicationCategory": "DesignApplication",
  "operatingSystem": "Web",
  "offers": { "@type": "Offer", "price": "49.00", "priceCurrency": "USD" }
}

Implementing JSON-LD in Next.js

In Next.js 16 (App Router), drop a <script> tag with dangerouslySetInnerHTML directly in your route component. It renders server-side and never hydrates — exactly what crawlers see.

export default function Page() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Hello world",
    // ... rest of your schema
  }
  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>Your content here</h1>
    </>
  )
}

For a deeper walkthrough see our structured data guide and the JSON-LD glossary entry.

Five common mistakes to avoid

  1. Schema for content that isn't on the page. FAQ schema must match visible Q&A pairs. Product schema must match a real product page. Mismatches trigger manual penalties.
  2. Fake reviews. aggregateRating with invented review counts is the fastest way to lose all rich results. Use real data.
  3. Missing required fields. Each schema type has required properties. The Rich Results Test will flag missing ones — run it before shipping.
  4. Wrong @type capitalization. FAQPage not FaqPage.BreadcrumbList not breadcrumb_list. Case-sensitive.
  5. HTML-encoded JSON. If your CMS double-escapes quotes you'll ship broken JSON. Always view-source on production and paste into a JSON validator.

How InBuild handles structured data for you

Every page InBuild generates ships with appropriate JSON-LD — Article schema for blog posts, Product schema for pricing pages, FAQPage for any section labeled "FAQ", BreadcrumbList on every nested route. You don't configure anything; the AI detects your page's purpose and emits the right schema. Inspect any generated page's view source to see it.

Pair that with our free JSON-LD generator to handcraft custom schemas, or read the glossary entry for a one-page definition.

Frequently asked questions

What is JSON-LD?

JSON-LD (JavaScript Object Notation for Linked Data) is Google's preferred format for structured data — a JSON block you embed in your HTML to tell search engines what your page is about. It enables rich results like FAQ dropdowns, star ratings, breadcrumb trails, and How-To steps in Google search.

Where do I put JSON-LD in my HTML?

Inside a <script type="application/ld+json"> tag, anywhere in <head> or <body>. Google recommends <head> for the primary schema, but any location works. In Next.js, render it as part of your component tree using dangerouslySetInnerHTML.

How do I test my JSON-LD?

Use Google's Rich Results Test at search.google.com/test/rich-results. Paste your URL or raw HTML — it'll tell you which schema types Google detected and whether they're eligible for rich results.

What's the difference between JSON-LD and Microdata?

Microdata embeds metadata inline in HTML attributes (itemprop, itemtype). JSON-LD is a single JSON block that doesn't mix with your markup. Google prefers JSON-LD because it's easier to maintain — you can change the visual layout without touching the structured data.

Will JSON-LD slow my site down?

No. A typical JSON-LD block is 500-2000 bytes — smaller than a single hero image. It doesn't trigger any rendering work in the browser. Search-engine bots parse it server-side.

Can I use multiple JSON-LD blocks on one page?

Yes. Put each in its own <script> tag, or combine them in one block as an array. Combining is cleaner; separate scripts are easier to debug if one breaks.

Ready to build?

Turn your next idea into a production-ready app in minutes.

Keep reading

Guides

Vercel Environment Variables for Next.js: Complete Guide (2026)

Everything you need to know about environment variables in Next.js on Vercel — adding via CLI vs dashboard, NEXT_PUBLIC_ prefix, build-time vs runtime, secrets vs preview vs production, and the trailing-newline gotcha.

Guides

Google Search Console for Developers: Setup, Sitemap, and Monitoring

GSC is your direct line to Google. Here's how to set it up, submit your sitemap, request indexing, and monitor your site's search performance.

Guides

React Server Components Explained: What They Are and Why They Matter

React Server Components run on the server, send zero JavaScript to the browser, and are the default in Next.js App Router. Here's what that means for your app.