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

Minh Vu

By Minh Vu

Updated Mar 05, 2024

1.0K reads

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

Disclaimer: 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.

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?

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.
    Choose Schema Type
    Figure: Choose Schema Type
  2. Fill in the corresponding fields to your blog post with Article @type set to BlogPosting.
    Fill in Schema Data
    Figure: Fill in Schema Data
  3. Copy the JSON generated by the tool.
    Copy Generated JSON-LD Data
    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.

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.

Minh Vu

Minh Vu

Software Engineer

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

Leave a Comment

Receive Latest Updates 📬

Get every new post, special offers, and more via email. No fee required.