Note: All content on this website is derived directly from my own expertise and experiences. No AI-generated text or automated content creation tools are used.
Hi guys 👋, I'm a developer specializing in Elastic Stack and Next.js. My blog shares practical tutorials and insights based on 3+ years of hands-on experience. Open to freelance opportunities — let's get in touch!
Comments
jewi
Mar 09, 2024
Cool you keep updating the posts around SEO for Nextjs
Trung Duc
Jun 24, 2025
Very nice content. Hope you can continue update posts around SEO in NextJs. Thanks
Trung Duc
Jun 24, 2025
Very nice content. Hope you can continue update posts around SEO in NextJs. Thanks
Leave a Comment
Success!
Receive Latest Updates 📬
Get every new post, special offers, and more via email. No fee required.
JSON-LD stands for JavaScript Object Notation for Linked Data. It is a lightweight data-interchange format that is easy for humans to read and write and easy for machines to parse and generate.
It sounds complicated, right? You can simply think of JSON-LD as a way to add structured data to your website.
Why structured data? Because it helps search engines understand your website better. When search engines understand your website better, they can display your website in a more meaningful way in search results.
So, let's turn into the next section to see how to add JSON-LD schema to your Next.js website.
JSON-LD is simply a script tag that contains a JSON object, so it's very easy to add it to your website.
You can add it to your website by adding a script tag to your HTML anywhere, even inside the head or body tag.
But for newcomers, how do you know what to put inside the JSON object?
Fortunately, it's also very simple, you can use the JSON-LD Generator Tool to generate the JSON-LD schema for your website.
For example, I will use the tool to generate the JSON-LD schema for a blog post like so:
Choose Article as the schema markup type.
Figure: Choose Schema Type
Fill in the corresponding fields to your blog post with Article @type set to BlogPosting.
Figure: Fill in Schema Data
Copy the JSON generated by the tool.
Figure: Copy Generated JSON-LD Data
Cool, now you can paste the JSON-LD schema to your website like so:
export default function BlogPost() { return ( <div> <h1>Next.js JSON-LD: How to Add Structured Data to Your Website</h1> <p> Learn how to generate JSON-LD Schema for your Next.js website to improve SEO and user experience. </p> <p>...</p> <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "BlogPosting", mainEntityOfPage: { "@type": "WebPage", "@id": "https://dminhvu.com/nextjs-jsonld" }, headline: "Next.js JSON-LD: How to Add Structured Data to Your Website", image: "https://ik.imagekit.io/dminhvu/assets/nextjs-jsonld/thumbnail.png?tr=f-png", author: { "@type": "Person", name: "Minh Vu", url: "https://www.linkedin.com/in/dminhvu02/" }, datePublished: "2024-03-06", dateModified: "2024-03-06" }) }} /> </div> );}
That's it! You have added JSON-LD schema to your Next.js website.
Above is just a simple example, you can generate JSON-LD schema for other types of content like Product, Event, FAQ, HowTo, etc. as well as for dynamic content like blog names, authors, and dates.
If you find it hard to generate JSON-LD schema manually, you can use a library to generate JSON-LD schema for you.
In this post, I will show you how to use the next-seo library to generate JSON-LD schema for your Next.js website.
First, you need to install the library by running the following command:
npm install next-seo# oryarn add next-seo
Then, you can use the library to generate JSON-LD schema for your website like so:
import { ArticleJsonLd } from "next-seo";export default function BlogPost() { return ( <div> <h1>Next.js JSON-LD: How to Add Structured Data to Your Website</h1> <p> Learn how to generate JSON-LD Schema for your Next.js website to improve SEO and user experience. </p> <p>...</p> <ArticleJsonLd type="BlogPosting" url="https://dminhvu.com/nextjs-jsonld" title="Next.js JSON-LD: How to Add Structured Data to Your Website" images={[ "https://ik.imagekit.io/dminhvu/assets/nextjs-jsonld/thumbnail.png?tr=f-png" ]} datePublished="2024-03-06" dateModified="2024-03-06" authorName="Minh Vu" description="Learn how to generate JSON-LD Schema for your Next.js website to improve SEO and user experience." /> </div> );}
That's it! Much simpler, right?
You can utilize the library for your needs, please visit the official documentation to learn more.
Comments
jewi
Mar 09, 2024
Cool you keep updating the posts around SEO for Nextjs
Trung Duc
Jun 24, 2025
Very nice content. Hope you can continue update posts around SEO in NextJs. Thanks
Trung Duc
Jun 24, 2025
Very nice content. Hope you can continue update posts around SEO in NextJs. Thanks