Menerjemahkan Situs Web React: Versi Lokal yang Dapat Dirayapi, Lebih dari Sekadar Pustaka 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.

Daftar periksa implementasi

• 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.

Kesalahan umum

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.

Dasar-dasar mesin pencari tradisional dan mesin jawaban

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.

Panduan platform: Google Search

Di Google Search, penemuan halaman bergantung pada URL versi lokal yang dapat dirayapi, dengan HTML yang sesuai bahasa, judul dan tajuk yang akurat, serta hreflang timbal balik jika tersedia versi alternatif. Landasan teknisnya mencakup konten yang dapat diindeks (bukan pergantian bahasa yang hanya mengandalkan cookie), metadata yang dilokalkan, peta situs, dan penerapan URL kanonis yang konsisten. Konten berkualitas berarti konten utama yang mengutamakan pengguna dalam setiap bahasa; otoritas berasal dari identitas organisasi yang jelas dan sumber pendukung—bukan pemasaran alat penerjemahan. Implikasi multibahasa: setiap URL untuk pasar atau bahasa tertentu harus dapat berdiri sendiri. Ukur melalui cakupan pengindeksan di Search Console dan Inspeksi URL untuk setiap versi lokal. Yang diketahui dan yang belum pasti: Google mendokumentasikan cara kerja multibahasa dan hreflang, tetapi tidak menjamin peringkat dari CMS atau alur kerja MTPE apa pun.

Panduan platform: Bing

Bing menemukan dan mengindeks halaman multibahasa yang dapat dirayapi dengan struktur yang jelas, serupa dengan persyaratan Google mengenai kejelasan URL dan konten. Landasan teknisnya mencakup URL versi lokal yang dapat diakses, konten bermanfaat, dan pemantauan melalui Bing Webmaster Tools. Utamakan pelokalan tajuk, klaim, dan FAQ daripada hanya menerjemahkan elemen antarmuka. Sinyal otoritas tetap bergantung pada sumber tepercaya dan entitas yang konsisten. Implikasi multibahasa: jangan sembunyikan versi bahasa di balik pengalih yang hanya bekerja di sisi klien. Ukur pengindeksan dan statistik perayapan di Bing Webmaster Tools. Yang diketahui dan yang belum pasti: pedoman Bing menekankan konten bermanfaat yang dapat dirayapi; jangan mengada-adakan faktor pemeringkatan khusus Bing untuk alat penerjemahan.

Panduan platform: ChatGPT

ChatGPT dapat mengutip atau merangkum halaman yang dapat diakses publik jika versi bahasanya jelas dan kontennya siap digunakan sebagai jawaban. Penemuan konten tidak mengikuti pemeringkatan perayapan konvensional; visibilitas berarti terpilih sebagai sumber atau dirujuk dalam jawaban. Landasan teknis tetap dimulai dari URL HTML yang dapat diakses—bukan overlay widget yang menyembunyikan teks. Karakteristik konten yang membantu meliputi jawaban langsung, FAQ, dan terminologi konsisten berdasarkan glosarium. Otoritas berasal dari bukti dan entitas yang konsisten di seluruh versi lokal. Implikasi multibahasa: setiap halaman versi lokal harus dapat dibaca secara mandiri. Pengukurannya belum sempurna—perlakukan pemeriksaan kutipan sebagai hipotesis. Yang diketahui dan yang belum pasti: tidak ada jaminan terdokumentasi bahwa MTPE atau integrasi CMS apa pun akan menghasilkan kutipan di ChatGPT.

Panduan platform: Gemini

Gemini dan pengalaman AI Google terkait terbantu oleh entitas yang konsisten, data terstruktur yang akurat, serta halaman lokal yang dapat diindeks. Visibilitas berarti dirujuk atau dikenali—bukan mengada-adakan faktor pemeringkatan Gemini. Landasan teknisnya beririsan dengan keterayapan dan kualitas metadata di Google Search. Konten harus menyajikan klaim dan definisi yang jelas dalam setiap bahasa. Otoritas bergantung pada konsistensi organisasi dan bukti pendukung. Implikasi multibahasa: nama produk yang distandardisasi melalui glosarium mengurangi kebingungan antarversi lokal. Lakukan pengukuran konvensional melalui Search Console dan ambil sampel jawaban AI untuk penilaian kualitatif. Yang diketahui dan yang belum pasti: perilaku Gemini tidak menggantikan panduan Google Search yang terdokumentasi mengenai hreflang dan versi bahasa.

Panduan platform: Google AI Overviews

Google AI Overviews dapat menautkan halaman pendukung; dasar kelayakannya tetap bertumpu pada konten yang mengutamakan pengguna dan dapat diindeks. Fitur ini bukan pengalih bahasa dan tidak menggantikan hreflang. Landasan teknisnya tetap berupa HTML versi lokal yang dapat dirayapi dan data terstruktur yang sesuai fakta. Karakteristik kontennya meliputi jawaban ringkas dan tajuk yang jelas dalam setiap bahasa. Sinyal otoritasnya sejalan dengan standar konten bermanfaat. Implikasi multibahasa: tidak ada jaminan halaman terjemahan mana pun akan disertakan dalam AI Overviews. Ukur melalui laporan generatif Search Console jika tersedia, dan pisahkan dari metrik indeks tradisional. Yang diketahui dan yang belum pasti: tidak ada alur kerja penerjemahan yang dapat menjanjikan penempatan di AI Overviews.

Peran GlotEO

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.