Mechanism for “Automatic Language Routing” to Enhance Astro Sites
Astro is a framework specializing in static site generation that allows for the construction of extremely fast websites. In a multilingual site built with Astro, automatically displaying the page in the language the visitor usually uses from the start directly leads to a comfortable user experience.
To achieve this, we combine Astro’s static page delivery with Cloudflare Pages’ edge functions, known as Functions. By using this method, it becomes possible to guide visitors to the optimal language page without sacrificing Astro’s strength in display speed.
Behind-the-Scenes Movement from Access to Astro Page Display
When a user accesses the site, just before the HTML generated by Astro is displayed, Cloudflare’s middleware catches the communication and performs language determination.
Specifically, this targets access to the root path, which is the site’s entrance, or paths that do not include a language specification. If the user is already on a specific language page, such as an English page, the process is skipped to prevent infinite redirection. Imagine an entrance guide who looks at the visitor’s information and instantaneously directs them to the appropriate language directory.
Three Criteria and Priorities for Determining the Optimal Language
To determine the most user-friendly language, the system performs determination according to the following three priorities. These criteria are critical parts that significantly affect usability.
-
Priority is given to the Cookie recording the user’s own choice
If there is a record of the user having manually chosen a language on that site in the past, such as with a language switcher, that information is given top priority. This is to respect the user’s explicit intent over the system’s automatic determination.
-
For the first visit, the browser’s language setting, Accept-Language
For initial visits where no record of manual selection exists, the system refers to the basic language settings of the browser the user is using. It identifies the supported language code from that setting information and routes them automatically.
-
Default setting when determination is not possible
If determination is impossible using the browser’s language information, or if the access is from a language not supported by the Astro site, a pre-configured base language, such as Japanese, is applied.
Mechanism for Language Switching by the User
In addition to automatic routing, we also make the mechanism for manually changing the language using on-screen settings functional.
When a user selects a specific language, JavaScript is used to write that language code into the browser’s storage area, the Cookie, and simultaneously transitions the screen to the corresponding language directory in Astro. Once this information is saved, the aforementioned first-priority rule will take effect on subsequent accesses, and the saved data will be referenced with priority over browser settings.
Benefits of Maintaining Astro’s Static Delivery and SEO Considerations
The greatest advantage of introducing this mechanism to Astro is that there is no need to transition to a system that generates pages on the server side every time there is access. Since pre-built static HTML can be delivered as is, Astro’s characteristic high-speed page display can be maintained.
Furthermore, in the HTML of each language page in Astro, code called the hreflang attribute is written to correctly inform search engines that other language versions also exist. This makes it easier for users of each language to reach the Astro page in the language that suits them from search results.