Highlights
foura.ai działa teraz w sześciu językach. Strona, Dashboard chrome oraz dziewięć stron marketingowych zostały wyodrębnione, przetłumaczone i przebudowane tak, aby serwować odpowiednią wersję językową na podstawie URL. Otwórz mapę strony w przeglądarce, a wyrenderuje się jako ostylowana tabela zamiast surowego kodu XML.
What's New
The site speaks six languages
Angielski, bułgarski, niemiecki, polski, wietnamski i chiński. Routing z prefiksami URL oznacza, że każda lokalizacja ma własną ścieżkę: /de/, /pl/, /zh/ i tak dalej. Główna ścieżka obsługuje język angielski, a /en/ przekierowuje na nią, dzięki czemu istnieje tylko jeden kanoniczny URL dla każdej angielskiej strony. Ikona globu w górnej nawigacji pozwala na zmianę języka, a Twój wybór jest zapamiętywany na kolejnych podstronach.
Server-side rendering wykonuje najcięższą pracę pod kątem SEO. Każda strona zawiera teraz poprawny atrybut lang, pełny zestaw tagów hreflang, metadane Open Graph specyficzne dla danej lokalizacji oraz przetłumaczony <title> i <meta description>. Mapa strony zawiera każdy URL dla wszystkich wersji językowych. Wyszukiwarki, które preferują konkretną lokalizację (Baidu oczekuje języka chińskiego, polska wersja wyszukiwarki chce języka polskiego), otrzymują teraz właściwą stronę już przy pierwszym indeksowaniu.
Liczba mnoga ICU działa dokładnie tak, jak się spodziewasz. „1 API key” pozostaje w liczbie pojedynczej, „2 API keys” przechodzi w liczbę mnogą, a reguła zmienia się w zależności od języka. Polski ma trzy formy liczby mnogiej, angielski dwie, a chiński jedną. Parser uruchomieniowy korzysta z Intl.PluralRules, czyli wbudowanego API przeglądarki, więc do Twojego bundle'a nie trafił żaden dodatkowy kod.
A jeśli czytasz po angielsku, nic się widocznie nie zmienia. Twoje adresy URL pozostają na swoim miejscu.
Playground UI is localized
Około 80 ciągów znaków w narzędziu Playground (etykiety, wskazówki, placeholdery, tooltipy) dostosowuje się teraz do wybranej lokalizacji. Treści techniczne celowo pozostają po angielsku: nazwy metod HTTP, przykłady kodu, klucze JSON, nazwy headerów, kody statusu oraz wartości wklejane do requestu wyglądają tak samo w każdej wersji językowej. Interfejs wokół nich mówi w Twoim języku, ale warstwa przesyłu danych pozostaje po angielsku.
Ten podział ma znaczenie. Każdy, kto debuguje request w zespole o różnych językach ojczystych, może skopiować treść requestu i porównać ją z dokumentacją bez obaw o błędy w tłumaczeniu.
Sitemap renders as a table
Wklej https://foura.ai/sitemap.xml w kartę przeglądarki, a zobaczysz ostylowaną tabelę w ciemnym motywie FourA zamiast surowego kodu XML. Dodaliśmy arkusz stylów XSLT, który obsługuje zarówno pojedyncze mapy stron, jak i indeks map stron.
Powód, dla którego tego potrzebowaliśmy: przeglądarki przestały renderować zlokalizowane mapy stron jako swoje wbudowane, ostylowane drzewo, gdy tylko pojawiają się wpisy <xhtml:link> dla alternatywnych wersji językowych. Wybór brzmiał: albo dostarczyć mapę strony bez alternatywnych wersji (i stracić sygnał SEO łączący lokalizacje), albo wyrenderować własne style. Wybraliśmy to drugie rozwiązanie. Boty indeksujące ignorują arkusz stylów i analizują XML tak jak dotychczas, więc dla nich nic się nie zmienia.
Mapa strony to prawdziwa strona w prawdziwej witrynie. Powinna tak właśnie wyglądać.
Under the Hood
Tłumaczenia pochodzą z automatycznego pipeline'u. W repozytorium zapisujemy tylko angielskie ciągi źródłowe. Po scaleniu (merge) do gałęzi main pipeline generuje wszystkie pozostałe lokalizacje i zapisuje wynik. Poprawka tekstu trafia w jedno miejsce i rozchodzi się na sześć języków.
Warto wspomnieć o jednej poprawce błędu. Pierwsze wdrożenie z lokalizacją na krótko wysłało na produkcję surowe placeholdery tłumaczeń (zamiast nagłówka pojawiało się home.h1a), ponieważ na etapie build brakowało katalogu locales. Wdrożyliśmy poprawkę i sprawiliśmy, że proces build odczytuje katalog locales przed utworzeniem bundle'a, więc to się nie powtórzy.
Strona dostępna w sześciu językach to strukturalnie sześć różnych witryn. Wyszukiwarki, czytniki ekranu oraz klient z Warszawy, który szuka w Google po polsku, zyskują na tym, że odpowiednia wersja językowa trafia pod właściwy URL wraz z poprawnymi metadanymi. Warstwa przesyłu danych pozostaje bez zmian, a interfejs wychodzi naprzeciw każdemu czytelnikowi tam, gdzie tego potrzebuje.