mediumFrontend

What is JSON-LD structured data and how do you add it in Next.js?

Q: What is JSON-LD structured data and how do you add it in Next.js?

**TL;DR.** **JSON-LD** is schema.org **structured data** that helps search engines understand your content (articles, products, FAQs) and show **rich results**. In Next.js you render a <script type="application/ld+json"> with the JSON in a **Server Component**, often built from the same data as the page. page data article/product ld+json script schema.org → rich results <m

549 views

Understand the problem

Embedding schema.org data for rich results.

nextjsjson-ldstructured-dataseo

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Article JSON-LD in a Server Component

export default async function Post({ params }) {
  const post = await getPost((await params).slug);
  const ld = {
    '@context': 'https://schema.org', '@type': 'Article',
    headline: post.title, datePublished: post.date, author: { '@type': 'Person', name: post.author },
  };
  return (
    <>
      <script type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <article>{post.title}</article>
    </>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does code splitting and next/dynamic work in Next.js?

What are the special files in the Next.js App Router (page, layout, loading, error)?