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": "Acme Pro",
  "image": ["https://example.com/product.png"],
  "description": "One-line product description.",
  "brand": { "@type": "Brand", "name": "Acme" },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/pricing",
    "priceCurrency": "USD",
    "price": "49.00",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8",
    "reviewCount": "1247"
  }
}

Swap in your own product name, price, and image — and only add theaggregateRating block if you have that many real reviews behind it. This example uses a placeholder brand on purpose: a product schema with an invented rating is exactly the kind of structured-data lie Google's spam policies penalize.

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.

Where InBuild stands on structured data

Two different claims here, and it matters which one you're asking about. InBuild's own marketing site (inbuild.io) emits real JSON-LD on every page — you can view-source any page here and see it. What the AI generates or exports for your project is a different story: none of the 12 schema types above are emitted automatically. The exporter writes plain HTML with no <script type="application/ld+json"> block anywhere, and the AI isn't prompted to produce one.

If you want structured data on a site you build with InBuild, add it yourself with our free JSON-LD generator — pick a schema type from the list above, fill in your real fields, and paste the output into a script tag on the exported page. Read the glossary entry for a one-page definition of the format itself.

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

Your AI Builder's Export Looks Fine. Does It Actually Build?

Real, standard, dependency-free React can still fail on the first npm run build. Here is the five-minute test to run on any AI builder's export before you commit a client project to it.

Guides

What is og:image and How to Create One (Free Tools + Examples)

og:image is the preview image shown when your URL is shared on Twitter, LinkedIn, Slack, or Facebook. Here's how to create one correctly, the dimensions Google and social platforms expect, and free tools to generate yours.

Guides

How Much Does an AI Website Builder Cost in 2026?

AI website builders range from free to $200/mo in 2026. Here's the actual price breakdown of 15 builders, what each tier gets you, and the hidden costs (hosting, domain, AI generation limits) most reviews miss.