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
languages/es.json
Json
Step 2: In your HTML, add a language selector:
Html
Step 3: Load the selected language file and update the page:
Javascript
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:
Html
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
Step 3: Tell search engines about language versions. Add this to each page's <head>:
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-postandexample.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
Numbers & currencies: Use Intl.NumberFormat
Javascript
Plurals in JSON: Use a simple key convention
Json
Then in JavaScript:
Javascript
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
Also store their choice:
Javascript
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">orlang="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.
