Eine React-Website übersetzen: crawlbare Sprachversionen jenseits von i18n-Bibliotheken

React-i18n-Bibliotheken lösen das Laden von Texten, doch mehrsprachige SEO erfordert indexierbares HTML unter eigenen URLs je Sprachversion. Rein clientseitige Sprachumschalter auf einer einzigen SPA-Route verbergen alternative Sprachversionen vor Google und führen bei der Hydration oft dazu, dass kurzzeitig die falsche Sprache angezeigt wird.

Die kurze Antwort: indexierbares HTML je Sprach-URL

Um eine React-Website für Suchmaschinen zu übersetzen: Vollständiges HTML unter einer eigenen URL je Sprachversion ausliefern. Google empfiehlt unterschiedliche crawlbare URLs pro Sprache statt einer Steuerung allein über Cookies oder die Browsersprache. react-i18next oder ähnliche Bibliotheken sind notwendig, reichen aber nicht aus – eine Routing- und Rendering-Strategie wird weiterhin benötigt.

Wenn die Hauptinhalte erst erscheinen, nachdem JavaScript die Sprache erkannt hat, sehen Crawler möglicherweise keine vollständige Sprachversion. SSR, SSG, Prerendering oder ein Meta-Framework (Next.js, Remix) schließen diese Lücke.

Warum SPA-Sprachumschalter für SEO nicht ausreichen

Klassische create-react-app-SPAs liefern nur ein minimales index.html aus und hydratisieren übersetzte Texte auf der Clientseite. Crawler rufen eine URL ab; sie führen nicht zuverlässig jeden Sprachzweig aus. Sprachversionen benötigen eigene crawlbare URLs. Rein clientseitige Sprachumschalter unter einer einzigen URL widersprechen Googles Empfehlungen für mehrsprachige Websites.

Eine per Cookie oder localStorage festgelegte Sprache auf /app/dashboard ohne URL-Wechsel verursacht bei öffentlichen Marketingseiten dasselbe Problem. Werden Hauptinhalte erst nach der Spracherkennung durch JavaScript eingefügt, leidet die Indexierung.

Vermeiden Sie automatische Weiterleitungen auf Basis einer vermuteten Sprache. Bieten Sie stattdessen eine sichtbare Sprachauswahl mit Links zu /en/pricing und /de/preise an. Strategische Hintergründe finden Sie unter Internationale SEO versus mehrsprachige SEO.

Routing-Muster für Sprachversionen in React

Verwenden Sie React Router (oder den Router Ihres Frameworks) mit Sprachpräfixen:

• /en/products, /fr/produits
• Subdomain-Routing mit Zuordnung zum selben Routenbaum
• Separate Builds je Sprachversion für statische Websites

Google bestimmt die Seitensprache anhand sichtbarer Inhalte. Halten Sie jede Route überwiegend in einer Sprache, einschließlich Navigation und Footer. Passen Sie URL-Slugs nach Möglichkeit an die jeweilige Sprache an, um für Klarheit zu sorgen.

Optionen für SSR, SSG und Prerendering

Bei öffentlichen Seiten müssen übersetzte Texte bereits vor der Hydration in der HTML-Antwort enthalten sein. Client Components können interaktive Funktionen kapseln; Nutzenversprechen und Überschriften sollten serverseitig oder beim Prerendering gerendert werden.

Lokalisierte Metadaten und strukturierte Daten

Legen Sie <title>, Meta-Beschreibung, Canonical-, Open-Graph- und Twitter-Tags für jede sprachspezifische Route fest. Geben Sie beim Einsatz von React Helmet mit SSR die Tags auf dem Server aus. Verwenden Sie in Next.js generateMetadata. Lokalisierte Titel und Meta-Beschreibungen sollten nicht von einem clientseitigen Austausch abhängen.

Strukturierte Daten (WebSite, Product, FAQs) benötigen übersetzte Felder und korrekte Angaben für inLanguage. Stimmen Sie JSON-LD mit den sichtbaren Texten ab – Abweichungen verwirren Crawler und Nutzer.

Hreflang und Canonical-Tags

Fügen Sie für jede Route hreflang-Link-Elemente im Dokumentkopf ein, die sämtliche alternativen Sprachversionen einschließlich der eigenen auflisten. Die Hreflang-Verweise müssen innerhalb der Gruppe wechselseitig sein. Bei Duplikaten sollten Canonical-Tags auf die bevorzugte URL in derselben Sprache verweisen.

Generieren Sie bei umfangreichen SPA-Routenstrukturen hreflang über Build-Skripte oder xhtml:link-Einträge in der Sitemap. Unser Leitfaden zu SEO-optimierten mehrsprachigen Websites enthält Audit-Checklisten. XML-Sitemaps erleichtern das Auffinden von Seiten und können hreflang-Annotationen enthalten.

