How to Add JSON-LD Structured Data to Your Website
Structured data helps search engines and AI answer engines understand your content. JSON-LD is the recommended format. This guide covers the most common schema types with full code examples you can copy into your project today.
What is JSON-LD?
JSON-LD (JavaScript Object Notation for Linked Data) is a method for embedding structured metadata into your HTML pages using a standard JSON format. Google, Bing, and AI engines like ChatGPT and Perplexity read this metadata to understand what your page is about, who wrote it, and what type of content it contains.
The structured data lives inside a <script type="application/ld+json"> tag. It does not affect what users see on the page. It only affects how machines interpret your content.
A reusable JsonLd component for Next.js
Create this component once and reuse it on every page. It injects the JSON-LD script tag with the data you pass in:
// components/seo/JsonLd.tsx
export function JsonLd({ data }: { data: Record<string, unknown> }) {
return (
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>
)
}Usage: <JsonLd data={...} /> anywhere in your page component.
Article and BlogPosting schema
Use BlogPosting for blog articles and Article for general content pages. This schema enables rich snippets with publish date, author, and headline in search results:
const articleSchema = {
"@context": "https://schema.org",
"@type": "BlogPosting",
headline: "Your Article Title Here",
description: "A short description under 160 characters.",
author: {
"@type": "Organization",
name: "Your Company"
},
publisher: {
"@type": "Organization",
name: "Your Company"
},
datePublished: "2026-04-01",
dateModified: "2026-04-01",
mainEntityOfPage: {
"@type": "WebPage",
"@id": "https://yoursite.com/blog/your-article"
}
}FAQPage schema
FAQPage schema generates rich snippets with expandable questions in Google search results. It also increases the chance of being cited by AI answer engines. Add it to any page with a FAQ section:
const faqSchema = {
"@context": "https://schema.org",
"@type": "FAQPage",
mainEntity: [
{
"@type": "Question",
name: "How do I add structured data?",
acceptedAnswer: {
"@type": "Answer",
text: "Add a script tag with type application/ld+json containing your JSON-LD object. Use a reusable component to keep it consistent across pages."
}
},
{
"@type": "Question",
name: "Which schema types does Google support?",
acceptedAnswer: {
"@type": "Answer",
text: "Google supports Article, FAQPage, Product, Organization, BreadcrumbList, SoftwareApplication, and many more. See the full list at schema.org."
}
}
]
}Organization schema
Add this to your homepage or about page. It tells search engines who you are, your logo, and your social profiles:
const orgSchema = {
"@context": "https://schema.org",
"@type": "Organization",
name: "Your Company",
url: "https://yoursite.com",
logo: "https://yoursite.com/logo.png",
sameAs: [
"https://twitter.com/yourhandle",
"https://github.com/yourorg"
]
}Product schema
Use Product schema on pricing or product pages. It can generate rich snippets with price, availability, and review ratings:
const productSchema = {
"@context": "https://schema.org",
"@type": "Product",
name: "Pro Plan",
description: "Full SEO audit with AI-powered fix suggestions.",
offers: {
"@type": "Offer",
price: "29.00",
priceCurrency: "EUR",
availability: "https://schema.org/InStock",
url: "https://yoursite.com/pricing"
}
}SoftwareApplication schema
The best fit for SaaS landing pages. It tells Google your page is about a web application, not a physical product:
const softwareSchema = {
"@context": "https://schema.org",
"@type": "SoftwareApplication",
name: "SEOLint",
applicationCategory: "WebApplication",
operatingSystem: "Web",
offers: {
"@type": "Offer",
price: "19.00",
priceCurrency: "EUR"
},
description: "AI-powered SEO auditor for developers.",
url: "https://seolint.dev"
}How to test your structured data
Google provides a free tool to validate your JSON-LD. Go to search.google.com/test/rich-results and either paste your page URL or the raw JSON-LD code snippet.
What to check:
- •No errors (red) in the validation output
- •Warnings (yellow) are acceptable but worth fixing if easy
- •The "Detected items" section shows your schema types
- •Rich result preview shows the expected format
Run this test every time you add or change structured data. Google Search Console also reports structured data errors, but the Rich Results Test gives you instant feedback.
Which schema type goes on which page
| Page | Schema |
|---|---|
| Landing page | SoftwareApplication |
| Blog post | BlogPosting + FAQPage |
| Pricing page | Product or Offer + FAQPage |
| About page | Organization or Person |
| Documentation | Article |
| Comparison page | FAQPage |
FAQ
What is JSON-LD structured data?
JSON-LD (JavaScript Object Notation for Linked Data) is a way to embed machine-readable metadata into your HTML pages. Search engines and AI answer engines use it to understand your content, which can result in rich snippets in search results and citations in AI answers.
Where do I put JSON-LD in my HTML?
Add a <script type="application/ld+json"> tag anywhere in your HTML document. It is most commonly placed in the <head> or at the end of the <body>. In Next.js, use a reusable JsonLd component that injects the script via dangerouslySetInnerHTML.
How do I test my structured data?
Use the Google Rich Results Test at search.google.com/test/rich-results. Paste your URL or code snippet. It validates your JSON-LD against Google's supported schema types and shows which rich results your page is eligible for.
Can I have multiple JSON-LD blocks on one page?
Yes. You can have multiple <script type="application/ld+json"> blocks on the same page, each with a different schema type. For example, a blog post page can have both BlogPosting and FAQPage schemas.
Validate your structured data automatically
SEOLint checks JSON-LD, Open Graph, and heading structure on every scan.