SEO mit Astro – Technische Grundlagen
Astro ist von Grund auf SEO-freundlich: statisches HTML, minimales JavaScript, schnelle Ladezeiten. Aber gute technische SEO erfordert mehr als Performance — Meta-Tags, strukturierte Daten, Canonical-URLs und eine saubere Sitemap müssen gezielt implementiert werden. Der Vorteil gegenüber WordPress: In Astro wird SEO-Infrastruktur einmalig sauber implementiert und läuft dann automatisch für alle Seiten — keine Plugin-Konflikte, keine Performance-Einbußen.
Meta-Tags und Open Graph
Meta-Tags (title, description, canonical, robots) und Open Graph (og:title, og:description, og:image) werden in Astro zentral in einer SEO-Komponente verwaltet. Jede Seite übergibt ihre spezifischen Werte als Props — Defaults greifen wenn keine spezifischen Werte gesetzt sind. Wichtige Regeln: Jede Seite hat einen einzigartigen Title und eine einzigartige Meta-Description. Der Canonical-Tag zeigt immer auf die kanonische URL der Seite. Das OG-Image ist mindestens 1200x630 px groß.
JSON-LD Structured Data
JSON-LD ist das von Google empfohlene Format für strukturierte Daten. In Astro wird JSON-LD als JavaScript-Objekt gebaut und als script type="application/ld+json" im head ausgegeben. Wichtig: Jeder JSON-LD-Block braucht @context: 'https://schema.org'. Ohne @context erkennt Google das Schema nicht als valide.
Organization — Unternehmensdaten global
Organization-Schema mit Name, URL, Logo, Adresse und Social-Links in BaseLayout einbinden — erscheint auf jeder Seite. Etabliert die Marke als bekannte Entität für Google.
WebSite — mit SearchAction
WebSite-Schema mit SearchAction ermöglicht die Sitelinks-Suchbox in Google. URL der Suche als template angeben.
BreadcrumbList — Navigation
BreadcrumbList-Schema zeigt den Navigationspfad in den Suchergebnissen. In Astro aus dem aktuellen URL-Pfad automatisch generieren — jedes Segment wird zum BreadcrumbList-Item.
Article / TechArticle — für Artikel
Article-Schema mit headline, author, datePublished, dateModified und publisher. TechArticle als Subtyp für technische Inhalte. speakable-Markup für GEO-Sichtbarkeit ergänzen.
FAQPage — für FAQ-Blöcke
FAQPage-Schema macht FAQ-Inhalte direkt in den Suchergebnissen sichtbar (FAQ Rich Results). Jede Frage und Antwort als mainEntity-Item. Wichtig: Antworten müssen vollständig sein, keine Teaser.
LocalBusiness — für lokale Unternehmen
LocalBusiness-Schema mit vollständiger Adresse (NAP), Geo-Koordinaten und Öffnungszeiten. Auf Kontakt- und Impressum-Seite einbinden. Stärkt lokales Ranking.
Sitemap mit @astrojs/sitemap
Die offizielle Astro-Integration @astrojs/sitemap generiert automatisch eine sitemap.xml aus allen öffentlichen Seiten. Konfiguration in astro.config.mjs: site muss gesetzt sein, damit absolute URLs generiert werden. Seiten die nicht in der Sitemap erscheinen sollen (noindex-Seiten, Auth-Routen) werden automatisch ausgeschlossen wenn robots: 'noindex' in den Meta-Tags gesetzt ist.
Core Web Vitals mit Astro optimieren
Astros Zero-JS-default ist der größte Performance-Vorteil. Aber auch mit Astro können schlechte Core Web Vitals entstehen wenn Bilder nicht optimiert, Fonts nicht korrekt geladen oder React-Islands zu früh hydratisiert werden.
LCP
astro:assets Image-Komponente, loading=eager + fetchpriority=high für Hero-Bilder
INP
client:idle statt client:load für unkritische Islands
CLS
Explizite width/height in Image-Komponenten, font-display: swap
TTFB
prerender=true für statische Seiten, Caching am Server
Bild-Optimierung mit astro:assets
Die eingebaute Image-Komponente aus astro:assets optimiert Bilder automatisch: AVIF und WebP-Varianten, responsive srcsets, lazy loading und korrekte Dimensionen für CLS-Vermeidung. Kein Extra-Plugin, keine Konfiguration. LCP-Bild (Hero, above the fold): loading="eager" fetchpriority="high". Alle anderen Bilder: loading="lazy" (Default).
Häufig gestellte Fragen
Generiert Astro automatisch Canonical-Tags?
Nein — Canonical-Tags müssen manuell in der SEO-Komponente gesetzt werden. Als Fallback kann Astro.url.href verwendet werden, aber für Seiten mit trailing slash oder query parameters sollte der Canonical explizit gesetzt werden.
Wie teste ich JSON-LD in Astro?
Google Rich Results Test (search.google.com/test/rich-results) prüft JSON-LD auf einer URL. Für lokale Entwicklung den generierten HTML-Quellcode inspizieren und den JSON-LD-Block in den Schema Markup Validator einfügen.
Wie update ich die Sitemap nach Inhaltsänderungen?
Die Sitemap wird bei jedem Build neu generiert. Bei SSR-Projekten mit statisch vorgerenderten Seiten (prerender=true) passiert das automatisch im Deployment. Bei reinen SSR-Projekten sollte die Sitemap über eine API-Route dynamisch generiert werden.
Funktioniert hreflang für mehrsprachige Astro-Sites?
Ja — mit @astrojs/i18n oder manuell. hreflang-Tags werden in der SEO-Komponente als Link-Tags im head ausgegeben. Bei mehrsprachigen Sites muss für jede Seite jede Sprachvariante als alternate angegeben werden.