Structured data (JSON-LD) in NextJS

Introduction

Structured data helps search engines understand your webpage better by adding clear information in a special format called JSON-LD.

You want your webpage to show rich results like stars or event details in Google search.

You have a product page and want to share product info like price and availability.

You run a blog and want to mark up articles with author and publish date.

You want to improve SEO by making your page content easier for search engines to read.

Syntax

NextJS

import Script from 'next/script';

export default function Page() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Jane Doe",
    "jobTitle": "Software Developer",
    "url": "https://janedoe.com"
  };

  return (
    <>
      <h1>About Jane</h1>
      <Script
        id="jsonld-person"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </>
  );
}

Use the next/script component to safely add JSON-LD in Next.js pages.

Set type to application/ld+json and use dangerouslySetInnerHTML to insert JSON as a string.

Examples

This example shows JSON-LD for a product with price details.

NextJS

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Coffee Mug",
  "offers": {
    "@type": "Offer",
    "price": "12.99",
    "priceCurrency": "USD"
  }
};

This example marks up an article with title, author, and publish date.

NextJS

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How to use JSON-LD",
  "author": {
    "@type": "Person",
    "name": "Jane Doe"
  },
  "datePublished": "2024-06-01"
};

Sample Program

This Next.js page shows a simple About section and includes JSON-LD structured data about Jane using the next/script component.

NextJS

import Script from 'next/script';

export default function AboutPage() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Jane Doe",
    "jobTitle": "Software Developer",
    "url": "https://janedoe.com"
  };

  return (
    <main>
      <h1>About Jane</h1>
      <p>Jane is a software developer who loves teaching coding.</p>
      <Script
        id="jsonld-person"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
    </main>
  );
}

Important Notes

Always validate your JSON-LD using tools like Google's Rich Results Test to avoid errors.

Keep JSON-LD data up to date with your page content for best SEO results.

Summary

Structured data in JSON-LD format helps search engines understand your page content.

In Next.js, use the next/script component to add JSON-LD safely.

This improves your chances of rich search results and better SEO.