Language selector on your website: where to place it and how to do it right

and activating languages from the panel. Translations with AI are generated automatically, technical SEO (hreflang, sitemap, URLs by language) works from the first minute, and the website maintains its performance. If you have a WooCommerce store, Lantis is especially useful for internationalizing your catalog without having to manage duplicate versions of each product.Start a free trial

and have your WordPress in multiple languages today.

Quick summary

• Language selector on your website: where to place it and how to do it right | Lantis When your website speaks multiple languages, there is a user interface element that seems like a minor detail but has a direct impact on sales and SEO: the language selector
• . It's the entry point that allows each visitor to choose their language, and if it's not where they expect it or doesn't work properly, some of your international traffic will simply leave without buying. In this guide we explain where to place it, how to design it to work, what mistakes to avoid, and how to connect it with your SEO so Google can also benefit from it. The language selector reduces international bounce rate.
• and builds trust with users who don't speak your main language. The two positions that work are: in text ("Español", "English"), not just flags.
• (header) and in the same page in the new language, not to the homepage.
• The selector should be supported by URLs per language + hreflang so Google understands your versions too.

Why the language selector matters more than it seems

The language selector is the first point of friction between an international visitor and your website. If they find it easy, they stay. If they can't find it, or if it works poorly, they leave. And in e-commerce or any website where conversion depends on trust, the perception that "this website is for me" makes a real difference.

A well-placed selector:

• Reduces bounce rate for international visitors. If someone from France lands on your website in Spanish and can't quickly figure out how to change it, they'll leave. A visible selector solves that moment of doubt in seconds.
• Builds trust. Seeing your language is available signals that the website was designed with you in mind. That reduces psychological friction before a purchase.
• Helps with SEO. A selector with real links to language-specific URLs—not just a JavaScript change—lets Google discover and crawl your other language versions through those links.

Where to place it: the two positions that work

There are UX conventions that users have internalized. Breaking them causes confusion. Following them makes navigation effortless without anyone having to think about it.

Top right (header)

It's where people expect to find it. A globe icon 🌐 or the current language code (ES, EN, FR…) that, when clicked, expands to show other options. The advantage of placing it in the header is that it's visible on every page and doesn't compete with main navigation elements.

The recommended style: the current language code in uppercase or the language name, with an arrow or chevron to indicate it's a dropdown menu. Simple, recognizable, and discreet.

In the footer

Many people scroll down to the footer looking for options they didn't find above: privacy policy, terms, language, country. Repeating the selector in the footer is a safety net that doesn't bother anyone and can be decisive for the user who already scrolled to the bottom without finding what they were looking for.

The recommendation is to use both positions at once. The implementation cost is practically zero and covers all user profiles.

The mistakes almost everyone makes

Only flags, without text

Flags represent countries, not languages. Spanish isn't only from Spain, English isn't only from the UK, and French isn't only from France. Using only the Spanish flag for Spanish is technically incorrect and can be annoying for a Mexican, Argentine, or Colombian user.

and builds trust with users who don't speak your main language. name of the language in that same language ("Español", "English", "Français", "Deutsch"). If you want to add a flag as a visual aid, go ahead, but make sure the text is always present. That way, it's unambiguous for everyone.

Hide it in a deep menu

If it takes three clicks to change the language, it doesn't work. The selector has to be at the first level of navigation, visible without any prior interaction, or at least within reach with a single click. Burying it in a settings menu or in the footer without making it visible is practically like not having it.

Always redirect to the homepage when changing language

This is one of the most frustrating mistakes from a user's perspective. Imagine you're reading a company's blog post, you find the language selector and change it—and suddenly you're on the homepage of the website in another language, with no sign of the article you were reading.

The selector should take the user to the same page they were viewing, but in the new language. If they were on /fr/produit/sneakers, when changing to English they should go to /en/product/sneakers. If the equivalent version doesn't exist in that language, the second option is the homepage of that language. Never the default homepage otherwise.

Auto-detect the language and not allow changing it

Automatic language detection by geolocation or browser settings can improve the experience. But there must always be a visible way to change it manually. There are users who have their browser in English even though they prefer to see content in Spanish, or who are traveling and want content in their language even though their IP says they're in another country. The final control should always be in the user's hands.

The SEO detail most people ignore

Here's the part that few implement well: for Google to understand your language versions through the selector, the menu links must point to real URLs that Google can crawl.

If the language change only happens through JavaScript without changing the URL—that is, if tuweb.com/producto displays content in Spanish or French based on some cookie or parameter— Google can't crawl the different versions. For Google, it's a single URL with a single piece of content.

The correct structure is for each language to have its own real URL:

• tuweb.com/es/producto — Spanish version
• tuweb.com/fr/produit — French version
• tuweb.com/en/product — English version

And have the language selector link to those real URLs. That way, when Google crawls your site and finds the selector in the header, it can discover the other language versions by following those links, in addition to through hreflang.

If you want to understand how hreflang works and why it's critical for international SEO, we explain it step by step in hreflang explained easy.

A language selector that only uses JavaScript to change the content—without changing the URL—doesn't help SEO. Google doesn't see the language versions; it only sees one URL. To rank in other languages you need real URLs.

Accessibility: what many forget

The language selector must also be accessible for users with screen readers:

• The main button or link must have descriptive text: "Seleccionar idioma" or "Change language", not just a globe icon without alt text.
• The dropdown menu must be navigable with keyboard.
• Language names must be written in the target language, not the source language. "English" is written "English", not "Inglés". This way, screen readers pronounce them correctly for the user of the corresponding language.

How to add it without touching code

The good news is that if you use a translation tool like Lantis, the language selector is added automatically when you install the snippet on your site. You don't need to design it, code it, or connect it to the URLs by language: it appears already configured, connected to the correct versions of each page and with hreflang generated.

It works on Framer, Webflow, Shopify and any platform. You can adjust its position, style and which languages it shows from the Lantis dashboard, without touching code.

For sites that already have a custom selector or want finer control over styling, Lantis also exposes the language API so your development team can connect your own selector.

Frequently asked questions

Should I show the selector even if I only have two languages?

Yes, always. Even with two languages, the selector is necessary so the user can change manually if automatic detection doesn't get it right, and so Google can discover the second version through the link.

Can the language selector affect the speed of my website?

If it's well implemented, it shouldn't. A language selector is basically a menu with links, which is one of the lightest elements a website can have. The impact on speed comes from the underlying translation tool, not the selector itself.

Is it better to show the selector with the current language name or the target language?

Both conventions exist. The most common—and the most intuitive—is to show the current language and, upon expanding, the available languages with their names in their own language. The important thing is that the names are always in the target language ("Français", not "Francés"), so that a French user recognizes it even if they don't understand the website's language.

Conclusion

The language selector is a small piece with a disproportionate impact on the international user experience and SEO. Placing it right (header + footer), designing it correctly (language names, not just flags) and connecting it to real URLs by language is what turns a technical detail into a business advantage.

The good news is that if you use a translation layer like Lantis, all of this is set up automatically: the selector appears automatically, already connected to the correct URLs and with hreflang generated.

Start free and have your language selector working today.