Astro SEO: So rankt eine Astro-Website bei Google und wird von KI zitiert

Kurzes Quiz

Ist SEO das Richtige für Sie, und wie fangen Sie an?

Frage 1 von 425%

Suchen Menschen bei Google nach dem, was Sie verkaufen?

Ja, ich denke schonNein, es ist neu oder sehr speziellWeiß ich nicht

Astro SEO bedeutet, aus diesem sauberen HTML Seiten zu machen, die ranken. Googles Leitfaden zu den Grundlagen von JavaScript-SEO erklärt, dass JavaScript-Websites in drei Phasen verarbeitet werden (Crawling, Rendering, Indexierung), und hält fest, dass serverseitiges Rendering oder Pre-Rendering weiterhin eine sehr gute Idee ist, weil nicht alle Bots JavaScript ausführen können. Astro startet standardmäßig genau dort. Dieser Leitfaden deckt den Rest ab, Einstellung für Einstellung, jedes Verhalten geprüft in der offiziellen Astro-Dokumentation. Übrigens: Die Website sorank.com, die Sie gerade lesen, läuft mit Astro.

Ist Astro gut für SEO?

Ja, technisch gesehen. Astro rendert Komponenten beim Build zu HTML und entfernt das JavaScript, das Frameworks wie React oder Vue normalerweise an den Browser senden würden. Damit vermeiden Sie die klassischen Probleme aus unserem Leitfaden zu JavaScript-SEO: leere HTML-Hüllen, Inhalte, die erst nach dem Rendering erscheinen, Links ohne echte Anker-Tags. Auch die Routing-Fallen einer Single-Page-Application entfallen, denn jede Astro-Route ist eine echte URL mit eigener HTML-Datei.

Ebenso wichtig ist, was Astro nicht tut. Es gibt kein eingebautes SEO-Plugin, keine automatische Meta-Beschreibung, kein automatisches Canonical-Tag und keine strukturierten Daten. Die Tabelle trennt, was Sie geschenkt bekommen, von dem, was Sie selbst bauen.

Statisches oder Server-Rendering: Welcher Modus ist besser für SEO?

Die Astro-Dokumentation zum On-Demand-Rendering ist eindeutig: Standardmäßig werden Seiten, Routen und API-Endpunkte beim Build als statische Seiten vorgerendert. Für SEO ist die statische Ausgabe die sicherste Wahl: Jede URL ist eine fertige HTML-Datei, ausgeliefert über ein CDN, schnell und für jeden Besucher und jeden Bot identisch.

On-Demand-Rendering (auf dem Server) braucht einen Adapter für Ihren Hoster (zum Beispiel Node, Netlify, Vercel oder Cloudflare). Dann nehmen Sie eine einzelne Route mit export const prerender = false vom Pre-Rendering aus oder stellen das ganze Projekt mit output: 'server' um und schalten statische Seiten einzeln wieder ein. Beide Modi liefern vollständiges HTML, Google sieht also dasselbe. Die Unterschiede liegen woanders:

• Geschwindigkeit: Eine statische Datei wird sofort ausgeliefert; eine serverseitig gerenderte Seite hängt von der Antwortzeit des Servers ab, die auf den Largest Contentful Paint drückt.
• Aktualität: Server-Rendering passt zu Seiten, die sich ständig ändern (Lagerbestand, Preise, Suchergebnisse), bei denen ein neuer Build zu langsam wäre.
• Werkzeuge: Manche Integrationen, etwa die Sitemap, sehen dynamische Server-Routen nicht (siehe unten).

Die Faustregel: Marketingseiten, Blogartikel und Dokumentation bleiben statisch, und nur Routen mit Live-Daten werden bei Bedarf gerendert. Die Astro-Dokumentation empfiehlt dasselbe und rät, beim statischen Standardmodus zu bleiben, bis die meisten Seiten On-Demand-Rendering brauchen.

Wie richtet man Meta-Tags und Canonical-URLs in Astro ein?

Erstellen Sie eine einzige SEO-Komponente (oft BaseHead oder Seo genannt) und binden Sie sie in den Head jedes Layouts ein. Sie erhält Titel, Beschreibung, ein optionales Bild und ein optionales Noindex-Kennzeichen und gibt aus:

