Highlights
foura.ai ist jetzt in sechs Sprachen verfügbar. Die Website, das Dashboard-Chrome und die neun Marketing-Seiten wurden extrahiert, übersetzt und neu verdrahtet, um basierend auf der URL das richtige Locale auszuliefern. Öffne die Sitemap in einem Browser und sie wird als gestaltete Tabelle statt als rohes XML gerendert.
Was gibt es Neues
Die Website spricht sechs Sprachen
Englisch, Bulgarisch, Deutsch, Polnisch, Vietnamesisch und Chinesisch. URL-Präfix-Routing bedeutet, dass jedes Locale unter einem eigenen Pfad liegt: /de/, /pl/, /zh/ und so weiter. Der nackte Pfad bedient Englisch, und /en/ leitet darauf weiter, sodass es nur eine kanonische URL pro englischer Seite gibt. Eine Erdkugel in der oberen Navigation lässt dich wechseln, und deine Auswahl bleibt über Seiten hinweg bestehen.
Serverseitiges Rendering übernimmt die Hauptarbeit für SEO. Jede Seite wird jetzt mit einem korrekten lang-Attribut, einem vollständigen hreflang-Set, locale-spezifischen Open Graph-Metadaten sowie einem lokalisierten <title> und einer <meta description> ausgeliefert. Die Sitemap legt jede URL über alle Locales hinweg offen. Suchmaschinen, die ein bestimmtes Locale bevorzugen (Baidu will Chinesisch, die polnische Version einer Suchmaschine will Polnisch), erhalten nun direkt beim ersten Crawling die richtige Seite.
ICU-Plurale funktionieren wie erwartet. „1 API-Key“ bleibt Singular, „2 API-Keys“ wird Plural, und die Regel ändert sich je nach Sprache. Polnisch hat drei Pluralformen, Englisch hat zwei, Chinesisch hat eine. Der Runtime-Resolver nutzt Intl.PluralRules, eine integrierte Browser-API, sodass kein zusätzlicher Code in dein Bundle geladen wird.
Und wenn du auf Englisch liest, ändert sich optisch nichts. Deine URLs bleiben, wo sie waren.
Playground-UI ist lokalisiert
Rund 80 Strings im Playground-Tool (Labels, Hinweise, Platzhalter, Tooltips) folgen nun dem von dir ausgewählten Locale. Technische Inhalte bleiben absichtlich auf Englisch: HTTP-Methodennamen, Codebeispiele, JSON-Keys, Header-Namen, Statuscodes und die Werte, die du in einen Request einfügst, lesen sich in jedem Locale gleich. Die UI drumherum spricht deine Sprache; die Datenübertragung bleibt Englisch.
Diese Trennung ist wichtig. Wer einen Request in einem Team debuggt, das keine gemeinsame Muttersprache hat, kann den Request-Body trotzdem kopieren und ohne Übersetzungsabweichungen mit der Dokumentation abgleichen.
Sitemap wird als Tabelle gerendert
Ziehe https://foura.ai/sitemap.xml in einen Browser-Tab und du siehst eine gestaltete Tabelle im Dark-Theme von FourA statt rohem XML. Wir haben ein XSLT-Stylesheet hinzugefügt, das sowohl einzelne Sitemaps als auch den Sitemap-Index verarbeitet.
Der Grund, warum wir das brauchten: Browser hörten auf, lokalisierte Sitemaps als ihren integrierten gestalteten Baum darzustellen, sobald <xhtml:link>-Einträge für alternative Locales auftauchten. Wir hatten die Wahl, entweder eine Sitemap ohne Alternativen auszuliefern (und das SEO-Signal zu verlieren, das die Locales verbindet) oder unser eigenes Styling zu rendern. Also haben wir uns für Letzteres entschieden. Crawler ignorieren das Stylesheet und parsen das XML wie zuvor, für sie ändert sich also nichts.
Eine Sitemap ist eine echte Seite auf einer echten Website. Sie sollte auch so aussehen.
Unter der Haube
Übersetzungen kommen aus einer automatisierten Pipeline. Wir committen nur die englischen Quell-Strings; beim Merge in den Main-Branch generiert die Pipeline jedes andere Locale und committet das Ergebnis. Eine Textkorrektur erfolgt an einer Stelle und verbreitet sich über sechs Sprachen.
Ein erwähnenswerter Bugfix: Das erste lokalisierte Deployment lieferte kurzzeitig rohe Übersetzungsplatzhalter an die Produktion aus (man sah home.h1a anstelle der Überschrift), weil im Build-Schritt das Locales-Verzeichnis fehlte. Wir haben den Fix festgeschrieben und den Build so angepasst, dass er das Locales-Verzeichnis vor der Erstellung des Bundles liest, damit sich das nicht wiederholen kann.
Eine Website, die in sechs Sprachen ausgeliefert wird, ist strukturell gesehen sechs verschiedene Websites. Suchmaschinen, Screenreader und Kunden in Warschau, die auf Polnisch googeln, profitieren alle davon, wenn das richtige Locale mit den richtigen Metadaten an der richtigen URL ankommt. Die Datenübertragung bleibt gleich; die Oberfläche holt jeden Leser dort ab, wo er ist.