How to Use Next SEO with JSON-LD for Better SEO in Next.js ?

If you're creating a website with Next.js, you’ve likely heard about SEO as well. It’s what helps your site show up on Google SERP. But how can you make your website stand out even more? That’s where Next SEO and JSON-LD comes into picture.

In this blog, We’ll explain what they are, why they matter, and how you can use them to make your website better on SERP [ Search Engine Results Page ].

What Is Next SEO?

Just think of Next SEO as a tool that helps you make your website easier to find on Google or other search engines. It adds tags and information to your site that tell search engines what your page is about. So, users can easily find their expected results based on their respective query.

For example we can say:

• What’s the title of your page?
• What’s your website about?
• Who wrote this blog post?

What Is JSON-LD?

JSON-LD stands for Javascript Object Notation for Linking Data.

JSON-LD sounds too complicated, but believe me, it’s not. JSON-LD is a way to give extra details about your page to search engines.

For example, if you have a blog, JSON-LD can tell Google:

• This is an article.
• Here’s the author’s name.
• This is the date it was published.

But, Why does this matter? Because it helps your site show rich results like star ratings, FAQs, or event details in Google searches.

What is Structured Data in terms of JSON-LD ?

Structured data is a set of search-engine specific json-ld templates.It helps search crawlers to understand your website in an even more specific way that what kind of information you are sharing online. Below is the user query about cake recipe and now you can see that the sites shown up in search results with the extra information about things like reviews, ratings and other rich snippets.

Types of structured data

There are many types of structured data that you can embed on your website, below are some..

• Article : Its for news, sports, blog and other article pages
• Events : Shows a list of organized events like concerts or festivals that people may attend in a particular time and location
• FAQ : Contains a list of frequently asked questions on respective topics.
• Fact check: A detailed version of a credible site’s evolution of a claim made by others
• Product : Information about a product, including price, availability, and review ratings
• Video: Provides video information in search results, with the option to play the video, video segments, and live stream content.

Why Use Next SEO and JSON-LD Together?

1. Better Search Results: Your site can look more attractive in Google with rich snippets.

2. Easier to Set Up: Next SEO makes adding JSON-LD super simple ways.

3. More Visitors: A well-optimized and informative site gets more clicks in comparison with the other ones.

Setting Up Next SEO in Your Next.js Project

Let’s start. Please follow these below steps to add Next SEO to your website.

Step 1: Install the Library

First off, you need to install the Next SEO package. Open your terminal and type the below command:

npm install next-seo 

or,

yarn add next-seo

or,

pnpm add next-seo

Step 2: Create a Default SEO File

Please create a file called next-seo.config.js in the root of your project. This file will store your website’s default SEO settings.

Here’s an example:

const defaultSEOConfig = {
  title: "My Example Website",
  description: "Welcome to my example website built with Next.js",
  openGraph: {
    type: "website",
    locale: "en_US",
    url: "https://example.com",
    site_name: "My Example Website",
  },
  twitter: {
    handle: "@exampletwitterhandle",
    site: "@exampletwitter",
    cardType: "summary_large_image",
  },
};

export default defaultSEOConfig;

Step 3: Apply SEO Settings Globally

Now, open your _app.js file and add the default SEO settings.

import { DefaultSeo } from 'next-seo';
import defaultSEOConfig from '../next-seo.config';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo {...defaultSEOConfig} />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

That’s it! Now all your pages will have these basic SEO settings.

Adding JSON-LD for Rich Snippets

Let’s take it one step further. Let's say you wrote a blog post, and you want Google to show extra details, like the author’s name and publication date as well.

Here’s how you can do it:

For Example: JSON-LD for a Blog Post

In your blog post file (e.g., pages/blog.js), add this code:

import { NextSeo } from 'next-seo';

export default function BlogPost() {
  return (
    <>
      <NextSeo
        title="Why I Love Coding ?"
        description="A simple explanation of why coding is so much fun!"
        openGraph={{
          type: 'article',
          article: {
            publishedTime: '2025-01-27T00:00:00Z',
            modifiedTime: '2025-01-27T08:00:00Z',
            authors: ['https://myamazingwebsite.com/authors/jane-doe'],
            tags: ['Coding', 'Web Development', 'Next.js','React.js'],
          },
        }}
        jsonLd={{
          '@context': 'https://schema.org',
          '@type': 'Article',
          headline: 'Why I Love Coding',
          description: 'A simple explanation of why coding is so much fun!',
          datePublished: '2025-01-25T00:00:00Z',
          dateModified: '2025-01-25T08:00:00Z',
          author: {
            '@type': 'Person',
            name: 'Jane Doe',
          },
          publisher: {
            '@type': 'Organization',
            name: 'My Amazing Website',
            logo: {
              '@type': 'ImageObject',
              url: 'https://myamazingwebsite.com/logo.png',
            },
          },
          image: 'https://myamazingwebsite.com/article-image.jpg',
        }}
      />
      <h1>Why I Love Coding ?</h1>
      <p>Coding is not just work; it’s creativity, problem-solving, and joy!</p>
    </>
  );
}

This code tells Google:

• The title of your blog post.
• The author’s name.
• The publication date.

Testing Your SEO and JSON-LD

After adding JSON-LD, you need to check if it’s working or not.

1. Rich Results Test:

Go to Google's Rich Results Test and paste your page’s URL.

URL: https://search.google.com/test/rich-results

2. Schema Markup Validator:

Use the Schema Validator to check if your JSON-LD is correct.

URL: https://validator.schema.org/

Why This Works ?

When you add JSON-LD to your website, you’re giving search engines a clear map of your content that is what your content is about. This helps them show rich results, like:

• Star ratings for reviews.
• Event dates and times.
• FAQs with answers.

Just imagine any user is searching for “Best coding tips.” If your blog shows a snippet with “Published by Jane Doe” and a featured image, they’re more likely to click on your link than a plain one.

Conclusion

SEO doesn’t have to be hard or scary in sound. With Next SEO and JSON-LD, you can easily improve your site’s visibility and make it more engaging for users and make your website more searchable based on the user's query.

So, take a deep breath, follow the steps, and watch your website start to shine on Google SERP. You’ve got this perfect combo.