1. das Title-Tag, eindeutig pro Seite, mit dem Hauptkeyword weit vorne;
2. die Meta-Beschreibung, für jede Seite von Hand geschrieben (sie ist Ihr Snippet in den Suchergebnissen);
3. das Canonical-Tag als absolute URL aus Astro.url.pathname und dem Wert site Ihrer Konfiguration;
4. Open-Graph- und Social-Tags (Titel, Beschreibung, Bild, URL) für Link-Vorschauen;
5. ein Robots-Meta-Tag, wenn eine Seite aus dem Index bleiben soll.

Setzen Sie zuerst die Option site in astro.config.mjs: Canonical, Sitemap und Social-Tags hängen davon ab. Legen Sie dann eine trailingSlash-Regel fest ('always' oder 'never') und bleiben Sie dabei, damit /blog/artikel und /blog/artikel/ nie als zwei Versionen derselben Seite konkurrieren. Entfernen Sie Query-Strings aus dem Canonical, damit Tracking-Parameter keine Duplikate erzeugen.

Wie erzeugt man Sitemap und robots.txt mit Astro?

Nutzen Sie die offizielle Integration, dokumentiert auf der Seite zu @astrojs/sitemap. Der Befehl npx astro add sitemap installiert sie und trägt sie in die Konfiguration ein. Sie setzt die Option site voraus und schreibt beim Build eine Datei sitemap-index.xml, die auf nummerierte Dateien verweist (sitemap-0.xml, bei großen Websites weitere). Jede Datei enthält standardmäßig bis zu 45.000 Einträge, einstellbar über die Option entryLimit. Falls das Format neu für Sie ist: Unser Glossareintrag zur XML-Sitemap erklärt, was Google damit macht.

Drei Einstellungen zählen für SEO:

• filter: eine Funktion, die jede Seiten-URL erhält; geben Sie false zurück für Danke-Seiten, interne Suche, Entwürfe und alles mit Noindex, damit die Sitemap nur indexierbare URLs enthält.
• i18n: ordnet Ihre Sprachordner Sprachcodes zu und ergänzt jeden Eintrag um hreflang-Alternativen.
• customPages: fügt URLs hinzu, die die Integration nicht selbst findet.

Für die robots.txt reicht auf den meisten Websites eine statische Datei im Ordner public. Unterscheidet sich der Inhalt zwischen Staging und Produktion, erzeugen Sie sie besser über einen Endpunkt (src/pages/robots.txt.ts). In beiden Fällen gehört eine Sitemap-Zeile mit Verweis auf sitemap-index.xml hinein, und vor dem Launch testen Sie das Ergebnis mit einem robots.txt-Checker. Mit derselben Endpunkt-Technik entsteht eine llms.txt-Datei; unser Leitfaden zum Einrichten einer llms.txt-Datei beschreibt ihren Inhalt.

Wie geht man in Astro mit hreflang und mehrsprachigen Websites um?

Das eingebaute i18n-Routing von Astro erledigt die URL-Seite. In der Konfiguration deklarieren Sie eine defaultLocale und eine Liste von locales und entscheiden, ob auch die Standardsprache ein Präfix erhält (prefixDefaultLocale). Hilfsfunktionen wie getRelativeLocaleUrl bauen lokalisierte Links, und Astro.currentLocale sagt jeder Seite, in welcher Sprache sie ist.

Der Routing-Leitfaden behandelt hreflang-Tags im Head nicht, planen Sie also ein, sie selbst in der SEO-Komponente zu schreiben: pro Seite ein Alternate-Link je Sprachversion plus ein x-default, alles als absolute URLs, und jede Version muss alle anderen auflisten (Rückverweise). Wer sie aus derselben Sprachliste wie das Routing erzeugt, vermeidet den häufigsten Fehler, eine Alternative auf eine nicht existierende Seite. Um die Logik an ein paar URLs zu prüfen, liefert unser hreflang-Generator den kompletten Tag-Satz einer Seite. Aktivieren Sie danach die i18n-Option der Sitemap als zweites Signal.

Wie wirken sich Bilder und Islands auf Geschwindigkeit und Core Web Vitals aus?

Bei der Geschwindigkeit gewinnt Astro am meisten, und das zeigt sich in den Core Web Vitals. Der Bilder-Leitfaden von Astro beschreibt die Image-Komponente aus astro:assets: Sie optimiert lokale Bilder, konvertiert ihr Format, setzt Lazy Loading und asynchrones Dekodieren und ermittelt die Bildmaße, um Cumulative Layout Shift zu vermeiden. Das Alt-Attribut ist dort Pflicht, was eine Grundregel der Bild-SEO durchsetzt. Die Picture-Komponente geht weiter und liefert AVIF oder WebP mit Fallback.

