headless-seo-starter/components/seo/ProductSchema.tsx at main · nimajafari/headless-seo-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * Renders schema.org `Product` JSON-LD into the page <head>/body.
 *
 * It is built from the SAME `product` object the visible markup renders — no
 * second fetch — so the structured data can never drift from the body. The
 * inclusion rules (brand/aggregateRating) live in `lib/seo/product-jsonld.ts`
 * and are unit-tested there.
 */
import type { Product } from '@/lib/cms/types';
import { buildProductJsonLd } from '@/lib/seo/product-jsonld';

export interface ProductSchemaProps {
  product: Product;
  /** The page's canonical URL, embedded as the product/offer `url`. */
  canonicalUrl?: string;
}

export function ProductSchema({ product, canonicalUrl }: ProductSchemaProps) {
  const jsonLd = buildProductJsonLd(product, { canonicalUrl });

  return (
    <script
      type="application/ld+json"
      // JSON.stringify output is safe to inject; there is no user-controlled
      // HTML here, only serialized data from our own CMS records.
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

export default ProductSchema;