Supporting multiple languages on a static site requires deliberate structure decisions for content, routing, and SEO. This guide covers the core approaches for internationalizing a static site.
Choosing a URL Structure for Multiple Languages
| Structure | Example | Consideration |
|---|---|---|
| Subdirectory | yourdomain.com/fr/ | Simple, single domain, common choice for static sites |
| Subdomain | fr.yourdomain.com | Cleaner separation, slightly more DNS/config overhead |
| Separate domain | yourdomain.fr | Strongest geographic/language signal, most overhead |
Subdirectory structure is generally the simplest and most common approach for static sites, requiring no additional DNS configuration.
Structuring Content by Language
content/
en/
home.md
about.md
fr/
home.md
about.mdMost static site generators support language-specific content directories, with build tooling generating the corresponding language-prefixed output paths automatically.
Setting Up hreflang Tags
<link rel="alternate" hreflang="en" href="https://yourdomain.com/en/about" />
<link rel="alternate" hreflang="fr" href="https://yourdomain.com/fr/about" />
<link rel="alternate" hreflang="x-default" href="https://yourdomain.com/en/about" />Essential for correct SEO handling of multilingual content — tells search engines about equivalent pages in different languages, helping them serve the appropriate language version to users based on their locale.
Handling Language Detection and Redirection
location = / {
if ($http_accept_language ~* "^fr") {
return 302 /fr/;
}
return 302 /en/;
}Redirecting based on browser language preference at the root is a common pattern — but always allow users to manually switch languages afterward, since automatic detection isn't always correct (VPN users, multilingual users with unexpected preferences).
Providing a Clear Language Switcher
Ensure every page has an obvious, easily accessible way to switch languages — don't rely solely on automatic detection; users need explicit control over their language preference.
Localizing More Than Just Text
Consider dates, number formats, currency, and even images/examples that might need cultural adaptation, not just translated text strings — genuine localization goes beyond word-for-word translation.
Managing Translation Content
For larger sites, consider a translation management workflow (dedicated translation files, or integration with a translation service/platform) rather than ad-hoc translated content scattered through your codebase — particularly valuable as your site and language count grow.
Handling Untranslated Content Gracefully
Decide your fallback behavior for content not yet translated into a specific language (show in default language with a note, versus hiding entirely) — be deliberate about this rather than having inconsistent, undocumented behavior across different pages.
Common Errors
Search engines indexing the wrong language version for certain queries — verify your hreflang implementation is correct and complete (bidirectional references between all language versions of the same content); incomplete or incorrect hreflang is a common source of this issue.
Continue Reading
- How to Set Up a Sitemap and robots.txt for a Static Site
- How to Set Up Redirects and Rewrites for a Static Site
- Understanding Core Web Vitals for Static Sites
Browse more articles in Static Site Hosting & Frontend Deployment.
