How to Add Multiple Languages to Your Website (Step by Step)

A website that speaks more than one language can open doors to wider audiences, better trust, and stronger growth. The good news is that you do not need a huge engineering team to get there. There are several ways to build a multilingual site, starting with simple methods and moving toward more advanced setups as your needs grow. The best approach depends on your budget, your content volume, and how often your site changes.

Method 1: Simple JSON Language Switch (for small sites under 10 pages)

Step 1: Create a languages folder in your project. Add two files:

languages/en.json

json

1{
2  "welcome": "Welcome to our site",
3  "buy_now": "Buy now",
4  "contact": "Contact us"
5}

languages/es.json

json

1{
2  "welcome": "Bienvenido a nuestro sitio",
3  "buy_now": "Comprar ahora",
4  "contact": "Contáctenos"
5}

Step 2: In your HTML, add a language selector:

html

1<select id="languageSwitcher">
2  <option value="en">English</option>
3  <option value="es">Español</option>
4</select>
5<h1 id="welcomeText"></h1>
6<button id="buyButton"></button>

Step 3: Load the selected language file and update the page:

javascript

1async function loadLanguage(lang) {
2  const response = await fetch(`languages/${lang}.json`);
3  const texts = await response.json();
4  document.getElementById('welcomeText').innerText = texts.welcome;
5  document.getElementById('buyButton').innerText = texts.buy_now;
6}
7
8document.getElementById('languageSwitcher').addEventListener('change', (e) => {
9  loadLanguage(e.target.value);
10});
11loadLanguage('en');

When to use: Landing pages, small portfolios, personal sites.
Limitation: Only changes visible text, not page content like blog posts.

Method 2: Language‑Specific URLs (for medium sites up to 100 pages)

Create separate folders for each language:

text

1your-website/
2├── en/
3│   ├── index.html
4│   ├── about.html
5│   └── contact.html
6├── es/
7│   ├── index.html
8│   ├── about.html
9│   └── contact.html
10└── shared/
11    ├── css/
12    └── js/

Step 1: Copy your HTML template into each folder. Translate the content manually or with a tool.

Step 2: Add a language switcher that preserves the folder structure:

html

1<select onchange="switchLanguage(this.value)">
2  <option value="en">English</option>
3  <option value="es">Español</option>
4</select>
5
6<script>
7function switchLanguage(lang) {
8  let currentPath = window.location.pathname;
9  let currentPage = currentPath.split('/').pop() || 'index.html';
10  window.location.href = `/${lang}/${currentPage}`;
11}
12</script>

Step 3: Tell search engines about language versions. Add this to each page's <head>:

html

1<link rel="alternate" hreflang="en" href="https://example.com/en/index.html" />
2<link rel="alternate" hreflang="es" href="https://example.com/es/index.html" />

When to use: Business sites, small blogs, service pages.
Benefit: Clean URLs, SEO‑friendly, easy to share.

Method 3: Using a Multilingual CMS (for content‑heavy sites)

If you have dozens of pages and non‑technical editors, use a CMS with built‑in multilingual support. Here are specific, free options:

CMS	Multilingual Setup
WordPress + Polylang	Install Polylang plugin → Add languages → Translate each post/page
Strapi (headless)	In Content Manager → Add locale field → Create translations
Directus	Enable "Languages" in settings → Each field can have multiple language values

Example with WordPress Polylang (concrete steps):

Install Polylang from Plugins → Add New → Search "Polylang".
Go to Settings → Languages → Add English and Spanish.
Create a new post. You'll see two tabs: "English" and "Spanish".
Fill both versions, then publish. The CMS automatically creates URLs like example.com/en/my-post and example.com/es/my-post.

When to use: News sites, online stores, documentation hubs.
Why: Editors don't need to touch code.

Method 4: Translate Data (Not Just Words)

Many beginners forget that dates, numbers, and placeholders need localization. Specific fixes:

Dates: Use toLocaleDateString()

javascript

1const date = new Date();
2console.log(date.toLocaleDateString('en-US')); // 05/19/2026
3console.log(date.toLocaleDateString('es-ES')); // 19/5/2026

Numbers & currencies: Use Intl.NumberFormat

javascript

1const price = 1234.5;
2console.log(new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price));
3// $1,234.50
4console.log(new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(price));
5// 1.234,50 €

Plurals in JSON: Use a simple key convention

json

1{
2  "items": "item|items",
3  "items_count": "You have {count} item|You have {count} items"
4}

Then in JavaScript:

javascript

1function plural(key, count) {
2  const forms = translations[key].split('|');
3  return forms[count === 1 ? 0 : 1].replace('{count}', count);
4}

Method 5: Automatic Language Detection (with a safe fallback)

Add this script at the top of your page to suggest a language based on browser settings:

javascript

1const userLang = navigator.language.split('-')[0]; // 'en', 'es', etc.
2const supported = ['en', 'es'];
3if (supported.includes(userLang) && !localStorage.getItem('userLanguage')) {
4  window.location.href = `/${userLang}/` + window.location.pathname;
5}
6// Always show a visible language menu so user can override

Also store their choice:

javascript

1function setLanguage(lang) {
2  localStorage.setItem('userLanguage', lang);
3  window.location.href = `/${lang}/` + window.location.pathname;
4}

Quick Decision Guide (Which Method to Pick)

Your site size	Best method	Time to implement
1–5 pages, static	JSON language switch	15 minutes
5–50 pages, mostly static	Language‑specific URLs	1–2 hours
50+ pages, content changes often	CMS (WordPress + Polylang)	1 day (setup)
Any size, need advanced SEO, workflows	Subfolders + translation workflow	2–3 days

Final Checklist Before Launch

Each page has <html lang="en"> or lang="es" attribute
Language switcher is visible and works without page reload (or with proper redirects)
Hreflang tags added to <head> for all language versions
Dates, numbers, currencies formatted correctly for each language
Translated pages have unique, translated title and meta description
No mixed content (English text on Spanish page)

With these specific examples and code snippets, you can implement a multilingual website today, no matter your current skill level. Start simple, test with one additional language, then scale up.