ハイライト
foura.aiが6言語に対応しました。サイト、DashboardのUI、および9つのマーケティングページが抽出、翻訳され、URLに基づいて適切なロケールを提供するように再配線されました。ブラウザでサイトマップを開くと、生のXMLではなく、スタイル適用されたテーブルとしてレンダリングされます。
新機能
サイトが6言語に対応
英語、ブルガリア語、ドイツ語、ポーランド語、ベトナム語、中国語に対応しました。URLプレフィックスルーティングにより、各ロケールは独自のパス(/de/、/pl/、/zh/など)に配置されます。プレフィックスなしのパスは英語を提供し、/en/はそこへリダイレクトされるため、英語のページごとに正規のURLは1つだけになります。上部ナビゲーションの地球儀アイコンから切り替えることができ、選択した言語はページをまたいで保持されます。
サーバーサイドレンダリングがSEOの重労働を担います。すべてのページに、正しいlang属性、完全なhreflangセット、ロケール固有のOpen Graphメタデータ、およびローカライズされた<title>と<meta description>が提供されるようになりました。サイトマップは、すべてのロケールにわたるすべてのURLを公開します。特定のロケールを優先する検索エンジン(Baiduは中国語、検索エンジンのポーランド版はポーランド語を求めるなど)は、最初のクロールで適切なページを取得できるようになります。
ICUの複数形は期待通りに動作します。「1 API key」は単数形のまま、「2 API keys」は複数形になり、ルールは言語ごとに変わります。ポーランド語には3つの複数形があり、英語には2つ、中国語には1つあります。ランタイムリゾルバーはブラウザ組み込みのAPIであるIntl.PluralRulesを使用するため、バンドルに追加のコードは含まれません。
また、英語で読む場合、見た目の変化はありません。URLは以前のままです。
PlaygroundのUIをローカライズ
Playgroundツールの約80個の文字列(ラベル、ヒント、プレースホルダー、ツールチップ)が、選択したロケールに従うようになりました。技術的なコンテンツは意図的に英語のままにしています。HTTPメソッド名、コードサンプル、JSONのキー、ヘッダー名、ステータスコード、およびリクエストに貼り付ける値は、すべてのロケールで同じように表示されます。それらを取り囲むUIはユーザーの言語で表示されますが、通信データ(ワイヤー)は英語のままです。
この分離は重要です。母国語が異なるチーム間でリクエストをデバッグする場合でも、翻訳のズレを気にすることなく、リクエストボディをコピーしてドキュメントと照らし合わせることができます。
サイトマップをテーブルとしてレンダリング
ブラウザのタブにhttps://foura.ai/sitemap.xmlを貼り付けると、生のXMLではなく、FourAのダークテーマでスタイル適用されたテーブルが表示されます。個々のサイトマップとサイトマップインデックスの両方を処理するXSLTスタイルシートを追加しました。
これが必要になった理由は、<xhtml:link>の代替ロケール(alternate-locale)エントリが現れると、ブラウザがローカライズされたサイトマップを組み込みのスタイル付きツリーとしてレンダリングしなくなるためです。選択肢は、代替ロケールのないサイトマップを提供する(そしてロケールを紐付けるSEOシグナルを失う)か、独自のスタイリングをレンダリングするかのどちらかでした。そのため、私たちは後者を選択しました。クローラーはスタイルシートを無視して以前と同様にXMLを解析するため、クローラー側には何の影響もありません。
サイトマップは実際のサイト上の実際のページです。それらしく見えるべきです。
舞台裏
翻訳は自動化されたパイプラインから提供されます。私たちは英語のソース文字列のみをコミットします。mainブランチへのマージ時に、パイプラインが他のすべてのロケールを生成し、その結果をコミットします。1箇所でコピーを編集すれば、6つの言語すべてに反映されます。
特筆すべきバグ修正が1つあります。最初のローカライズデプロイでは、ビルドステージにlocalesディレクトリが不足していたため、生の翻訳プレースホルダーが一時的に本番環境にデプロイされてしまいました(見出しが表示されるべき場所にhome.h1aが表示されていました)。私たちはこの修正を確定させ、ビルド時にバンドルを生成する前にlocalesディレクトリを読み込むようにしたため、この問題が再発することはありません。
6言語で提供されるサイトは、構造的には6つの異なるサイトです。適切なメタデータとともに適切なURLに適切なロケールが届くことで、検索エンジン、スクリーンリーダー、そしてポーランド語でググるワルシャワの顧客のすべてが恩恵を受けます。通信データ(ワイヤー)は同じままですが、インターフェース(サーフェス)はそれぞれの読者に合わせた形で提供されます。