Strukturierte Daten für Astro
Schema.org-Komponenten direkt in Astro – Article, FAQ, Product, Breadcrumb und mehr. Typsicher mit schema-dts, in zwei Zeilen integriert.
GitHubSchema.org-Komponenten direkt in Astro – Article, FAQ, Product, Breadcrumb und mehr. Typsicher mit schema-dts, in zwei Zeilen integriert.
npm install @casoon/astro-structured-dataWas ist @casoon/astro-structured-data?
Eine Sammlung von Astro-Komponenten, die Schema.org-JSON-LD für die häufigsten Seitentypen generieren. Typsicher mit schema-dts, kein Boilerplate, kein manuelles JSON. Ab v1.4.0 neu: RecipeSchema und VideoSchema.
Die Integration registriert eine Astro-Config mit globalen Defaults. Die Komponenten lesen diese Defaults und rendern das fertige <script type="application/ld+json">-Tag – kein manuelles JSON-Stringify mehr. Mit generateMeta: true werden zusätzlich Open-Graph-, Twitter-Card-, Canonical- und hreflang-Tags automatisch in den <head> gerendert.
Wann brauchst du das?
Strukturierte Daten verbessern Rich Results und KI-Sichtbarkeit – wenn sie korrekt implementiert sind.
Artikel-Seiten mit Rich Results
BlogPosting- und NewsArticle-Markup für jeden Artikel in der Content Collection – automatisch mit Publisher-Daten aus der globalen Konfiguration befüllt.
FAQ-Sektionen für Google
FAQPage-Markup direkt auf Landingpages und Service-Seiten – erhöht die Chancen auf erweiterte Suchergebnisse mit ausklappbaren Antworten.
Lokale Unternehmensseiten
LocalBusiness-Schema mit Adresse, Öffnungszeiten und GeoCoordinates für Firmen-Websites, die in der lokalen Suche sichtbar sein wollen.
E-Commerce-Produktseiten
Product-Schema mit Preis, Verfügbarkeit und Bewertung ermöglicht Produktkarten in Google Shopping und Suchergebnissen.
Integration in zwei Schritten
import structuredData from '@casoon/astro-structured-data';
export default defineConfig({
site: 'https://example.com',
integrations: [
structuredData({
defaultArticlePublisher: {
name: 'My Site',
logo: { '@type': 'ImageObject', url: 'https://example.com/logo.png' },
},
}),
],
}); ---
import { ArticleSchema, BreadcrumbSchema }
from '@casoon/astro-structured-data/components';
---
<ArticleSchema
title="Mein Artikel"
description="Kurzbeschreibung"
datePublished="2025-01-01"
authorName="Max Mustermann"
imageUrl="https://example.com/image.webp"
/>
<BreadcrumbSchema items={[
{ name: 'Home', url: 'https://example.com' },
{ name: 'Blog', url: 'https://example.com/blog/' },
]} />
Schema-Komponenten sind normale Astro-Komponenten – in jedem .astro-File verwendbar.
Verfügbare Schema-Komponenten
Alle Komponenten sind typsicher und rendern valides Schema.org-JSON-LD.
ArticleSchema
BlogPosting oder NewsArticle – Headline, Autor, Publisher mit Logo, Bild, Veröffentlichungs- und Änderungsdatum.
FAQSchema
FAQPage mit Question/Answer-Paaren – direkt in Google-Suchergebnissen als Rich Result angezeigt.
ProductSchema
Product mit Preis, Währung und Verfügbarkeit. Brand, Beschreibung und GTIN-Felder inklusive.
BreadcrumbSchema
BreadcrumbList aus einem einfachen `items`-Array – oder automatisch aus dem URL-Pfad mit AutoBreadcrumbSchema.
LocalBusinessSchema
LocalBusiness mit Adresse, Öffnungszeiten, Koordinaten und Kontaktdaten. Ideal für lokale SEO.
OrganizationSchema
Organization mit Logo, Social-Links, Adresse, Telefon und E-Mail. Baut auf dem globalen `defaultArticlePublisher` auf.
RecipeSchema
Recipe mit Zutaten, Schritt-für-Schritt-Anleitungen, Nährwerten, Zeiten und Bewertung – für Google Rezept-Rich-Results und KI-Suchen.
VideoSchema
VideoObject mit Thumbnail, Upload-Datum, Dauer, Content-URL und Aufrufzahlen – für Video-Rich-Results in der Google-Suche.
WebPageSchema
WebPage-Schema für Landing Pages, Legal-Seiten und alle Seiten ohne spezifischeren Typ – mit Author, Publisher, Dates und Robots-Direktiven.
WebSiteSchema & mehr
WebSite, Event, ProfilePage, JobPosting, SoftwareApplication, CollectionPage – der vollständige Schema.org-Werkzeugkasten für Astro.
Schema Graph
Mit `useGraph: true` werden alle Schemas zu einem optimierten `@graph`-Block zusammengefasst – weniger HTTP-Overhead, sauberere Entitäts-Verknüpfung.
Was steckt dahinter?
Mehr als nur JSON-stringify – eine durchdachte Integration in den Astro-Build-Prozess.
Typsicher mit schema-dts
Alle Schema.org-Typen kommen aus `schema-dts` – TypeScript meldet sofort, wenn ein Pflichtfeld fehlt oder ein Wert falsch typisiert ist.
Globale Defaults
Publisher, LocalBusiness und Brand einmal in `astro.config.mjs` definieren – alle Komponenten nutzen sie als Fallback.
Dev Toolbar Integration
Eigenes Panel im Astro Dev Toolbar: Google-Style Rich-Result-Preview für Article, FAQ, Product, Event, JobPosting, LocalBusiness & mehr – plus Validierungshinweise, Clipboard-Kopie und direkter Link zu validator.schema.org.
Zod-Validierung
Die Integration validiert die Optionen in `astro.config.mjs` zur Build-Zeit mit Zod. Ungültige Werte erzeugen klare Fehlermeldungen.
Automatische Meta-Tags
Mit `generateMeta: true` rendert die Integration Open-Graph-, Twitter-Card-, Canonical- und hreflang-Tags automatisch – kein manueller `<head>`-Aufwand.
calculateReadingTime
Utility-Funktion für Wortanzahl und Lesezeit aus Plaintext oder HTML – liefert direkt `wordCount`, `readingTimeMinutes` und `timeRequired` (ISO 8601) für `ArticleSchema`.
Build-Zeit-Warnungen
Mit `warnOnMissingRecommended: true` (Standard) scannt die Integration alle HTML-Ausgaben nach fehlenden empfohlenen Schema.org-Feldern und gibt gezielte Build-Warnungen aus.
Sitemap-Metadaten
Sitemap-Eigenschaften wie `changefreq` und `priority` werden als Data-Attribute am JSON-LD-Script-Tag kodiert – lesbar für `@casoon/astro-site-files` ohne separate Konfiguration.
Warum @casoon/astro-structured-data?
Strukturierte Daten manuell zu pflegen ist fehleranfällig – Tippfehler im @type, vergessene Pflichtfelder, falsche Datumsformate.
Kein Runtime-Overhead
JSON-LD wird statisch zur Build-Zeit gerendert. Im Browser landet kein Schema-Verarbeitungs-Code.
Astro-nativ
Normale `.astro`-Komponenten. Kein custom renderer, kein Framework-Lock-in, kein separates Tooling nötig.
Schema.org-konform
Alle Typen basieren auf `schema-dts` – der offiziellen TypeScript-Typisierung für Schema.org.
MIT-Lizenz
Open Source, kostenlos, keine Abhängigkeit von externen APIs oder bezahlten Diensten.
Ergänzend: Build-Zeit-Validierung mit post-audit
structured-data generiert das JSON-LD – post-audit prüft es beim Build. Mit structured_data: { check_json_ld: true } validiert @casoon/astro-post-audit Syntax, Semantik und cross-page Konsistenz der JSON-LD-Blöcke.
Im CASOON-Ökosystem
structured-data ist Teil einer Werkzeugkette aus Open-Source-Plugins – alle MIT-lizenziert, alle auf Astro ausgerichtet.
@casoon/astro-post-audit
Prüft Canonical, Headings, Meta-Tags, Open Graph, JSON-LD und Accessibility direkt beim Build.
@casoon/astro-site-files
Erzeugt robots.txt, sitemap.xml mit i18n-hreflang, llms.txt und security.txt beim Build.
@casoon/astro-speed-measure
Misst Build-Performance auf Ebene von Integrations, Vite-Plugins und Pages.
astro-v6-template
Monorepo-Starter mit allen CASOON-Plugins fertig konfiguriert. Cloudflare Workers, i18n, Playwright.
Häufige Fragen
Was ist JSON-LD und warum brauche ich es in Astro?
JSON-LD ist das von Google empfohlene Format für strukturierte Daten. Es teilt Suchmaschinen und KI-Systemen mit, was eine Seite bedeutet – Artikel, Produkt, FAQ, lokales Unternehmen. Richtig eingesetzt verbessert es Rich Results in der Suche und die Zitierwahrscheinlichkeit durch KI-Suchen.
Was ist der Unterschied zwischen Schema-Komponenten und dem generischen Schema-Import?
Die spezifischen Komponenten (ArticleSchema, FAQSchema etc.) bieten typisierte Props für die häufigsten Felder und befüllen Publisher-Defaults automatisch. Die generische `Schema`-Komponente akzeptiert ein beliebiges schema-dts-Objekt und eignet sich für Sonderfälle.
Was macht der @graph-Modus?
Mit `useGraph: true` registrieren alle Schema-Komponenten ihre Daten via `Astro.locals`. Am Ende rendert eine `SchemaGraph`-Komponente alles als einen `@graph`-Block. Das reduziert redundante `@context`-Angaben und ermöglicht sauberere Entitäts-Verknüpfungen über `@id`-Referenzen.
Funktioniert das Paket mit post-audit zusammen?
Ja. `@casoon/astro-post-audit` prüft nach dem Build ob JSON-LD vorhanden und syntaktisch korrekt ist. Beide Pakete sind Teil des CASOON Astro-Ökosystems und aufeinander abgestimmt.
Welche Astro-Versionen werden unterstützt?
Astro 5.x, 6.x und 7.x. Das Paket nutzt die `astro:config:setup`-Hook-API und Vite-Virtual-Modules – beides stabile Astro-APIs.
Was ist neu in Version 1.4.0?
Version 1.4.0 bringt zwei neue Schema-Komponenten: RecipeSchema (Recipe mit Zutaten, Schritten, Zeiten und Nährwerten – für Google Rezept-Rich-Results) und VideoSchema (VideoObject mit Thumbnail, Dauer und Aufrufzahlen – für Video-Rich-Results). Beide Schemas haben passende Zod-Exports (`recipeZodSchema`, `videoZodSchema`) und werden im Dev Toolbar angezeigt.
Wie berechne ich Lesezeit für ArticleSchema?
Das Paket exportiert `calculateReadingTime` aus `@casoon/astro-structured-data/utils`. Die Funktion erwartet einen Plaintext- oder HTML-String und gibt `wordCount`, `readingTimeMinutes` und `timeRequired` (ISO 8601, z. B. `PT4M`) zurück – direkt verwendbar als Props für `ArticleSchema`.
Ist das Paket kostenlos?
Ja. @casoon/astro-structured-data ist unter der MIT-Lizenz veröffentlicht und vollständig Open Source.