Tradução de um site React: versões locais rastreáveis além das bibliotecas i18n

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

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.

Lista de verificação de implementação

• Distinct URL per locale on all public routes
• SSR, SSG, or prerender for marketing HTML
• Localized metadata in initial response (view-source test)
• Reciprocal hreflang and per-locale canonicals
• Locale sitemap entries submitted to Search Console
• Visible language selector (no auto-redirect by IP)
• Hydration tested without English flash
• Glossary + review on cornerstone pages

Bing Webmaster Guidelines also emphasize crawlable, useful content and clear structure.

Erros comuns

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.

Fundamentos da busca tradicional e dos mecanismos de respostas

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.

Guia da plataforma: Pesquisa Google

Na Pesquisa Google, a descoberta depende de URLs de idioma e região rastreáveis, com HTML adequado ao idioma, títulos e cabeçalhos precisos e hreflang recíproco quando houver versões alternativas. Os fundamentos técnicos incluem conteúdo indexável (não apenas seletores baseados em cookies), metadados localizados, sitemaps e rigor na canonicalização. Qualidade de conteúdo significa oferecer conteúdo principal feito para pessoas em cada idioma; a autoridade vem da identidade clara da organização e de fontes que confirmem as informações — não do marketing de ferramentas de tradução. Implicação multilíngue: cada URL de mercado ou idioma deve funcionar de forma independente. Meça os resultados com a cobertura do Search Console e a Inspeção de URL por idioma e região. O que se sabe e o que é incerto: o Google documenta o comportamento multilíngue e do hreflang; não garante posicionamentos com base em nenhum CMS ou fluxo de trabalho de MTPE.

Guia da plataforma: Bing

O Bing descobre e indexa páginas multilíngues rastreáveis com estrutura clara, de forma semelhante às expectativas do Google quanto à clareza de URLs e conteúdo. Os fundamentos técnicos incluem URLs de idioma e região que possam ser acessadas pelos rastreadores, conteúdo útil e monitoramento no Bing Webmaster Tools. Priorize a localização de cabeçalhos, afirmações e perguntas frequentes, em vez de traduzir apenas os elementos da interface. Os sinais de autoridade continuam dependendo de fontes confiáveis e entidades consistentes. Implicação para sites multilíngues: não esconda idiomas atrás de seletores que funcionam apenas no lado do cliente. Meça a indexação e as estatísticas de rastreamento no Bing Webmaster Tools. O que se sabe e o que é incerto: as diretrizes do Bing enfatizam conteúdo útil e rastreável; não invente fatores de classificação exclusivos do Bing para ferramentas de tradução.

Guia da plataforma: ChatGPT

O ChatGPT pode citar ou resumir páginas acessíveis publicamente quando as versões de idioma são claras e estão prontas para fornecer respostas. A descoberta não segue uma classificação convencional de busca por rastreamento; a visibilidade se manifesta na seleção como fonte ou na menção nas respostas. Os fundamentos técnicos ainda começam com URLs HTML acessíveis — não com sobreposições de widgets que ocultam o texto. Entre as qualidades de conteúdo que ajudam estão respostas diretas, perguntas frequentes e terminologia estável baseada em glossários. A autoridade vem de evidências e de entidades consistentes entre versões de idioma e região. Implicação multilíngue: cada página localizada deve ser compreensível por si só. A medição é imperfeita — trate as verificações de citações como hipóteses. O que se sabe e o que é incerto: não há garantia documentada de que a MTPE ou qualquer integração com um CMS gere citações no ChatGPT.

Guia da plataforma: Gemini

O Gemini e as experiências relacionadas de IA do Google se beneficiam de entidades coerentes, dados estruturados precisos e páginas localizadas indexáveis. A visibilidade está ligada a receber referências ou ser reconhecido — não a inventar fatores de classificação do Gemini. Os fundamentos técnicos coincidem com os da Pesquisa Google em relação à rastreabilidade e à qualidade dos metadados. O conteúdo deve apresentar afirmações e definições claras em cada idioma. A autoridade depende da consistência da organização e da confirmação das informações por outras fontes. Implicação para sites multilíngues: nomes de produtos padronizados por um glossário reduzem a confusão entre versões de idioma e região. Faça a medição tradicional pelo Search Console e avalie qualitativamente amostras de respostas da IA. O que se sabe e o que é incerto: o comportamento do Gemini não substitui as orientações documentadas da Pesquisa Google sobre hreflang e versões de idioma.

Guia da plataforma: Google AI Overviews

O Google AI Overviews pode incluir links para páginas de apoio; os critérios de elegibilidade continuam baseados em conteúdo indexável e voltado para as pessoas. Esse recurso não funciona como um seletor de idiomas nem substitui o hreflang. As bases técnicas continuam sendo HTML rastreável para cada localidade e dados estruturados fiéis ao conteúdo. Entre as qualidades do conteúdo estão respostas concisas e títulos claros em cada idioma. Os sinais de autoridade seguem as expectativas para conteúdo útil. Implicação para sites multilíngues: a inclusão no AI Overviews não é garantida para nenhuma página traduzida. Acompanhe os relatórios de recursos generativos no Search Console, quando disponíveis, e mantenha as métricas tradicionais de indexação separadas. O que se sabe e o que permanece incerto: nenhum fluxo de trabalho de tradução pode prometer presença no AI Overviews.

Onde a GlotEO se encaixa

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.