Next.js JSON-LD: How to Add Structured Data to Your Website

As you may have read in another post I wrote about The Complete SEO Checklist for Next.js, you would see I mentioned JSON-LD schema.

In this post, I will show you how to add JSON-LD schema to your Next.js website.

Let's go through each section to fully understand what JSON-LD is, how it helps your website, and how to add it to your Next.js website.

Also Read: Next.js SEO: The Complete Checklist to Boost Your Website Ranking.

Contents

• What is JSON-LD and Why Do You Need It?
• Adding JSON-LD Schema to Your Next.js Website
  • Manually Add JSON-LD Schema to Your Website
  • Use a Library to Generate JSON-LD Schema for You
• Conclusion

What is JSON-LD and Why Do You Need It?

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.

Adding JSON-LD Schema to Your Next.js Website

There are 2 ways to add JSON-LD schema to your Next.js website:

1. Manually add JSON-LD schema to your website
2. Use a library to generate JSON-LD schema for you

I will show you both ways so you can choose your preferred way.

Manually Add JSON-LD Schema to Your 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:

1. Choose Article as the schema markup type.

   

2. Fill in the corresponding fields to your blog post with Article @type set to BlogPosting.

   

3. Copy the JSON generated by the tool.

   

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.

Use a Library to Generate JSON-LD Schema for You

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
# or
yarn 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.

Conclusion

In this post, you have learned what JSON-LD is, why you need it, and how to add JSON-LD schema to your Next.js website.

You can choose to add JSON-LD schema manually or use next-seo to generate JSON-LD schema for you.

I hope you find this post helpful. If you have any questions, feel free to leave a comment below. I'm happy to help.