Multilingual Website Examples: How to Add a Language Selector Without Hurting Your SEO

Last updated: July 2026 Reading time: 9 minutes

TL;DR

Most "language selector" tutorials show you how to build a dropdown menu. Almost none of them explain that the dropdown is the easy part — the hard part is making sure Google can actually find, crawl, and rank every language version separately.

This guide shows real multilingual website examples (good and bad), the exact hreflang and URL patterns that work, and the mistakes that quietly tank multilingual SEO even when the switcher "looks fine" to a human visitor.

What a Language Selector Actually Needs to Do

A language selector is a UI element (dropdown, flag row, or text links) that lets a visitor switch the site's language. That part is trivial CSS/JS.

The part almost every guide skips: each language needs its own crawlable URL. If your "selector" just swaps text on the same URL with JavaScript, search engines only ever see one language — usually whichever one loaded first.

Rule of thumb: if you can't right-click a language link and open it in a new tab to see fully translated content without JavaScript running, it's not a real multilingual website. It's a translation widget bolted onto an English site.

Good vs. Bad Multilingual Website Examples

❌ Bad Example: Client-Side Translation Widget

<select onchange="translatePage(this.value)">
  <option value="en">English</option>
  <option value="es">Español</option>
</select>

Same URL for every language (example.com/)
Content swapped by JavaScript after page load
Google indexes only the default language
No hreflang tags possible (there's nothing to point to)

This is the single most common mistake in "multilingual website examples" you'll find by searching Google — including in some page builder templates that are marketed as multilingual-ready.

✅ Good Example: Separate URLs per Language

example.com/en/services
example.com/es/servicios
example.com/fr/services

<link rel="alternate" hreflang="en" href="https://example.com/en/services" />
<link rel="alternate" hreflang="es" href="https://example.com/es/servicios" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/services" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/services" />

Every language is a real, separately indexable page
Each page has its own title, meta description, and (ideally) translated URL slug
The language selector is just a set of <a href> links between these pages — no JavaScript required for search engines to follow them

A Simple Language Selector That Works for SEO

<nav aria-label="Language selector">
  <a href="/en/services" hreflang="en">English</a>
  <a href="/es/servicios" hreflang="es">Español</a>
  <a href="/fr/services" hreflang="fr">Français</a>
</nav>

Three rules this example follows that most tutorials skip:

Use language names, not flags. Spanish is spoken in 20+ countries — a Mexican flag next to "Español" quietly tells Spanish speakers in Spain or Argentina "this isn't really for you."
Link to the equivalent page, not the homepage. If a visitor is on /en/services and switches to Spanish, they should land on /es/servicios, not /es/ (the Spanish homepage). Losing this "deep link" on language switch is one of the most common multilingual UX complaints.
Don't auto-redirect based on IP or browser language without a manual override. Suggest a language, but always let the visitor switch back. Google's own guidance warns against automatic redirects that prevent crawlers (and users) from reaching other language versions.

Common Mistakes That Break Multilingual SEO

Mistake #1: Query Parameters Instead of Paths

❌ example.com/services?lang=es ✅ example.com/es/servicios

Query-parameter "languages" are frequently treated as the same page with different tracking parameters, not distinct pages — so only one language tends to get indexed.

Mistake #2: Missing Reciprocal hreflang Links

If /en/services links to /es/servicios via hreflang, /es/servicios must link back to /en/services. One-directional hreflang is commonly ignored by search engines.

Mistake #3: Translating Content but Not URLs

❌ example.com/en/services and example.com/es/services (same slug) ✅ example.com/en/services and example.com/es/servicios

Translated slugs are a minor ranking signal, but a much bigger trust signal — a Spanish-speaking visitor is more likely to click a Spanish-looking URL in search results.

Mistake #4: A Popup That Blocks the Page on Every Visit

Interstitial "choose your language" popups that appear before any content loads hurt both SEO (Google may see the interstitial, not your content) and user experience. Detect a likely language, show the content, and let visitors switch if needed.

Mistake #5: One Sitemap, Missing Languages

Large multilingual sites should include hreflang annotations in the XML sitemap (or submit one sitemap per language) so every version gets discovered — not just the default language homepage.

How Croisa Handles This Automatically

We built Croisa specifically because we kept seeing small businesses either skip multilingual entirely or get the technical implementation wrong (see the mistakes above). Every Croisa site:

Generates a real, separate, server-rendered page per language and per piece of content (a service, a blog post, a menu item)
Auto-translates the URL slug, not just the visible text
Adds correct, reciprocal hreflang tags automatically — no code required
Serves a language selector that links to the equivalent page in each language, not the homepage
Detects the visitor's likely language but never blocks the page behind a popup

You edit content once, in whatever language you're comfortable in, and every other language stays in sync automatically.

Create a multilingual website in one minute