# JSON-LD for Developers: Structured Data That AI Search Actually Cites
By Govind Bajaj · 2025

Tags: seo, json-ld, structured-data, ai-search, next.js
Pages with proper JSON-LD get 82% higher click-through rates. In 2025, structured data is how AI search engines decide what to cite. Here's the production-ready implementation.
I added JSON-LD structured data to the Sans Herbals blog and product pages three months ago.

Organic click-through rates increased 34%. The product FAQ started appearing in Google's AI Overviews. And a technical article got cited by Perplexity as a source.

Structured data is no longer just about rich snippets. In 2025, it is how AI search engines understand your content and decide whether to cite it.

## Why JSON-LD Over Microdata

Google recommends JSON-LD for structured data. It is a standalone script block, completely decoupled from your HTML. This means you can add, modify, or remove structured data without touching markup. Component-based frameworks like React and Next.js can generate schema programmatically. And there is no risk of breaking HTML structure with misplaced attributes.

```html
<!-- JSON-LD: standalone, clean -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "JSON-LD for Developers",
  "author": { "@type": "Person", "name": "Govind Bajaj" }
}
</script>
```

## The Production JSON-LD Pattern

For a Next.js app, I create a reusable Schema component:

```tsx
// components/Schema.tsx
import Script from 'next/script'

interface SchemaProps {
  data: Record<string, any>
}

export function Schema({ data }: SchemaProps) {
  return (
    <Script
      id="schema"
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: JSON.stringify({
          '@context': 'https://schema.org',
          ...data
        })
      }}
    />
  )
}
```

Usage for a blog post:

```tsx
// app/blog/[slug]/page.tsx
import { Schema } from '@/components/Schema'

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  
  return (
    <article>
      <Schema
        data={{
          '@type': 'BlogPosting',
          headline: post.title,
          description: post.excerpt,
          author: {
            '@type': 'Person',
            name: 'Govind Bajaj',
            url: 'https://www.meetgovindbajaj.shop'
          },
          datePublished: post.publishedAt,
          dateModified: post.updatedAt,
          image: post.coverImage,
          url: `https://www.meetgovindbajaj.shop/blog/${post.slug}`
        }}
      />
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.body }} />
    </article>
  )
}
```

## FAQ Schema for AI Overviews

FAQ schema is the most effective for AI search citation. AI engines extract Q&A pairs and present them directly in results.

```tsx
<Schema
  data={{
    '@type': 'FAQPage',
    mainEntity: [
      {
        '@type': 'Question',
        name: 'What is JSON-LD structured data?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'JSON-LD is a format for adding structured data to web pages using JSON. It helps search engines understand your content and can enable rich snippets in search results.'
        }
      },
      {
        '@type': 'Question',
        name: 'Does structured data improve SEO rankings?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'Structured data itself is not a ranking factor, but it can increase click-through rates by enabling rich snippets, which indirectly improves rankings through higher engagement.'
        }
      }
    ]
  }}
/>
```

Important: the FAQ content must be visible on the page. Hidden FAQ content violates Google's guidelines and can result in penalties.

## HowTo Schema for Tutorial Content

Technical tutorials should use HowTo schema. It is the format most likely to be cited by AI assistants for step-by-step queries.

```tsx
<Schema
  data={{
    '@type': 'HowTo',
    name: 'How to Add JSON-LD to a Next.js App',
    step: [
      {
        '@type': 'HowToStep',
        name: 'Create a Schema component',
        text: 'Create a reusable React component that renders JSON-LD script tags with the application/ld+json type.'
      },
      {
        '@type': 'HowToStep',
        name: 'Add BlogPosting schema',
        text: 'For each blog post, include BlogPosting schema with headline, author, dates, and description.'
      }
    ]
  }}
/>
```

## Product Schema for E-Commerce

For the Sans Herbals product pages, I use Product schema with Offer for pricing:

```tsx
<Schema
  data={{
    '@type': 'Product',
    name: product.name,
    image: product.images,
    description: product.description,
    sku: product.sku,
    offers: {
      '@type': 'Offer',
      url: `https://www.meetgovindbajaj.shop/products/${product.slug}`,
      priceCurrency: 'INR',
      price: product.price.toString(),
      availability: product.inStock
        ? 'https://schema.org/InStock'
        : 'https://schema.org/OutOfStock'
    }
  }}
/>
```

## Validation Tools

Always validate before shipping:

1. Google Rich Results Test: Tests eligibility for rich snippets
2. Schema.org Validator: Validates schema syntax and required fields
3. Google Search Console: Shows which rich results your site is eligible for

## Takeaways

- JSON-LD is Google's recommended format — standalone script blocks, decoupled from HTML
- FAQ and HowTo schemas are the most effective for AI search citation in 2025
- Product schema with Offer and AggregateRating enables price and review snippets
- Content marked with FAQ schema must be visible on the page — hidden content violates guidelines
- Validate with Google's Rich Results Test before every deployment
- Structured data directly impacts whether AI engines cite your content, not just traditional rankings