Astroサイトを快適にする「自動言語振り分け」の仕組み
Astroは、非常に高速なウェブサイトを構築できる静的サイト生成を得意とするフレームワークです。このAstroで作られた多言語サイトにおいて、訪問者が普段使っている言語のページを最初から自動で表示させることは、快適な利用体験に直結します。
これを実現するために、Astroの静的なページ配信と、Cloudflare Pagesのエッジ関数であるFunctionsを組み合わせます。この手法を用いることで、Astroの強みである表示速度を落とすことなく、最適な言語ページへ訪問者を案内することが可能になります。
アクセスからAstroのページが表示されるまでの裏側の動き
ユーザーがサイトにアクセスした際、Astroが生成したHTMLが表示される直前に、Cloudflareのミドルウェアが通信をキャッチして言語の判定を行います。
具体的には、サイトの入り口であるルートパスや、言語の指定が含まれないパスへのアクセスを対象とします。すでに英語ページなどの特定の言語ページにいる場合は処理をスキップすることで、無限に転送が繰り返されるのを防ぎます。入り口の案内人が、訪問者の持つ情報を見て瞬時に適切な言語のディレクトリへ案内しているようなイメージです。
最適な言語を見極める3つの基準と優先順位
ユーザーにとって最も使いやすい言語を決定するために、システムは以下の3つの優先順位に従って判定を行います。この基準が、使い勝手を大きく左右する重要な部分です。
-
最優先されるのはユーザー自身の選択を記録したCookie
過去にそのサイト上で、ユーザー自身が言語切り替えスイッチなどで手動で選んだ記録がある場合、その情報を最優先します。システムによる自動判定よりも、ユーザーの明確な意志を尊重するためです。
-
初めての訪問時はブラウザの言語設定であるAccept-Language
手動で選んだ記録が存在しない初回訪問時などは、ユーザーが使用しているブラウザの基本言語設定を参照します。その設定情報から対応している言語コードを特定し、自動的に振り分けます。
-
判定できない場合のデフォルト設定
ブラウザの言語情報で判定不能な場合や、Astroサイト側がサポートしていない言語からのアクセスだった場合は、あらかじめ設定しておいた日本語などの基本となる言語を適用します。
ユーザー自身による言語切り替えの仕組み
自動振り分けだけでなく、画面上の設定などを使って手動で言語を変更した場合の仕組みも機能させます。
ユーザーが特定の言語を選択すると、JavaScriptを用いてその言語コードをブラウザの保存領域であるCookieに書き込み、同時にAstroの該当する言語ディレクトリへ画面を遷移させます。一度この情報が保存されると、次回以降アクセスした際には前述の第1優先のルールが働き、ブラウザの設定よりも保存されたデータが優先して参照されるようになります。
Astroの静的配信を維持するメリットとSEOへの配慮
この仕組みをAstroに導入する最大の利点は、アクセスがあるたびにサーバー側でページを生成する仕組みへ移行する必要がないことです。事前に構築された静的なHTMLをそのまま配信できるため、Astro特有の高速なページ表示を維持できます。
また、Astroの各言語ページのHTMLには、検索エンジンに対して別の言語版も存在すると正しく伝えるためのhreflang属性と呼ばれるコードを記述します。これにより、各言語の利用者が検索結果から自分に合った言語のAstroページへたどり着きやすくなります。