How to add a language switcher to your website (without breaking anything) (2026)
A language switcher sounds simple — a dropdown, a flag, a list of languages. But done wrong it breaks navigation, hurts SEO, and confuses users more than having no switcher at all. Here's the complete guide to getting it right.
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-Languageheader (server-side) ornavigator.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
localStorageor 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-proand 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:
| Position | Visibility | Obtrusion | Best for |
|---|---|---|---|
| Top navigation bar | High | Low | Global audiences, B2C sites |
| Footer | Low | None | Secondary option, developer docs |
| Floating widget | High | Medium | Retrofitting to existing sites |
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
Don't use flag icons alone
Flags represent countries, not languages. Brazil and Portugal both speak Portuguese. Belgium has three official languages (French, Dutch, German). Switzerland has four. Canada uses English and French. Use the native language name (Français, Deutsch, 日本語) or a language code (FR, DE, JA) instead — or use flags alongside the language name if regional disambiguation matters.
Don't auto-redirect without acknowledgement
Silently redirecting a user who arrives at lingvit.com/pricing to lingvit.com/fr/pricing is disorienting if they shared the English URL intentionally. Show a non-blocking banner offering the detected language and let them accept or dismiss.
Don't make it too small to find on mobile
A 14px language label collapsed inside a hamburger menu on mobile is effectively invisible. If your audience is globally distributed, the switcher deserves a visible tap target — at least 44×44px — even on small screens.
Don't remove the switcher on mobile
A common mistake is to hide the language switcher on mobile “to save space.” Mobile users in non-English-speaking markets need language control more often than desktop users — they're more likely to be browsing in their first language.
URL structure implications
When a user switches language, the URL should update to reflect the new locale. The two standard patterns are:
/fr/about— subdirectory (recommended for most sites)fr.example.com/about— subdomain (preferred for large enterprises)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:
- 1Each language version must have its own crawlable URL (e.g.,
/fr/pricing). - 2Each page must include
hreflanglink tags pointing to all language versions including the original. - 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
- Can I customise the design of the language switcher?
- Yes. From the Lingvit dashboard you can set the widget position, choose between displaying the full language name, a two-letter code, or a flag alongside the name, and apply a colour that matches your brand. Custom CSS overrides are also supported for advanced styling.
- How does the switcher interact with hreflang?
- General Lingvit runtime translation does not create indexable locale URLs or hreflang at launch. Keep the switcher aligned with locale URLs provided by your platform when multilingual SEO is required.
- What if I want to build my own custom switcher?
- A custom switcher can control the runtime locale. Your platform remains responsible for indexable URL routing and hreflang outside the supported WordPress integration.
Related guides
Add a language switcher to your site
Automatic language detection, URL routing, and a customisable switcher widget — all in one script tag.