How do you serve a page with content in multiple languages?

TL;DR

Give each localized page a stable URL, choose an initial locale from the URL, saved user preference, and optionally Accept-Language, then render one coherent language with the correct <html lang> and dir. Keep translations separate from templates, format locale-sensitive values with internationalization APIs, and let users switch languages. For indexable equivalents, publish reciprocal hreflang links.

How do you serve a page with content in multiple languages?

A robust implementation separates locale selection, translation data, rendering, and discovery by users and search engines.

Resolve the locale predictably

A common precedence is:

An explicit locale in the URL, such as /fr/account.
A saved user preference.
A supported match from the request's Accept-Language header.
The application's default locale.

Redirect to a locale-specific URL only when that behavior is intentional, and always let the user override it. Do not infer language solely from IP location.

If one URL varies its response by Accept-Language, caches must account for that variation, commonly through Vary: Accept-Language. Locale-specific URLs usually make caching, sharing, analytics, and search indexing simpler.

Render the selected language

The server can render localized HTML, the client can load a translation bundle, or a hybrid application can do both. Regardless of rendering architecture:

Load only supported translation catalogs and fall back deliberately for missing messages.
Escape translated content by default; translations are not trusted HTML merely because they came from a catalog.
Translate complete messages rather than concatenating fragments.
Use Intl or an internationalization library for dates, numbers, currencies, relative time, and plurals.
Keep one primary language per page and mark embedded passages with their own lang when necessary.

<!doctype html>
<html lang="de">
  <head>
    <link rel="alternate" hreflang="en" href="https://example.com/en/account" />
    <link rel="alternate" hreflang="de" href="https://example.com/de/account" />
    <link
      rel="alternate"
      hreflang="x-default"
      href="https://example.com/account" />
  </head>
  <body>
    <h1>Mein Konto</h1>
  </body>
</html>

For a right-to-left document, also set dir="rtl". The lang attribute does not determine text direction.

Test the full delivery path

Check direct navigation, refreshes, shared URLs, cache behavior, missing translations, language switching, browser back/forward navigation, server and client hydration agreement, long translated strings, right-to-left layout, and accessibility output. A page that first renders one language and then switches after hydration creates visual instability and can produce hydration errors.

Exercises

Beta

How do you serve a page with content in multiple languages?

TL;DR