Zwei Gewohnheiten runden das ab. Legen Sie zu optimierende Bilder in src ab (Dateien in public werden unverändert ausgeliefert). Und laden Sie das Hauptbild oben auf der Seite nicht verzögert, sondern sofort, damit es den Largest Contentful Paint nicht bremst.

Die Islands-Architektur hält JavaScript im Zaum. Eine Komponente bleibt statisches HTML, bis Sie eine Client-Direktive hinzufügen: client:load hydriert sie sofort, client:idle, sobald der Browser frei ist, client:visible erst, wenn sie in den sichtbaren Bereich kommt. client:load nur für das zu verwenden, was sofort reagieren muss (Menü, Warenkorb), ist der einfachste Weg, Interaction to Next Paint zu schützen. Server Islands (server:defer) laden einen personalisierten Block nach der gecachten Seite, ohne den Hauptinhalt zu bremsen.

Wie fügt man einer Astro-Website strukturierte Daten hinzu?

Astro hat keine Schema-Funktion, was Ihnen volle Kontrolle lässt. Bauen Sie pro Seitentyp ein JavaScript-Objekt (Article, Product, Organization, BreadcrumbList, FAQPage) und geben Sie es in einem Script-Tag vom Typ application/ld+json aus, mit der Direktive set:html und JSON.stringify, damit das JSON nicht maskiert wird. Speisen Sie es aus denselben Frontmatter- oder Collection-Daten wie die sichtbare Seite: So passt das Markup immer zu dem, was Nutzer sehen, eine Vorgabe aus Googles Richtlinien zum Schema-Markup.

Um das JSON für einen neuen Seitentyp zu entwerfen, liefert unser kostenloser Schema-Generator einen gültigen Startblock, den Sie dann in eine Vorlage umbauen. Prüfen Sie nach jeder Änderung an der Vorlage eine Stichprobe gebauter Seiten mit Googles Test für Rich-Suchergebnisse.

Wie handhabt man Weiterleitungen bei der Migration zu Astro?

Migrationen von WordPress oder Next.js sind der riskanteste Moment für eine Astro-Website. Behalten Sie jede URL mit Traffic oder Backlinks und ordnen Sie die übrigen einzeln ihrem nächsten Gegenstück mit permanenten Weiterleitungen zu, wie in unserem Leitfaden zu SEO-Weiterleitungen beschrieben.

Die Astro-Konfiguration akzeptiert ein Objekt redirects, das alte Pfade neuen zuordnet. Mit einem Adapter werden daraus echte HTTP-Weiterleitungen. Bei einem rein statischen Build schreibt Astro stattdessen eine HTML-Seite mit Meta-Refresh, der Google folgt, die es aber als schwächeres Signal wertet als eine serverseitige 301. Für eine statische Website deklarieren Sie die Weiterleitungen im Format Ihres Hosters (eine Datei _redirects bei Netlify oder Cloudflare Pages, vercel.json bei Vercel), damit Crawler eine echte 301 erhalten.

Wie hilft Astro bei SEO und GEO?

Von ChatGPT, Perplexity oder Gemini zitiert zu werden, beginnt mit Lesbarkeit. Viele KI-Crawler holen das rohe HTML, ohne JavaScript auszuführen; eine Website, die ihren gesamten Text schon in der ersten Antwort liefert, wie Astro standardmäßig, räumt also eine Hürde aus dem Weg, die clientseitig gerenderte Websites noch haben. Klare Zwischenüberschriften, Absätze mit der Antwort am Anfang, strukturierte Daten und eine llms.txt machen jede Seite dann leichter zitierbar.

Messen Sie nach dem Launch, statt zu raten. Das GEO- und SEO-Dashboard von Sorank bündelt Ihre Search-Console-Daten und Ihre Besuche aus KI-Assistenten, damit Sie sehen, ob die neue Website ihre Positionen hält.

Technische Qualität zahlt sich nur mit Inhalten aus, die ranken können. Der KI-Generator für Blogartikel von Sorank schreibt und veröffentlicht Artikel, die für Google und KI-Assistenten optimiert sind, und verbindet sich per Webhook mit individuellen Websites wie einem Astro-Projekt.

Astro liefert standardmäßig schnelles, crawlbares HTML; das Ranking hängt weiterhin von Head-Tags, Sitemap, hreflang, strukturierten Daten und Weiterleitungen ab, die Sie ergänzen. Richten Sie zuerst die gemeinsame SEO-Komponente und die Sitemap ein und gehen Sie vor dem Launch die Tabelle oben durch.