Content-Workflow über i18n-Bibliotheken hinaus

Bibliotheken verwalten Schlüssel; sie stellen jedoch weder die Einhaltung eines Glossars noch den Einsatz eines Translation Memory (TM) oder eine Prüfung sicher. Ergänzen Sie eine Übersetzungsplattform oder einen CAT-Workflow:

• JSON-/PO-Dateien regelmäßig exportieren
• Produktbegriffe in einem Glossar verbindlich festlegen
• Jede Sprachversion auf Staging-URLs prüfen
• Bei Änderungen am englischen Text erneut exportieren

Googles Leitlinien zu hilfreichen Inhalten priorisieren Seiten, die für Menschen erstellt wurden. Inhaltsarme Sprachversionen erfüllen diesen Anspruch auch bei korrektem Routing nicht.

Checkliste für die Implementierung

• Eigene URL je Sprachversion für alle öffentlichen Routen
• SSR, SSG oder Prerendering für das HTML von Marketingseiten
• Lokalisierte Metadaten in der initialen Serverantwort (Test per Quelltextansicht)
• Wechselseitige hreflang-Verweise und Canonicals je Sprachversion
• Sitemap-Einträge für die Sprachversionen bei der Search Console eingereicht
• Sichtbare Sprachauswahl (keine automatische Weiterleitung anhand der IP-Adresse)
• Hydration getestet: kein kurzzeitiges Aufblitzen englischer Inhalte
• Glossar und redaktionelle Prüfung für zentrale Inhaltsseiten

Auch die Bing Webmaster Guidelines betonen die Bedeutung crawlbarer, hilfreicher Inhalte und einer klaren Struktur.

Häufige Fehler

i18n ohne sprachspezifische Routen — eine URL, unsichtbare Sprachalternativen.

Helmet nur auf dem Client — leere Seitentitel in der Quelltextansicht.

Canonical-Verweis auf die englische Version bei übersetzten Routen — falsches Signal.

Automatische Weiterleitungen anhand von Accept-Language — Hürden für Crawler und Nutzer.

Nicht übersetztes Navigationsgerüst — gemischtsprachige Signale.

Nur die Startseite vorgerendert — Unterseiten bleiben für Bots leer.

Maschinelle Übersetzungen ungeprüft veröffentlicht — Sprachversionen mit wenig gehaltvollen Inhalten.

Grundlagen für klassische Suche und Antwortmaschinen

Die gemeinsamen Grundlagen für sprachspezifische React-URLs mit SSR/SSG statt rein clientseitiger Sprachumschaltung bleiben für Google, Bing und KI-Antwortmaschinen gleichermaßen wichtig: crawlbare Sprachversionen, klar definierte Entitäten, belegte Aussagen, strukturierte Daten, wo sie den tatsächlichen Inhalten entsprechen, und echte Lokalisierung statt rein englischsprachiger Seitengerüste. Die folgenden Leitfäden beleuchten denselben Qualitätsmaßstab für die mehrsprachige Bereitstellung aus plattformspezifischer Sicht.

Plattform-Leitfaden: Google Suche

Damit die Google-Suche Inhalte finden kann, braucht sie crawlbare URLs für die jeweiligen Sprach- und Marktversionen mit sprachlich passendem HTML, korrekten Seitentiteln und Überschriften sowie gegenseitigen Hreflang-Verweisen, sofern alternative Versionen existieren. Zu den technischen Grundlagen gehören indexierbare Inhalte statt rein Cookie-basierter Sprachumschalter, lokalisierte Metadaten, Sitemaps und ein konsequenter Einsatz von Canonical-Tags. Inhaltliche Qualität bedeutet, in jeder Sprache Hauptinhalte bereitzustellen, die den Menschen in den Mittelpunkt stellen. Autorität entsteht durch eine klar erkennbare Organisationsidentität und bestätigende Quellen – nicht durch Marketing für Übersetzungstools. Für mehrsprachige Websites heißt das: Jede markt- oder sprachspezifische URL muss für sich bestehen können. Zur Erfolgskontrolle dienen die Indexabdeckung in der Search Console und die URL-Prüfung je Sprach- oder Marktversion. Gesichert und ungewiss: Google dokumentiert den Umgang mit Mehrsprachigkeit und Hreflang, garantiert aber keine Rankings durch ein bestimmtes CMS oder einen MTPE-Workflow.

Plattform-Leitfaden: Bing

