How to Add a Language Selector to Your Website: 2 Methods

Summarize this post with: 8 min read

ChatGPT Perplexity Grok Google AI

You can add a language selector to a website in two ways. Build it yourself as a list of links to each language version of the current page, or use a website translation tool that adds a switcher you can configure. Whichever you choose, the selector should appear on every page and label each language in that language (Deutsch, Español, Français). It should also keep the visitor on the same page when they switch, and let people choose rather than redirecting them.

Both methods are below, step by step, with code you can copy and the design rules W3C and Google recommend.

Key takeaways

• A language selector should link to a real, separate URL for each language instead of swapping text with a script. Separate URLs are what let search engines index every version.
• Label languages by their own names (“Deutsch”, not “German”) and do not rely on flags alone. W3C advises against using country flags to identify languages.
• Put the selector in the same place on every page, usually the header or a fixed corner, and keep visitors on the equivalent page when they switch.
• Do not force visitors into a language by IP address or browser settings. Google recommends against automatic redirects between language versions and suggests linking them instead.
• Translation tools such as ConveyThis add the selector automatically and let you style it (flags, labels, position, colours) without code.

What makes a good language selector

These rules come from the W3C internationalization guidance and Google’s documentation on multilingual sites:

1. Put it on every page. W3C says: “It is always best to add links to alternate language versions, and to do so on every page” (W3C).
2. Name each language in its own language. A German speaker scanning an English page looks for “Deutsch”, not “German.” W3C recommends that links be “in the language of the page they point to.”
3. Treat flags as optional decoration, never as the label. W3C says: “Resist the temptation to use country flags to identify languages. Some countries have more than one language, and some languages are spoken in more than one country.” If you use flags for style, always show the language name next to them.
4. Keep the visitor on the same page. Switching to Spanish from /pricing should land on /es/pricing, not on the Spanish homepage.
5. Do not force redirects. Google advises: “Avoid automatically redirecting users from one language version of a site to a different language version of a site,” and suggests adding hyperlinks to other language versions instead (Google Search Central). If you want to suggest a language based on the browser, use a banner the visitor can dismiss instead of a redirect.
6. Make it easy to find and use. Put it somewhere familiar (top right of the header, or the footer on content-heavy sites), make it big enough to tap on a phone, and make sure it works with a keyboard.

Method 1: build the language selector yourself

Use this if you manage your own HTML or theme and each language already has its own URL.

Step 1: make sure every language has its own URL

A selector links between versions, so the versions have to exist first: example.com/about, example.com/de/about, example.com/es/about. If you are still choosing a structure, see subdirectories vs subdomains for multilingual SEO.

Step 2: add the selector markup

The simplest accessible selector is a list of links. Each link says which language it leads to (hreflang) and what language its text is in (lang):

<nav aria-label="Language">
  <ul class="lang-switcher">
    <li><a href="/about" hreflang="en" lang="en" aria-current="true">English</a></li>
    <li><a href="/de/about" hreflang="de" lang="de">Deutsch</a></li>
    <li><a href="/es/about" hreflang="es" lang="es">Español</a></li>
    <li><a href="/fr/about" hreflang="fr" lang="fr">Français</a></li>
  </ul>
</nav>

This markup works for three reasons:

• Plain links are crawlable, so search engines discover every language version.
• lang on each link lets screen readers pronounce “Deutsch” correctly.
• aria-current marks the language the visitor is reading now.

With more than about five languages, a dropdown saves space. Use a button that opens the list rather than a <select> that navigates on change, which is awkward for keyboard users.

Step 3: generate the links for the current page

Each link has to point to the current page in the other language. In a CMS, this usually comes from your multilingual plugin or template variables. On a static site, generate the list at build time from a map of equivalent URLs. Do not hard-code links to each language’s homepage.

Step 4: add hreflang tags in the page head

The visible selector is for people. Search engines also need <link rel="alternate" hreflang="…"> tags in the <head> of every page, listing every language version including the page itself, plus an x-default. Our complete hreflang guide shows the exact markup.

Step 5: test

• Switch languages from a deep page (not the homepage) and confirm you land on the equivalent page.
• Tab to the selector with the keyboard and open it without a mouse.
• Check it on a phone and make sure you can tap each language easily.
• View source on a translated page and confirm the hreflang tags are there.

You get full control over design and behaviour. The cost is that you maintain the URL mapping, the hreflang tags and the translations yourself.

Method 2: use a website translation tool’s selector

A translation tool creates the language versions, their URLs, the hreflang tags and the selector together, which keeps all of them in sync. With ConveyThis, the switcher is added when you install the plugin, app or script, and you customise it from the dashboard settings without writing code.

These are the settings you can change:

To follow the best practices above with ConveyThis:

1. Set the label to the language’s native name. Keep flags as a visual extra, or turn them off.
2. Place the switcher inside your header by giving the ID of the element where it should appear, so it sits where visitors expect it.
3. Leave the optional automatic redirect by browser language switched off unless you have a strong reason to use it. The dashboard itself warns that search engine crawlers may follow such redirects.
4. Pick a URL structure (subfolders, subdomains or ?lang; second-level domains on the Extreme plan). Hreflang tags are added automatically.

Read more about the current design in meet the new language switcher, or see the platform guides for WordPress and Shopify.

You write no code, the selector, URLs and hreflang stay in sync automatically, and it works on most platforms. You do get less control over the markup than with a fully custom build, although you can still place and style the switcher.

Which method should you choose?

Common language selector mistakes

• Using flags only. Does the Spanish flag mean Spain, Mexico or Argentina? Is the Swiss flag German, French or Italian? Always add a label.
• Listing languages in English only. A Japanese visitor may not recognise the word “Japanese”.
• Dropping visitors on the homepage after they switch.
• Hiding the selector in a hamburger menu on desktop, or behind a tiny icon.
• Redirecting automatically by IP or browser language, with no way back.
• Switching languages by script alone, with no separate URLs, so search engines see only one language.

Frequently asked questions

Where should a language selector go? Most sites put it at the top right of the header, where visitors expect it. Content-heavy sites often repeat it in the footer. Keep it in the same place on every page.

Should I use flags in my language switcher? Only alongside language names. Flags represent countries, not languages, so on their own they confuse visitors in multilingual countries and speakers of widely spoken languages.

Should my website switch language automatically based on the browser? Better not to force it. Google recommends against automatic redirects between language versions. If you want to help visitors, show a suggestion they can accept or dismiss, and always keep the selector visible.

Does a language selector help SEO? The selector itself helps search engines discover your language versions through crawlable links. Rankings in each language depend on having separate URLs, hreflang tags and translated metadata.

To get a switcher, translated pages and hreflang set up together, try ConveyThis free. Plans are on the pricing page.