Automating Schema.org JSON-LD Generation in Sitecore

Manually managing Schema.org structured data for every page and component can quickly become tedious and error-prone — especially in large enterprise Sitecore implementations. To simplify this, I built a modular, configuration-driven system that automatically generates Schema.org-compliant JSON-LD directly from Sitecore content.

This approach ensures every component contributes to SEO, while keeping the workflow seamless for both developers and content authors.

Overview

The system automatically transforms Sitecore content into structured data following the Schema.org specification.

It’s built around four core principles:

• Dynamic: Schema is generated at runtime from Sitecore fields.
• Component-Based: Each component manages its own schema fragment.
• Centralized: A provider merges all fragments into one optimized JSON-LD script.
• Configuration-Driven: Schema types and mappings can be updated without code changes.

Flow: Sitecore Data → SchemaProvider → useRegisterSchema → SchemaHead → JSON-LD Output

Architecture

1. Dynamic Schema Generation — Converts Sitecore field data into Schema.org JSON-LD dynamically.
2. Component Registration — Each component can independently register schema fragments.
3. Central Merging — All fragments are collected and output as a single JSON-LD <script> tag.
4. Configuration Flexibility — New schema types or field mappings can be added through configuration rather than code.

Core Components

Component Purpose SchemaProvider Manages schema context, stores fragments, and removes duplicates. SchemaHead Collects and outputs the final JSON-LD <script> tag. useRegisterSchema A React hook for components to register schema fragments. Transformer Converts Sitecore field data into Schema.org-compliant JSON-LD. Config Defines rules for grouping, renaming, and extracting fields.

Sitecore Integration

Each schema type — such as Product, Organization, or Article — is defined in Sitecore through dedicated templates.

Key points:

• Filtering: Internal fields (like __updated, __revision) are automatically ignored.
• Field Extraction: Supports direct fields, nested objects, and arrays.
• Reusable Templates: Schema templates can be reused across multiple components.

Schema Flow

1. Initialization: The app is wrapped with SchemaProvider.
2. Component Render: Components extract schema data from Sitecore fields.
3. Registration: useRegisterSchema registers schema fragments.
4. Merging: Provider merges and deduplicates all fragments.
5. Output: SchemaHead injects a single, optimized JSON-LD script.

How to Configure a Schema

Developer Steps

1. Create or Reuse a Schema Template Location: /sitecore/templates/Project/GlobalShared/Schema Reuse existing templates where possible.
2. Add Base Template Add _Schema Markup base template to the component requiring schema.
3. Select Schema in Sitecore Navigate to Settings → Schema Select an existing schema or create one using Insert → New Schema.
4. Frontend Hook Usage Add these lines in the component:

const schemaData = extractSitecoreFields(props.fields?.typeOfSchema); useRegisterSchema(schemaData);

The SchemaProvider handles merging and output automatically.

Note: If only schema data changes (not frontend logic), developers don’t need to redeploy.

Content Author Steps

1. Edit schema fields directly in Sitecore (in the associated schema item).
2. Save changes.
3. The updated JSON-LD is automatically reflected in the live app — no developer intervention required.

Template Structure

Base Schema fields

Organization schema

Data-source of Schema (Globally shared)

How Organization Schema is used in Homepage

Best Practices

• Use Schema.org standard field names (sku, not SKU).
• Group structured values logically (e.g., address → PostalAddress, price → Offer).
• Maintain proper relationships (e.g., Organization → Product via offers.seller).
• Always validate schema using Google’s Rich Results Test.

File Structure

src/lib/schema/
├── schema.tsx                # Provider & SchemaHead
├── sitecoreSchemaTransformer # Sitecore → JSON-LD
├── schemaRegistration.ts     # Schema type configurations
└── types/                    # TypeScript type definitions

Conclusion

This schema implementation brings automation and consistency to structured data management.

• Developers configure schema templates, base templates, and hooks once.
• Authors can independently manage schema data within Sitecore, with real-time reflection on the site.

The result is a system that ensures SEO-ready structured data, minimal maintenance, and maximum flexibility — all powered by a clean, component-driven architecture.