Bing findet und indexiert crawlbare mehrsprachige Seiten mit klarer Struktur. Die Anforderungen an eindeutige URLs und verständliche Inhalte ähneln denen von Google. Zu den technischen Grundlagen gehören abrufbare URLs für die jeweiligen Sprach- und Regionalversionen, nützliche Inhalte und die Überwachung mit Bing Webmaster Tools. Lokalisieren Sie Überschriften, Aussagen und FAQs, statt nur die Benutzeroberfläche zu übersetzen. Autoritätssignale hängen auch hier von vertrauenswürdigen Quellen und konsistent dargestellten Entitäten ab. Für mehrsprachige Websites heißt das: Verbergen Sie Sprachversionen nicht hinter einer rein clientseitigen Umschaltung. Messen Sie die Indexierung und Crawl-Statistiken in Bing Webmaster Tools. Gesichert und ungewiss: Die Bing-Richtlinien betonen crawlbare, nützliche Inhalte. Erfinden Sie keine Bing-spezifischen Rankingfaktoren für Übersetzungstools.

Plattform-Leitfaden: ChatGPT

ChatGPT kann öffentlich zugängliche Seiten zitieren oder zusammenfassen, wenn die Sprachversionen eindeutig sind und die Inhalte sich unmittelbar für Antworten eignen. Die Auffindbarkeit folgt keinem herkömmlichen, crawlbasierten Ranking; Sichtbarkeit zeigt sich darin, dass eine Seite als Quelle ausgewählt oder in Antworten referenziert wird. Die technische Grundlage bilden weiterhin zugängliche HTML-URLs – keine Widget-Overlays, die Texte verbergen. Hilfreich sind direkte Antworten, FAQs und eine durch Glossare vereinheitlichte Terminologie. Autorität entsteht durch Belege und konsistente Entitäten über alle Sprach- und Marktversionen hinweg. Für mehrsprachige Websites heißt das: Jede lokalisierte Seite sollte für sich verständlich sein. Die Messbarkeit ist begrenzt – Prüfungen auf Quellenverweise sollten als Hypothesentests betrachtet werden. Gesichert und ungewiss: Es gibt keine dokumentierte Garantie dafür, dass MTPE oder eine bestimmte CMS-Integration zu Quellenverweisen in ChatGPT führt.

Plattform-Leitfaden: Gemini

Für Gemini und verwandte KI-Angebote von Google sind konsistent dargestellte Entitäten, sachlich korrekte strukturierte Daten und indexierbare lokalisierte Seiten hilfreich. Bei Sichtbarkeit geht es darum, als Quelle herangezogen oder erkannt zu werden – nicht darum, Rankingfaktoren für Gemini zu erfinden. Die technischen Grundlagen überschneiden sich mit denen der Google Suche: Crawlbarkeit und hochwertige Metadaten. Inhalte sollten in jeder Sprache klare Aussagen und Definitionen liefern. Autorität hängt von einer konsistenten Darstellung der Organisation und bestätigenden Quellen ab. Für mehrsprachige Websites heißt das: Durch Glossare vereinheitlichte Produktnamen reduzieren Verwechslungen zwischen Sprach- und Regionalversionen. Nutzen Sie für die klassische Messung die Search Console und prüfen Sie ergänzend Stichproben von KI-Antworten qualitativ. Gesichert und ungewiss: Das Verhalten von Gemini ersetzt nicht die dokumentierten Empfehlungen der Google Suche zu hreflang und Sprachversionen.

Plattform-Leitfaden: Google AI Overviews

Google AI Overviews können auf Seiten verlinken, die ihre Aussagen stützen. Die Grundlage für eine mögliche Berücksichtigung bilden weiterhin indexierbare Inhalte, die Menschen in den Mittelpunkt stellen. Sie sind keine Sprachumschaltung und ersetzen hreflang nicht. Zu den technischen Grundlagen gehören weiterhin crawlbare HTML-Seiten für jede Sprach- und Regionalversion sowie wahrheitsgemäße strukturierte Daten. Wichtige inhaltliche Merkmale sind prägnante Antworten und klare Überschriften in jeder Sprache. Die Autoritätssignale entsprechen den Erwartungen an hilfreiche Inhalte. Für mehrsprachige Websites heißt das: Für keine übersetzte Seite ist die Aufnahme in AI Overviews garantiert. Nutzen Sie, sofern verfügbar, Berichte zu generativen Suchfunktionen in der Search Console und erfassen Sie klassische Indexierungskennzahlen separat. Gesichert und ungewiss: Kein Übersetzungsworkflow kann eine Platzierung in AI Overviews versprechen.

Wie GlotEO unterstützt

React-Teams, die über den bloßen Austausch von JSON-Dateien hinaus skalieren, brauchen Glossarverwaltung, redaktionelle Prüfung und SEO-Validierung. GlotEO lässt sich in moderne Tech-Stacks integrieren, während das Entwicklerteam das sprachspezifische Routing weiterhin selbst steuert. Informieren Sie sich bei der Planung mehrsprachiger React-Rollouts über KI-gestützte Website-Übersetzung und -Lokalisierung sowie über die Preise für Website-Übersetzungen.