Add Multilingual Support to Your Website

One site, one language, one audience. That’s how most small sites start — and it’s also a ceiling. Adding multilingual support can multiply your traffic without multiplying your content ideas. Here’s the full workflow, from deciding which languages to support to shipping translated pages.

Step 1: Decide Which Languages (With Data, Not Guesses)

Don’t pick languages by gut feeling. Look up your keywords’ search volume by country in a tool like Semrush. The countries sending you traffic decide your languages.

Example: say your top traffic countries are Ghana, the US, Nigeria, the UK, India, and the Philippines. Ghana, the US, Nigeria, and the UK are English-speaking. India speaks Hindi and English. The Philippines speaks Filipino (Tagalog) and English. So in this case, English alone would already cover most of it — but to demonstrate the method, let’s build Hindi and Filipino versions.

One practical note: this workflow uses AI chat tools because most readers are beginners. AI speeds things up and lets someone with no frontend background produce a decent multilingual site.

Step 2: Plan the URL Structure

Use ISO 639-1 language codes as subdirectories. Hindi gets /hi/, Filipino gets /tl/. Create those folders next to your index.html.

Keep shared files shared: your styles.css stays in the root. Subdirectory pages reference it with ../styles.css. Don’t duplicate assets into every language folder.

Step 3: Add a Language Switcher

The switcher buttons should use each language’s own name for itself: English, Hindi (native script), Filipino. A visitor recognizes their language instantly.

Mark the current language visually — a curr class with bold styling works:

<div class="language-list">
  <a class="curr" href="./" title="English">English</a>
  <a href="./hi/" title="Hindi">Hindi</a>
  <a href="./tl/" title="Filipino">Filipino</a>
</div>

Critical detail: switching languages must keep the visitor on the same page. If they’re on china-phone-number-generator.html, the Hindi link is ./hi/china-phone-number-generator.html and the Filipino link is ./tl/china-phone-number-generator.html. Never dump them back to the homepage.

Style it simply: float the list right, 10px spacing between links, gray for inactive, dark bold for the current language, a hover color for feedback.

Step 4: Copy and Adapt the Files

Copy all your finished HTML files into /hi/ and /tl/, then modify each one (Hindi example, Filipino is the same pattern):

1. Change <html lang="en"> to <html lang="hi">.
2. Change the stylesheet path to ../styles.css.
3. Point the logo’s home link to ../hi/.
4. Adjust the language list links: back to English is ../, to Filipino is ../tl/; the curr class moves to the Hindi link.
5. Same for inner pages: English version at ../china-phone-number-generator.html, Filipino at ../tl/china-phone-number-generator.html.

Yes, this manual process is tedious. The root cause is a purely static site. My advice: do the first site by hand so you understand the mechanics, then switch to dynamic generation from the second site onward. If you don’t know backend yet, accept the tedium for now — understanding beats speed at this stage.

Step 5: Translate With AI, Then Verify

Send your titles and descriptions to an AI chat tool (GPT-4 class) for translation, then swap them in.

Quality check with back-translation: open a fresh chat, ask the AI to translate the Hindi back into English, and compare with your original. If they match, the translation is solid.

Translate everything user-facing: nav items (including their title attributes), every section’s headings, paragraphs, and button labels. One rule: never translate URLs.

Work through all pages this way and your multilingual support is done. Mobile responsiveness can wait — ship first, polish later.

What Comes Next

After multilingual: register a domain, deploy to Vercel, put Cloudflare in front, submit to Google Search Console, and add analytics. The site is now ready to receive traffic from every language you support.

Quick Checklist

• Languages chosen from per-country search data, not guesses
• ISO 639-1 subdirectories (/hi/, /tl/)
• Switcher uses native language names; current language highlighted
• Switching keeps the same page path
• lang attributes and asset paths fixed per directory
• AI translation + back-translation verified
• URLs never translated

Multilingual support looks intimidating, but it’s just five steps: decide, structure, switch, copy, translate. Each step is simple. Together they open your site to audiences you were invisible to before.

Series: Overseas Website Building