JSON-LD schema markup for a Next.js site, step by step

In a Next.js App Router site, add JSON-LD by rendering a <script type="application/ld+json"> tag from a server component, with the data built from the same content the page shows. Escape < in the JSON so a stray </script> can't break out, keep the IDs stable so pages refer to each other, and test each page type in Google's Rich Results Test. Search engines and AI assistants both read it to understand who you are and what a page is about.

Which schema types are worth adding

• Organization or Person, onceYour name, logo, URL and sameAs links to your LinkedIn, GitHub and marketplace profiles. This is how engines join your profiles to your site.
• WebSiteThe site's name and URL. Reference the Organization as its publisher.
• BreadcrumbListOn every page below the home page. Google shows it in place of the raw URL.
• Article or BlogPostingOn posts: headline, dates, author and image.
• Service or ProductOn service and product pages: what it is, who provides it, where.
• FAQPageGoogle now shows FAQ rich results only for a few authoritative sites, but the questions still help engines and AI tools understand the page. Only mark up questions that are visible on the page.

A small component that renders it safely

This is the helper this site uses. It takes one or more things and puts them in a single @graph:

type Thing = Record<string, unknown>;

export function JsonLd({ data }: { data: Thing | Thing[] }) {
  const graph = Array.isArray(data) ? data : [data];
  const json = JSON.stringify({ "@context": "https://schema.org", "@graph": graph })
    .replace(/</g, "\\u003c");
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: json }} />;
}

Use it in any page or layout. Because it's a server component, the markup is in the HTML Google and AI crawlers fetch, with no JavaScript needed:

const site = "https://example.com";
const org = { "@type": "Organization", "@id": `${site}/#org`, name: "Example", url: site,
  sameAs: ["https://www.linkedin.com/company/example", "https://github.com/example"] };

export default function Page() {
  return (
    <>
      <JsonLd data={[org, {
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: "Home", item: site },
          { "@type": "ListItem", position: 2, name: "Services", item: `${site}/services` },
        ],
      }]} />
      {/* the page */}
    </>
  );
}

Rules that keep it trustworthy

• Build it from the same data as the visible page, so the two never disagree.
• Give the Organization, WebSite and Person an @id and point to it from other pages instead of repeating them.
• Don't mark up reviews, ratings or prices you don't show. Google treats that as spam.
• Use full URLs, and dates in ISO format (2026-10-27).

How to test it

1. 01Rich Results TestGoogle's tool shows which rich results a page qualifies for and any errors.
2. 02Schema Markup Validatorvalidator.schema.org checks every type, including ones Google doesn't use for rich results.
3. 03Search ConsoleThe Enhancements reports (Breadcrumbs, Articles and others) show problems across the whole site after Google crawls it.