Translating a React Website: Crawlable Locales Beyond i18n Libraries
Localize React sites with indexable HTML per locale URL using SSR, SSG, or prerendering—plus hreflang, metadata, and a translation workflow above i18n libraries.
React i18n libraries solve string loading, but multilingual SEO requires indexable HTML at distinct locale URLs. Client-only language toggles on a single SPA route hide alternates from Google and often produce hydration language flashes.
Quick answer: indexable HTML per locale URL
To translate a React website for search: ship complete HTML at a unique URL per locale. Google recommends different crawlable URLs per language rather than cookies or browser language alone. react-i18next or similar libraries are necessary but not sufficient—you still need routing and rendering strategy.
If primary content appears only after JavaScript detects language, crawlers may not see a complete language version. SSR, SSG, prerendering, or a meta-framework (Next.js, Remix) closes that gap.
Why SPA language toggles fail SEO
Classic create-react-app SPAs serve a thin index.html and hydrate translated strings client-side. Crawlers fetch one URL; they do not reliably execute every language branch. Language versions need distinct crawlable URLs; client-side-only toggles on a single URL conflict with Google multilingual guidance.
Cookie or localStorage locale on /app/dashboard without URL changes produces the same problem for public marketing pages. If primary content is injected after JavaScript language detection, indexing suffers.
Avoid automatic redirects based on assumed language. Offer a visible selector linking to /en/pricing and /de/preise instead. See international SEO versus multilingual SEO for strategy context.
Locale routing patterns for React
Use React Router (or your framework router) with locale prefixes:
/en/products,/fr/produits- Subdomain routing mapped to the same route tree
- Separate builds per locale for static sites
Google determines page language from visible content—keep each route predominantly in one language, including nav and footer. Match URL slugs to locale where possible for clarity.
SSR, SSG and prerender options
| Approach | When it fits |
|---|---|
| SSG + locale paths | Marketing sites with finite pages; build per locale. |
| SSR (Node) | Dynamic catalog or authenticated views that must be crawlable. |
| Prerender (Rendertron, prerender.io, build-step) | Legacy SPA retrofit for public routes. |
| Meta-framework | Next.js/Remix handle routing + data fetching with SEO defaults. |
Translated copy must appear in the HTML response before hydration for public pages. Client Components can wrap interactivity; value props and headings should render server-side or at prerender time.
Localized metadata and structured data
Set <title>, meta description, canonical, Open Graph, and Twitter tags per locale route. With React Helmet on SSR, emit tags on the server. With Next.js, use generateMetadata. Localized title and meta description should not depend on client-side swaps.
Structured data (WebSite, Product, FAQs) needs translated fields and correct inLanguage. Keep JSON-LD aligned with visible copy—mismatches confuse crawlers and users.
Hreflang and canonicals
Attach hreflang link elements in the document head for each route, listing every alternate including self. Hreflang must be reciprocal across the cluster. Canonical tags should point to the preferred URL within the same language when duplicates exist.
For large SPA route maps, generate hreflang via build scripts or sitemap xhtml:link entries. Our guide to SEO-optimized multilingual websites covers audit checklists. XML sitemaps help discovery and can carry hreflang annotations.
Content workflow beyond i18n libraries
Libraries manage keys; they do not enforce glossary, TM, or review. Layer a translation platform or CAT workflow:
- Export JSON/PO files on a schedule
- Lock product terms in a glossary
- Review on staging URLs per locale
- Re-export when English changes
Google helpful-content guidance prioritizes people-first pages; thin locale shells fail that test even if routing is correct.
Implementation checklist
Bing Webmaster Guidelines also emphasize crawlable, useful content and clear structure.
Common mistakes
i18n without locale routes — one URL, invisible alternates.
Helmet only on client — empty titles in view-source.
English canonical on translated routes — wrong signal.
Auto Accept-Language redirects — crawler and user friction.
Untranslated nav shell — mixed-language signals.
Prerender only homepage — deep links still blank to bots.
Publishing MT without review — thin locale content.
Traditional search and answer-engine foundations
Shared foundations for SSR/SSG React locale URLs instead of client-only toggles still matter across Google, Bing, and answer engines: crawlable language versions, clear entities, evidence-backed claims, structured data where truthful, and real localization—not English-only shells. Treat the guides below as platform-specific lenses on the same multilingual delivery bar.
Platform guide: Google Search
For Google Search, discovery depends on crawlable locale URLs with language-appropriate HTML, accurate titles/headings, and reciprocal hreflang when alternates exist. Technical foundations include indexable content (not cookie-only switches), localized metadata, sitemaps, and canonical discipline. Content quality means people-first main content in each language; authority comes from clear organization identity and corroborating sources—not translation-tool marketing. Multilingual implication: each market or language URL must stand alone. Measure with Search Console coverage and URL Inspection per locale. Known vs uncertain: Google documents multilingual and hreflang behavior; it does not guarantee rankings from any CMS or MTPE workflow.
Platform guide: Bing
Bing discovers and indexes crawlable multilingual pages with clear structure, similar to Google’s URL and content clarity expectations. Technical foundations include fetchable locale URLs, useful content, and Bing Webmaster Tools monitoring. Prefer localized headings, claims, and FAQs over chrome-only translation. Authority signals still depend on trustworthy sources and consistent entities. Multilingual implication: do not hide languages behind client-only toggles. Measure indexation and crawl stats in Bing Webmaster Tools. Known vs uncertain: Bing guidelines emphasize crawlable useful content; do not invent Bing-only ranking factors for translation tooling.
Platform guide: ChatGPT
ChatGPT may cite or summarize publicly accessible pages when language versions are clear and answer-ready. Discovery is not a conventional crawl ranking; visibility looks like being selected as a source or referenced in answers. Technical foundations still start with accessible HTML URLs—not widget overlays that hide copy. Content qualities that help include direct answers, FAQs, and stable terminology from glossaries. Authority comes from evidence and consistent entities across locales. Multilingual implication: each locale page should be readable on its own. Measurement is imperfect—treat citation checks as hypotheses. Known vs uncertain: there is no documented guarantee that MTPE or any CMS integration produces ChatGPT citations.
Platform guide: Gemini
Gemini and related Google AI experiences benefit from coherent entities, structured data where accurate, and indexable localized pages. Visibility is about being referenced or recognized—not inventing Gemini ranking factors. Technical foundations overlap Google Search crawlability and metadata quality. Content should present clear claims and definitions per language. Authority depends on organization consistency and corroboration. Multilingual implication: glossary-controlled product names reduce cross-locale confusion. Measure traditionally via Search Console and qualitatively sample AI answers. Known vs uncertain: Gemini behavior is not a substitute for documented Google Search guidance on hreflang and language versions.
Platform guide: Google AI Overviews
Google AI Overviews may link supporting pages; eligibility framing still rests on people-first, indexable content. They are not a language switch and do not replace hreflang. Technical foundations remain crawlable locale HTML and truthful structured data. Content qualities include concise answers and clear headings in each language. Authority signals mirror helpful-content expectations. Multilingual implication: Overview inclusion is not guaranteed for any translated page. Measure Search Console generative reports where available and keep traditional index metrics separate. Known vs uncertain: no translation workflow can promise Overview placement.
Where GlotEO fits
React teams scaling beyond JSON file swaps need glossary control, review, and SEO validation. GlotEO connects to modern stacks while engineers keep locale routing. Explore AI website translation and localization and website translation pricing when planning multilingual React rollouts.
Citations
- Supports guidance cited in this article (Bing Webmaster Guidelines)
- Supports guidance cited in this article (How to specify a canonical URL with rel=canonical and other methods)
- Supports guidance cited in this article (Creating helpful, reliable, people-first content)
- Supports guidance cited in this article (Tell Google about localized versions of your page)
- Supports guidance cited in this article (Managing multi-regional and multilingual sites)
- Supports guidance cited in this article (Learn about sitemaps)