How to Add JSON-LD Structured Data to a Next.js Website
JSON-LD (JavaScript Object Notation for Linked Data) is a format for structured data markup that helps search engines better understand the content of your website. Adding JSON-LD to your Next.js website can improve SEO and enhance the display of your site in search engine results. In this guide, we’ll walk through the steps to add JSON-LD structured data to a Next.js website.
Step 1: Create a JSON-LD Component
The first step is to create a reusable component for rendering JSON-LD data. This component will output the JSON-LD script tag into the <head> of your HTML document.
Create a new file JsonLd.js in your components folder:
<script
type=“application/ld+json”
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>
);
export default JsonLd;
Step 2: Use the Component in a Page
Next, let’s create a page where we want to add JSON-LD structured data. For example, let’s say we have a blog post and we want to add structured data for this post.
Create a new page BlogPost.js in your pages folder:
const BlogPost = () => {
// Sample blog post data
const post = {
title: ‘How to Add JSON-LD Structured Data to a Next.js Website‘,
description: ‘Learn how to improve your Next.js website‘s SEO by adding JSON-LD structured data.‘,
datePublished: ‘2024-03-23‘,
author: {
“@type“: “Person“,
“name“: “John Doe“
},
image: “https://via.placeholder.com/800×400“,
publisher: {
“@type“: “Organization“,
“name“: “My Blog“,
“logo“: {
“@type“: “ImageObject“,
“url“: “https://via.placeholder.com/200×100“
}
},
mainEntityOfPage: {
“@type“: “WebPage“,
“@id“: “https://www.example.com/blog/how-to-add-json-ld-to-next-js“
}
};
return (
<div>
<h1>{post.title}</h1>
<p>{post.description}</p>
<p>Date Published: {post.datePublished}</p>
<p>Author: {post.author.name}</p>
<img src={post.image} alt={post.title} />
{/* JSON-LD for Blog Post */}
<JsonLd data={{
“@context“: “https://schema.org“,
“@type“: “BlogPosting“,
“headline“: post.title,
“description“: post.description,
“datePublished“: post.datePublished,
“author“: post.author,
“image“: [post.image],
“publisher“: post.publisher,
“mainEntityOfPage“: post.mainEntityOfPage
}} />
</div>
);
};
export default BlogPost;
Step 3: Verify and Test
Now, when you visit the /blogpost route (or whatever route you’ve set up for this page) of your Next.js application and inspect the page source, you should see the JSON-LD structured data included:
{
“@context“: “https://schema.org“,
“@type“: “BlogPosting“,
“headline“: “How to Add JSON-LD Structured Data to a Next.js Website“,
“description“: “Learn how to improve your Next.js website’s SEO by adding JSON-LD structured data.“,
“datePublished“: “2024-03-23“,
“author“: {
“@type“: “Person“,
“name“: “John Doe“
},
“image“: [“https://via.placeholder.com/800×400“],
“publisher“: {
“@type“: “Organization“,
“name“: “My Blog“,
“logo“: {
“@type“: “ImageObject“,
“url“: “https://via.placeholder.com/200×100“
}
},
“mainEntityOfPage“: {
“@type“: “WebPage“,
“@id“: “https://www.example.com/blog/how-to-add-json-ld-to-next-js“
}
}
</script>
On single Page (Code for Copy Pasting)
// Dummy article data
const article = {
title: ‘Sample Article Title‘,
description: ‘This is a sample article description.‘,
datePublished: ‘2024-03-23‘,
author: {
“@type“: “Person“,
“name“: “John Doe“
},
image: “https://via.placeholder.com/800×400“,
publisher: {
“@type“: “Organization“,
“name“: “Sample News“,
“logo“: {
“@type“: “ImageObject“,
“url“: “https://via.placeholder.com/200×100“
}
},
mainEntityOfPage: {
“@type“: “WebPage“,
“@id“: “https://www.example.com/article“
}
};
// Define the JsonLd component within the Article component
const JsonLd = ({ data }) => (
<script
type=“application/ld+json”
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>
);
return (
<div>
<h1>{article.title}</h1>
<p>{article.description}</p>
<p>Date Published: {article.datePublished}</p>
<p>Author: {article.author.name}</p>
<img src={article.image} alt={article.title} />
{/* JSON-LD for Article */}
<JsonLd data={{
“@context“: “https://schema.org“,
“@type“: “NewsArticle“,
“headline“: article.title,
“description“: article.description,
“datePublished“: article.datePublished,
“author“: article.author,
“image“: [article.image],
“publisher“: article.publisher,
“mainEntityOfPage“: article.mainEntityOfPage
}} />
</div>
);
};
export default Article;
Conclusion
In this guide, we’ve created a reusable JsonLd component and used it to add JSON-LD structured data to a Next.js blog post page. You can customize the post object with your actual blog post data. This structured data will help search engines understand the content of your website better, potentially improving your site’s visibility and SEO performance. Remember to always validate your JSON-LD using tools like Google’s Structured Data Testing Tool to ensure it meets the schema.org guidelines.
