Skip to content

Adding Structured Data in Next.js

Next.js/

Search engines use structured data to better understand the content of your page. Google recommends using JSON-LD format when describing structured data.

In this post I will show you how to set up structured data by adding a script of application/ld+json type to your Next.js site.

Adding Structured Data

Depending on your website — a blog, recipe site, product store — there are many different types of schemas you can use. Here’s the list of types on Schema.org for you to explore.

As an example, let’s use the following schema for a blog post page.

const structuredData = {
  '@context': 'https://schema.org',
  '@type': 'BlogPosting',
  headline: 'Title of the blog post',
  description: 'Description of the blog post',
  author: [
    {
    '@type': 'Person',
    name: 'John Doe',
    },
  ],
  datePublished: '2022-09-14T09:00:00.000Z',
};

Here’s how to implement this structured data in your Next.js project:

  1. Create the following component in src/components/StructuredData.jsx .

    import Head from 'next/head';

export default function StructuredData({ data }) {
  return (
    <Head>
      <script
        key="structured-data"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
      />
    </Head>
  );
}

    Let me explain what’s going on here:

    • data prop lets you pass structured data to this component
    • Head component injects the script tag into the <head> of HTML document
    • key attribute ensures that this script tag will be included in <head> exactly once without duplicates
    • dangerouslySetInnerHTML and JSON.stringify allows you to properly insert data object inside script

    Make sure that you trust whats coming from data and never use dangerouslySetInnerHTML with values that users of your application can manipulate.

  2. Use the StructuredData component in a page component

import StructuredData from 'src/components/StructuredData';

export default function BlogPost({ post }) {
  const structuredData = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    description: post.description,
    author: [
      {
        '@type': 'Person',
        name: post.author,
      },
    ],
    image: post.imageUrl,
    datePublished: post.publishedAt,
  };

  return (
    <>
      <StructuredData data={structuredData} />
      <article>
        <h1>{post.title}</h1>
        {post.content}
      </article>
    </>
  );
}

Validating Your Structured Data

You can use Google’s Rich Results Test tool to validate if your pages have been set up with proper structured data.

You will need to deploy your website first and use the live URL. You can use Netlify or Vercel services to do this.

Or, inspect your site’s HTML in your browser while developing locally and copy the contents of the <script type="application/ld+json"> tag into the Rich Result Test tool.