1. Create Schema Generator Functions
Build a module of pure functions that produce schema objects from page data:
```typescript
// lib/schema.ts
export function generateArticleSchema(data: PageData, url: string) {
return {
"@context": "https://schema.org",
"@type": "Article",
headline: data.h1,
description: data.metaDescription,
url,
datePublished: data.publishedDate,
dateModified: data.lastModified,
author: { "@type": "Organization", name: "..." },
publisher: { "@type": "Organization", name: "..." },
};
}
// IMPORTANT: FAQPage schema is ONLY valid when the FAQ content is
// visible on the page itself. Google requires the questions and answers
// to be present in the rendered HTML, not just in the JSON-LD.
// Never add FAQPage schema to a page that does not render the FAQs.
export function generateFAQSchema(faqs: FAQ[]) {
if (!faqs?.length) return null;
return {
"@context": "https://schema.org",
"@type": "FAQPage",
mainEntity: faqs.map((faq) => ({
"@type": "Question",
name: faq.question,
acceptedAnswer: {
"@type": "Answer",
text: faq.answer,
},
})),
};
}
export function generateWebPageSchema(data: PageData, url: string) {
return {
"@context": "https://schema.org",
"@type": "WebPage",
name: data.title,
description: data.metaDescription,
url,
dateModified: data.lastModified,
};
}
export function generateBreadcrumbSchema(
items: { name: string; url: string }[]
) {
return {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
itemListElement: items.map((item, i) => ({
"@type": "ListItem",
position: i + 1,
name: item.name,
item: item.url,
})),
};
}
```
2. Create the Schema Renderer Component
Build a reusable component that injects JSON-LD into the page head:
```typescript
export function JsonLd({ data }: { data: Record | null }) {
if (!data) return null;
return (
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
/>
);
}
```
3. Compose Schema per Page
Each page template composes its schema from multiple generators:
```typescript
// In the page component
const schemas = [
generateArticleSchema(data, canonicalUrl),
generateBreadcrumbSchema(breadcrumbItems),
data.faqs?.length ? generateFAQSchema(data.faqs) : null,
].filter(Boolean);
// Render each as a separate script tag
{schemas.map((schema, i) => )}
```
4. Schema Field Rules
Required fields per type:
Article: headline, url, datePublished, dateModified, author, publisherFAQPage: mainEntity with at least 1 Question/Answer pairBreadcrumbList: itemListElement with position, name, itemProduct: name, description; offers or review if availableHowTo: name, step (with text for each step)
Field integrity rules:
headline must match the page's H1 or titleurl must match the canonical URLdateModified must be a valid ISO 8601 date- Never include empty strings or placeholder values
- Never include fields with fabricated data (e.g., fake reviews)
5. Handle Multiple Schema Types
A single page can have multiple schema blocks. Render them as separate
|