StructuredData

The StructuredData component injects Schema.org JSON-LD scripts into the page <head>. It relies on centralized configuration helpers so SEO metadata stays consistent across the site.

Overview

Type: Utility component
Category: SEO
Complexity: Moderate
File: src/components/StructuredData.astro
Data config: src/data/structuredData.config.ts

Features

Config-driven schemas - Generates JSON-LD from typed helpers
Selective output - Choose organization, website, and event schemas
Reusable in layouts - Default usage lives in the main layout

Props

Prop	Type	Required	Default	Description
`schemas`	`(‘organization'	'website'	'event’)[]`	No

Usage

Import the component in a layout or page:

---
import StructuredData from '@/components/StructuredData.astro';
---

Render the default schemas (organization + website) in the layout:
```
<StructuredData schemas={['organization', 'website']} />
```

Render event schema in a page head slot when needed:

<StructuredData schemas={['event']} slot="head" />

Configuration

The schema helpers live in src/data/structuredData.config.ts and expose these generators:

generateOrganizationSchema()
generateWebSiteSchema()
generateTriennialGathering2026EventSchema()
generateStructuredData() (wrapper that returns an array)

Rendering behavior

Outputs one <script type="application/ld+json"> per schema
Uses set:html to inject JSON safely
Designed to be placed in the <head> via layout or slot

Used on

src/layouts/Layout.astro - Default organization and website schemas
src/pages/triennial-gathering-2026.astro - Event schema override

Modal - Unrelated UI component but often used on the same pages
EventHeaderSection - Event landing page section

Source code

View the complete implementation:

https://github.com/poncardasm/finan-website/blob/main/src/components/StructuredData.astro
https://github.com/poncardasm/finan-website/blob/main/src/data/structuredData.config.ts