How to add a language switcher to your website (without breaking anything) (2026)

What a language switcher actually needs to do

A language switcher is more than a UI control — it's a coordination layer between user preference, URL structure, and content delivery. A complete implementation must:

• →Detect browser language on first visit. The Accept-Language header (server-side) or navigator.language (client-side) tells you what language the user prefers. Use it to redirect or serve the appropriate locale automatically on the first visit.
• →Let users override manually. Auto-detection is a starting point, not a final answer. A German speaker living in France may have a French browser locale but want German content. The switcher must always be reachable.
• →Remember the choice. Store the selected language in localStorage or a cookie so returning visitors don't have to switch again. A cookie is preferable when you want the server to know the language before rendering.
• →Update the URL to a language-specific version. Switching to French should navigate to /fr/about, not change content in place while keeping the URL at /about. URL-based language routing is the foundation of multilingual SEO.
• →Not break navigation. If a user is on /fr/products/widget-pro and switches to German, they should land on /de/products/widget-pro — not on the German homepage.

Design patterns: where to put it

Three positions dominate in the wild. Each has a different visibility/intrusion trade-off:

Scroll horizontally to view every column.

For most global sites, the top navigation bar is the right default. It's where users look first, and it doesn't compete with page content. A floating widget is a good option when you can't modify the site's navigation (e.g., a third-party CMS or a Webflow site where you want minimal template changes).

What NOT to do with language switchers

URL structure implications

When a user switches language, the URL should update to reflect the new locale. The two standard patterns are:

Subdirectories are simpler to implement and inherit the domain's authority directly. Subdomains require separate DNS configuration and can be treated as separate sites by search engines.

The URL structure you choose for the switcher must match your hreflang implementation. The hreflang link tags in your page <head> tell search engines which URL serves which language — and those URLs must be the same ones the switcher navigates to.

The SEO question

A language switcher that only changes content via JavaScript — without updating the URL — is invisible to search engines. Google crawls and indexes URLs, not JavaScript state.

For multilingual SEO, the requirement is:

1. 1Each language version must have its own crawlable URL (e.g., /fr/pricing).
2. 2Each page must include hreflang link tags pointing to all language versions including the original.
3. 3The language switcher must link to those real URLs — not trigger a JavaScript function that swaps content in place.

This is why client-side-only language switching (changing text via JS without updating the URL) fails for SEO even when it works fine for users who manually switch.

How Lingvit handles this

Lingvit's embeddable widget includes a complete language switcher implementation:

• →

  Automatic language detection

  On first visit, Lingvit reads the browser's preferred language and serves the matching translation. No redirect — the page content updates in place for a faster perceived load.

• →

  Coordinate with platform routing

  General Lingvit runtime translation does not create indexable locale URLs or hreflang at launch. When multilingual SEO is required, keep the switcher aligned with locale URLs and metadata provided by your platform.

• →

  Persistent preference

  The selected language is stored in localStorage. Returning visitors are served their preferred language immediately without re-detection.

• →

  Customisable position and style

  From the Lingvit dashboard you can configure the switcher position (top-right, bottom-right, bottom-left), display format (language name, code, or flag + name), and colour scheme to match your brand.

Frequently asked questions