JSON-LD Structured Data Nextjs: How to Add It to Your Site
OverMCP Team
TL;DR: To add structured data (JSON-LD) to a Next.js site, use the next/script component with type="application/ld+json" inside your page or layout component. Create a JavaScript object representing your structured data, then render it as a script tag. For dynamic pages like blog posts or products, generate the JSON-LD dynamically based on page props or CMS data.
What Is JSON-LD and Why Add It to Nextjs?
JSON-LD (JavaScript Object Notation for Linked Data) is a format for structured data that helps search engines understand your content. When you add JSON-LD to your Next.js site, you enable rich results like breadcrumbs, product snippets, FAQ accordions, and more. This can improve click-through rates and SEO performance. Implementing JSON-LD structured data in Nextjs is straightforward because Next.js supports server-side rendering (SSR) and static site generation (SSG), making it easy to inject dynamic structured data.
How to Add JSON-LD Structured Data to a Next.js Page
The simplest way is to use the next/script component. Here’s an example for a blog post page.
Step 1: Create a JSON-LD Object
Define your structured data as a plain JavaScript object. For a blog post, use the Article schema:
const articleStructuredData = {
"@context": "https://schema.org",
"@type": "Article",
"headline": "How to Add JSON-LD Structured Data to Nextjs",
"description": "Learn how to add structured data to your Next.js site.",
"image": "https://example.com/image.jpg",
"datePublished": "2025-01-15",
"author": {
"@type": "Person",
"name": "John Doe"
}
};Step 2: Use next/script to Inject the JSON-LD
In your page component (e.g., pages/blog/[slug].js or app/blog/[slug]/page.js for App Router), import Script from next/script and render it:
import Script from "next/script";
export default function BlogPost({ post }) {
const jsonLd = {
"@context": "https://schema.org",
"@type": "Article",
headline: post.title,
description: post.excerpt,
image: post.image,
datePublished: post.date,
author: {
"@type": "Person",
name: post.author
}
};
return (
<>
<Script
id="article-jsonld"
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
/>
<article>
<h1>{post.title}</h1>
<p>{post.content}</p>
</article>
</>
);
}Important: Always use dangerouslySetInnerHTML with JSON.stringify to safely serialize the object. The id attribute helps Next.js deduplicate scripts.
Adding JSON-LD to Layouts (Global Structured Data)
For site-wide structured data like Organization or Website, add the script to your root layout (app/layout.js or pages/_app.js):
import Script from "next/script";
export default function RootLayout({ children }) {
const siteJsonLd = {
"@context": "https://schema.org",
"@type": "WebSite",
name: "Your Site Name",
url: "https://yoursite.com",
description: "Your site description"
};
return (
<html>
<body>
<Script
id="site-jsonld"
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(siteJsonLd) }}
strategy="afterInteractive"
/>
{children}
</body>
</html>
);
}Dynamic JSON-LD for Blog Posts, Products, and FAQs
For dynamic content, generate the JSON-LD based on page data. Here’s an example for a product page:
export default function ProductPage({ product }) {
const productJsonLd = {
"@context": "https://schema.org",
"@type": "Product",
name: product.name,
description: product.description,
image: product.image,
offers: {
"@type": "Offer",
price: product.price,
priceCurrency: "USD",
availability: "https://schema.org/InStock"
}
};
return (
<>
<Script id="product-jsonld" type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(productJsonLd) }} />
{/* page content */}
</>
);
}For FAQs, use the FAQPage schema:
const faqJsonLd = {
"@context": "https://schema.org",
"@type": "FAQPage",
mainEntity: [
{
"@type": "Question",
name: "What is JSON-LD?",
acceptedAnswer: {
"@type": "Answer",
text: "JSON-LD is a structured data format."
}
},
// more questions
]
};Testing Your JSON-LD
After adding JSON-LD structured data to your Nextjs site, validate it using:
Common Mistakes and Best Practices
next/script component is the recommended way for third-party scripts, including JSON-LD.dangerouslySetInnerHTML with JSON.stringify to prevent XSS.Why This Matters for SEO
Google uses structured data to display rich results, which can increase CTR by up to 30%. For Next.js sites, proper JSON-LD implementation ensures that search engines can parse your content even with client-side rendering. Adding JSON-LD structured data to Nextjs is a quick win for SEO.
How OverMCP Can Help
If you're building a Next.js app with AI tools, OverMCP can scan your site for missing or incorrect JSON-LD structured data, along with other security and SEO issues. It's designed for vibe-coded apps to catch what AI coding tools often skip. Learn more at OverMCP.
FAQ
What is the best way to add JSON-LD to Next.js?
The best way is to use the next/script component with type="application/ld+json" and dangerouslySetInnerHTML to inject the JSON-LD object. This works for both Pages Router and App Router.
Can I add multiple JSON-LD blocks on one page?
Yes, you can add multiple <Script> tags with different id attributes, each containing a different structured data object (e.g., Article and BreadcrumbList).
Does Next.js automatically generate JSON-LD?
No, Next.js does not automatically generate structured data. You must manually add JSON-LD using the methods described above, or use a library like next-seo that provides components for common schemas.