Structured data: JSON-LD that earns rich results

Structured data can make eligible pages easier for search systems to interpret and can support features such as review stars, breadcrumbs and article cards. It also gives AI systems machine-readable context, without guaranteeing a citation. In the App Router, render JSON-LD as a script tag from a Server Component (typed with schema-dts):

import type { WithContext, BlogPosting } from "schema-dts";

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);

  const jsonLd: WithContext<BlogPosting> = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: post.title,
    description: post.excerpt,
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
    author: {
      "@type": "Person",
      name: "Vlad Sedenko",
      url: "https://example.com/about",
    },
    image: post.ogImage,
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{/* ... */}</article>
    </>
  );
}

Common types to consider, depending on the page:

1. Organization / Person — site-wide, in the root layout. Feeds the knowledge panel.
2. BlogPosting / Article — every post.
3. BreadcrumbList — replaces the URL with a readable path in results.
4. FAQPage — for pages with genuine Q&A content.
5. Product + Offer + AggregateRating — e-commerce; this is where the stars come from.
6. Service + LocalBusiness — agencies and local companies.

Validate with Google's Rich Results Test — the schema.org validator checks syntax, but only Google's tool tells you whether you're eligible for rich results.

Checklist:

• JSON-LD rendered server-side (never injected on the client after load)
• Article/BlogPosting on all posts with real dates
• BreadcrumbList site-wide
• Data in the markup matches the visible page (mismatches can earn a manual action)