How to Add JSON-LD Structured Data to Next.js

JSON-LD (JavaScript Object Notation for Linked Data) tells search engines what your page is about in a structured format. It powers rich results: FAQ dropdowns, recipe cards, product ratings, how-to steps, and more.

In Next.js, you add JSON-LD as a script tag in your page components. Here is how to do it for the most common schema types.

The basics

JSON-LD goes in a <script type="application/ld+json"> tag. In Next.js App Router, you can add it directly in your page or layout component:

export default function Page() {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: 'My Company',
    url: 'https://mycompany.com',
  }

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <main>...</main>
    </>
  )
}

Organization schema

Add this to your root layout. It tells Google who you are, your logo, and your social profiles.

const organization = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'Indxel',
  url: 'https://indxel.com',
  logo: 'https://indxel.com/logo.png',
  sameAs: [
    'https://github.com/indxel/indxel',
    'https://www.npmjs.com/package/indxel',
  ],
}

Article schema

Use for blog posts. Enables rich results with headline, author, and publish date.

import { generateLD } from 'indxel'

const articleLD = generateLD('Article', {
  headline: 'How to Add JSON-LD to Next.js',
  datePublished: '2026-02-09',
  author: { name: 'Indxel', url: 'https://indxel.com' },
})

FAQ schema

Add to pricing pages or any page with Q&A content. Google may show the questions directly in search results.

import { generateLD } from 'indxel'

const faqLD = generateLD('FAQ', {
  questions: [
    { question: 'Is it free?', answer: 'Yes, the core is open-source.' },
    { question: 'Can I cancel?', answer: 'Yes, cancel anytime.' },
  ],
})

HowTo schema

Use for step-by-step guides. Google may show steps as a rich snippet.

import { generateLD } from 'indxel'

const howToLD = generateLD('HowTo', {
  name: 'How to set up SEO validation',
  steps: [
    { name: 'Install', text: 'Run npm install indxel' },
    { name: 'Init', text: 'Run npx indxel init' },
    { name: 'Check', text: 'Run npx indxel check' },
  ],
})

Breadcrumb schema

Add to every page. Helps search engines understand your site hierarchy. Use alongside visible breadcrumb navigation.

import { generateLD } from 'indxel'

const breadcrumbLD = generateLD('Breadcrumb', {
  items: [
    { name: 'Home', url: 'https://mysite.com' },
    { name: 'Blog', url: 'https://mysite.com/blog' },
    { name: 'JSON-LD Guide', url: 'https://mysite.com/blog/json-ld' },
  ],
})

SoftwareApplication schema

For developer tools, SaaS products, and apps. Tells Google your app category, pricing, and features.

Validation

Test your structured data with:

• Google Rich Results Test: search.google.com/test/rich-results
• Schema.org Validator: validator.schema.org
• Indxel CLI: npx indxel crawl yoursite.com — checks for presence and validity

Using Indxel's generateLD()

Instead of writing raw JSON-LD objects, use Indxel's generateLD() function. It handles the @context, @type, and required fields for you. Supports: Article, Product, FAQ, HowTo, Breadcrumb, Organization, WebPage, SoftwareApplication, WebSite.