Panduan React SEO

TL;DR — React adalah tidak buruk untuk SEO — tetapi cara sebagian besar React apps adalah dibangun adalah. oleh default, React membangun halaman di pengunjung’s browser, so ketika sebuah mesin pencari pertama fetches Anda URL ini mendapatkan sebuah nearly empty halaman. Google dapat biasanya fill di blanks oleh berjalan Anda JavaScript, tetapi ini adalah lebih lambat dan riskier daripada hanya handing ini finished HTML. perbaiki adalah untuk render Anda halaman pada sebuah server atau di bangun time — biasanya dengan sebuah kerangka kerja like Berikutnya.js.

Mengapa React adalah berbeda

sebagian besar situs web — sebuah WordPress blog, say — kirim mesin pencari sebuah menyelesaikan halaman: server membangun HTML dan ships ini, headline dan semua. sebuah standard React app melakukan opposite. server mengirim sebuah hampir-empty shell (basically sebuah empty <div>), dan lalu JavaScript berjalan di browser untuk bangun nyata halaman.

itu’s great untuk slick, app-like experiences. ini adalah sebuah masalah untuk SEO, karena pertama hal sebuah crawler downloads adalah itu empty shell. Anda konten tidak di sana namun — ini hanya menampilkan up setelah JavaScript berjalan.

dapat’t Google hanya jalankan JavaScript?

Ya — Google berjalan sebuah nyata, up-untuk-date versi dari Chrome behind scenes dan dapat execute Anda JavaScript untuk see finished halaman. So React konten dapat mendapatkan terindeks. Bukti untuk klaim ini Googlebot uses an evergreen Chromium rendering engine and can execute JavaScript. Cakupan: Google Search; successful execution still depends on accessible resources and application behavior. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google: JavaScript SEO basics

tetapi ada catches:

• ini adalah delayed. Google melakukan rendering kemudian, di sebuah terpisah langkah itu’s queued up. So Anda konten dapat take lebih lama untuk tampilkan up di penelusuran.
• ini dapat fail. jika Anda halaman adalah slow untuk muat -nya konten, Google’s renderer dapat memberikan up sebelum konten muncul — dan indeks sebuah blank-ish halaman.
• lainnya crawler vary. Bing menangani JavaScript lebih sedikit reliably, dan AI providers melakukan tidak publish satu shared rendering contract. apa pun crawler itu fetches hanya awal HTML akan see sebuah default React app sebagai empty.

sederhana perbaiki

Mendapatkan Anda konten ke HTML sebelum ini reaches browser. Dua cara:

• rendering sisi server (SSR) — sebuah server membangun penuh halaman untuk setiap permintaan.
• Static situs generation (SSG) — halaman adalah dibangun ke finished HTML ahead dari time.

easiest path untuk either adalah Berikutnya.js, sebuah kerangka kerja dibangun pada React itu melakukan ini untuk Anda. (Remix adalah lainnya baik option.) dengan SSR atau SSG, Anda React situs hands crawler sebuah menyelesaikan halaman — dan ini adalah sebagai penelusuran-friendly sebagai apa pun wajar situs web.

sebuah sedikit lainnya hal untuk mendapatkan right

• gunakan wajar-looking URLs (/products), tidak hash URLs (/#/products) — Google dapat’t reliably indeks hash ones.
• membuat Anda tautan nyata tautan (<a href>), tidak clickable <div>s.
• Memberikan setiap halaman -nya own judul dan deskripsi itu perbarui ketika halaman perubahan.

ingin deeper versi — bagaimana Google’s renderer sebenarnya berfungsi, render-timeout trap itu membuat duplicate halaman, rendering-strategy perbandingan, dan cara test apa Google sees? Switch untuk Advanced tab.

TL;DR — React’s SEO masalah tidak React — ini adalah rendering sisi klien oleh default. CRA dan Vite + React ship sebuah empty shell dan bangun DOM di browser, so mentah HTML sebuah crawler fetches memiliki tanpa konten. Google dapat render ini melalui Web rendering Service (evergreen Chromium), tetapi rendering adalah queued secara terpisah, dapat menjadi delayed, dan dapat time out — Gary Illyes memiliki terdokumentasi render timeouts leaving boilerplate-hanya halaman itu lalu mendapatkan flagged sebagai duplicates. Bing renders JS lebih sedikit reliably; AI-crawler rendering varies oleh provider. perbaiki adalah rendering strategy: SSR atau SSG (sebagian besar easily Berikutnya.js atau Remix) puts konten di awal HTML — dan jika Anda’re hydrating server-dirender markup, gunakan hydrateRoot (tidak createRoot) dan treat apa pun server/client mismatch sebagai sebuah bug, tidak sebuah warning untuk suppress. lalu gunakan History API routing (tidak hash URLs) dan nyata <a href> tautan. untuk <head> metadata: React 19 hoists <title>/<meta>/<link> natively; pada React 18 atau untuk advanced perlu, gunakan react-helmet-async (tidak pernah unmaintained original react-helmet). Set correct HTTP kode status. ada Tidak peringkat bonus untuk SSR — ini hanya membuat konten reliably dapat diindeks. untuk umum rendering mechanics, see JavaScript SEO dan headless CMS topics.

Apa sebenarnya membuat React hard untuk SEO

React adalah sebuah component-based JavaScript library, dan out dari box — buat React App, Vite + React — ini berjalan client-side. server mengembalikan sebuah near-empty document (famously hanya sebuah <div id="root"></div>) plus sebuah bundle dari JavaScript, dan browser executes itu JavaScript untuk construct DOM. Contrast itu dengan sebuah server-dirender halaman (WordPress, sebuah Rails app), di mana penuh HTML — konten, heading, tautan — arrives di very pertama respons.

So pertanyaan itu decides semuanya adalah: apa di mentah HTML sebelum apa pun JavaScript berjalan? untuk sebuah default React app, jawaban adalah “hampir tidak ada apa pun.” (terjemahan) “hampir tidak ada apa pun.” Right-click → View Sumber pada sebuah CRA app dan Anda’ll see shell, tidak konten. itu’s persis apa sebuah crawler mendapatkan pada -nya pertama fetch.

untuk menjadi precise tentang di mana responsibility sebenarnya sits: React library tidak CSR-hanya. React DOM ships client rendering (createRoot), server rendering (streaming dan static APIs), dan hydration APIs — library mendukung semua dari ini. empty-shell masalah adalah sebuah property dari default toolchain (buat React App, Vite + React dengan Tidak server), yang wires up hanya client APIs dan tidak ada apa pun itu renders untuk HTML pada server. Tukar toolchain — Berikutnya.js, Remix, atau React’s own server-rendering APIs — dan yang sama library ships penuh HTML pada pertama respons.

ini adalah React-spesifik application dari lebih luas JavaScript SEO masalah — go di sana untuk umum failure modes (parity, interaction, state, timing). Di sini I’ll focus pada apa spesifik untuk React dan cara perbaiki ini.

Bagaimana Google sebenarnya memproses sebuah React app

Google menangani JavaScript di three phases: crawl → render → indeks. Googlebot fetches URL, dirender DOM adalah dibangun kemudian oleh Web rendering Service (WRS) — sebuah evergreen versi dari Chromium, yang sama mesin sebagai Chrome — dan lalu dirender output mendapatkan terindeks dan -nya tautan extracted. Bukti untuk klaim ini Google processes JavaScript pages through crawling, rendering, and indexing using its Web Rendering Service. Cakupan: Google Search rendering behavior. Tingkat keyakinan: tinggi · Diverifikasi: 2026-07-14 Google: JavaScript SEO basics

penting nuance adalah ketika rendering happens. rendering adalah resource-intensive, so ini adalah queued secara terpisah dari awal crawl. Martin Splitt described flow plainly: “we lakukan an HTTP request, dan we mendapatkan sesuatu back … some barebone HTML dan all it melakukan adalah load itu JavaScript dan jalankan itu JavaScript. Lalu, ini HTML … goes menjadi rendering. Rendering berjalan JavaScript — boom!, a lot dari konten happens itu tidak di sana sebelum.” (terjemahan) “kami melakukan sebuah HTTP permintaan, dan kami mendapatkan sesuatu back … beberapa barebone HTML dan semua ini melakukan adalah muat JavaScript dan jalankan JavaScript. lalu, ini HTML … goes ke rendering. rendering berjalan JavaScript — boom!, sebuah lot dari konten happens itu tidak di sana sebelum.” untuk sebuah CSR React halaman, ** “boom” (terjemahan) “boom” adalah Anda entire halaman** — none dari ini ada until itu render langkah berjalan.

sebuah caveat worth carrying: jangan di atas-indeks pada old “dua waves dari indexing” (terjemahan) “dua waves dari pengindeksan” model. Splitt himself walked ini back, calling wave “an oversimplification.” (terjemahan) “sebuah oversimplification.” practical takeaway tidak “ada a formal Wave 2 dengan didefinisikan timing” (terjemahan) “ada sebuah formal Wave 2 dengan didefinisikan timing” — ini adalah itu rendering adalah sebuah distinct, deferrable, fallible langkah, dan CSR puts 100% dari Anda konten pada wrong side dari ini.

Dua lebih facts tentang renderer itu bite React apps secara khusus:

• ini adalah stateless. Googlebot melakukan tidak retain localStorage, sessionStorage, atau cookies antara halaman memuat. apa pun konten atau routing itu bergantung pada client-side state adalah invisible untuk crawler.
• ini dapat memberikan up. renderer enforces sebuah timeout. jika Anda main konten memuat slowly — besar bundles, waterfalls dari API panggilan — rendering dapat finish sebelum Anda konten arrives, dan Google indeks incomplete halaman.

render-timeout trap (dan mengapa ini membuat duplicates)

«This failure mode is rarely explained well, and it’s the most damaging one for React apps. Gary Illyes described it directly: “I have a bunch of emails in my inbox where the issue is that the centerpiece took forever to load, so rendering timed out … and we were left with a bunch of pages that only had the boilerplate. With only the boilerplate, those pages are dups.” » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Walk melalui apa itu berarti untuk sebuah CSR React app. Anda header, nav, dan footer adalah boilerplate itu memuat fast. Anda sebenarnya halaman konten — bagian itu membuat setiap URL unique — adalah fetched dan dirender oleh JavaScript, dan ini memuat slowly. rendering times out. Google adalah left dengan header + nav + footer pada setiap URL. Now setiap halaman looks identical, dan Google marks them sebagai duplicates dari setiap lainnya di Search Console.

«Illyes’s own fix is the actionable bit: “Try to restructure the js calls such that the content (including marginal boilerplate) loads first and see if that helps.” But the more durable answer is to not depend on the render step for your main content at all — which means SSR or SSG. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tiga puluh lima, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

rendering strategies untuk React

ini adalah single sebagian besar impactful decision. options, roughly worst untuk best untuk SEO:

• CSR (default React). server mengirim shell; browser membangun semuanya. konten adalah delayed oleh render queue dan exposed untuk timeout. Worst untuk SEO. Fine untuk authenticated dashboards Anda tidak ingin terindeks anyway.

• Pre-rendering. bangun-time rendering tanpa sebuah penuh SSR kerangka kerja — alat like react-snap atau sebuah prerender service crawl Anda app dan save static HTML. Lebih ringan-weight; berfungsi untuk simpler, mostly-static situs.
• SSG (Static situs Generation). HTML dibangun setelah di deploy time dan disajikan sebagai static files. Fastest, konten selalu present di mentah HTML. Limited untuk highly dynamic atau per-pengguna konten; besar situs mendapatkan slow membangun.
• SSR (rendering sisi server). server executes React per permintaan dan mengirim penuh HTML. konten immediately tersedia untuk crawler; selalu fresh. Costs sebuah Node.js server dan slightly lebih tinggi TTFB.
• Hybrid / ISR (Incremental Static Regeneration). sebuah Berikutnya.js fitur itu regenerates static halaman di background — static speed dengan periodic freshness.

«And one strategy to skip on new builds: dynamic rendering — detecting the crawler user-agent and serving it a pre-rendered version while users get CSR. Google now calls it “a workaround and not a long-term solution” that “creates additional complexities and resource requirements,” and recommends server-side rendering, static rendering, or hydration instead. (Bing recommended dynamic rendering back in 2018, but that guidance is dated — since 2019 Bingbot renders via Microsoft Edge / Chromium, and SSR/SSG is the right call there too.) » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian empat puluh, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

ada sebuah myth worth killing di sini: SSR adalah tidak sebuah peringkat boost. sebagai John Mueller put ini, “there are no SEO ranking bonuses for implementing it one way or another” (terjemahan) “tidak ada SEO peringkat bonuses untuk implementing ini satu cara atau lainnya” — berbeda rendering metode adalah “just different ways of making the content indexable.” (terjemahan) “hanya berbeda cara dari membuat konten dapat diindeks.” SSR’s nilai adalah reliable indexability (dan sering better Core Web Vitals dari sebuah lebih cepat pertama Contentful Paint), tidak sebuah magic peringkat lever.

Hydration harus match persis — itu’s sebuah bug boundary, tidak sebuah SEO technique

SSR dan SSG keduanya hand browser HTML itu sudah memiliki Anda konten di ini. React lalu memiliki untuk attach untuk itu markup pada client, dan itu’s sebuah berbeda API dari sebuah plain client render:

• createRoot renders React ke sebuah DOM node dari scratch — Tidak existing markup yang diharapkan. gunakan ini untuk CSR-hanya apps.
• hydrateRoot attaches React untuk HTML itu react-dom/server sudah generated, dan expects client’s pertama render untuk produce output identical untuk apa server dikirim. jika Anda’re SSR/SSG, Anda ingin hydrateRoot, tidak createRoot — calling createRoot pada server-dirender markup berarti React discards ini dan re-renders dari scratch, throwing away tepat SEO benefit Anda siapkan SSR/SSG untuk mendapatkan.

Mismatches antara server dan client output adalah sebuah nyata risk di React apps melakukan SEO memperbaiki — sebuah Date.now() di sebuah judul, sebuah locale-dependent format, sebuah if (typeof window !== 'undefined') branch. React’s own docs adalah blunt tentang apa happens lalu: ini warns tentang mismatches di development, tetapi “there are no guarantees that attribute differences will be patched up in case of mismatches.” (terjemahan) “tidak ada jaminan itu attribute differences akan menjadi patched up di case dari mismatches.” guidance adalah untuk treat mismatches sebagai bugs dan perbaiki them — tidak untuk suppress warning dan assume konten parity. untuk SEO secara khusus: jangan assume Anda dirender konten dan metadata match apa server dikirim hanya karena halaman looks right di browser. Diff server HTML terhadap post-hydration DOM secara langsung ( View Sumber vs. Inspect Element periksa dari testing bagian di bawah adalah fast versi dari ini) alih-alih trusting sebuah bersih console.

React Router dan struktur URL

React Router menangani navigation di browser tanpa server round-trips, yang adalah fine untuk SEO jika configured correctly:

• gunakan History API, tidak hash routing. BrowserRouter menggunakan pushState dan produces bersih, dapat di-crawl URLs (/products). HashRouter produces /#/products, dan Google cannot reliably resolve hash-based URLs — old AJAX-crawling scheme itu dibuat them berfungsi adalah deprecated. gunakan History API.
• ** server harus tangani itu URLs too.** dengan History API routing, setiap “halaman” (terjemahan) “halaman” perlu sebuah nyata URL server dapat respond untuk — critical untuk SSR, dan necessary so sebuah direct hit atau refresh pada /products tidak 404.
• <Link> renders sebuah nyata anchor. React Router’s <Link> component outputs sebuah <a href>, yang adalah dapat di-crawl. Navigation dibangun pada onClick handlers tanpa sebuah anchor adalah tidak dapat di-crawl — Google hanya mengikuti nyata <a href> tautan.

Managing metadata: react-helmet, react-helmet-async, dan React 19’s native tags

melalui React 18, React tidak pernah diperbarui document <head> pada route perubahan natively — setiap route’s <title>, deskripsi meta, canonical, dan Open Graph / Twitter tags memiliki untuk menjadi set oleh sebuah library. React 19 changed itu: components dapat render <title>, <meta>, dan <link> tags secara langsung, dan React hoists them untuk <head> pada -nya own — berfungsi dengan client-hanya apps, streaming SSR, dan server Components alike. React 19.2 adalah saat ini stable rilis sebagai dari pertengahan 2026, so ini now applies untuk apa pun app pada sebuah saat ini React versi.

itu berarti right jawaban bergantung pada Anda React versi dan apa Anda sebenarnya perlu:

• React 19, standalone app, hanya basic tags. Render <title>/<meta>/<link> di Anda components secara langsung — Tidak library needed.
• React 19, tetapi Anda perlu htmlAttributes/bodyAttributes, SSR context serialization, onChangeClientState, prioritizeSeoTags, atau titleTemplate. Native hoisting tidak cover ini — gunakan react-helmet-async. -nya own docs panggil ini out secara langsung: tanpa itu spesifik perlu, Anda dapat tidak perlu package di semua pada React 19.
• React 18 atau sebelumnya, standalone app. Native hoisting tidak exist namun — gunakan react-helmet-async. ini adalah actively maintained (major versi 3, dan ini detects Anda React versi di runtime) dan mendukung SSR.
• ** original react-helmet.** jangan gunakan ini, pada apa pun React versi. ini adalah unmaintained — Tidak rilis since 2020 — dan memiliki known bugs di bawah React 18’s concurrent rendering.
• Berikutnya.js apps. gunakan Berikutnya’s own Metadata API ( metadata export / generateMetadata di App Router) regardless dari React versi — jangan bolt pada Helmet, dan jangan rely pada native React tag hoisting either. kerangka kerja owns document di sebuah Berikutnya.js app.

Satu reliability aturan carries di atas dari JavaScript SEO umumnya, dan applies Tidak penting yang dari di atas Anda gunakan: HTML-tingkat metadata beats JS-injected metadata. sebuah canonical tag injected oleh client-side JavaScript adalah far lebih sedikit reliable daripada satu present di server-dirender HTML — yang adalah lainnya argument untuk SSR/SSG.

AI crawler membuat ini urgent

2026 wrinkle: rendering perilaku untuk GPTBot (OpenAI), ClaudeBot (Anthropic), PerplexityBot, dan lainnya agents adalah provider- dan versi-spesifik. sebuah CSR React app ships setiap crawler yang sama empty shell pertama Googlebot fetch sees, dan saat ini provider documentation melakukan tidak establish satu shared render langkah itu akan fill ini di. sebagai generative mesin become sebuah bigger penemuan surface, SSR/SSG berhenti menjadi sebuah Google-hanya concern: mentah HTML maximizes coverage tanpa assuming sebuah universal crawler limitation. ( CMS headless topic covers ini AI-crawler reality di lebih depth.)

Testing apa Google sebenarnya sees

jangan trust Anda browser — Anda DevTools Inspector menampilkan dirender DOM (post-JavaScript), yang adalah persis apa sebuah crawler-tanpa-JS melakukan tidak see. gunakan right alat:

«- View Source vs. Inspect Element. View Source is the raw HTML (what crawlers get before JS). Inspect Element is the rendered DOM. If content is in Inspect but missing from View Source, it’s JavaScript-dependent.

• URL Inspection Tool (Search Console) — the most authoritative check. Run a live test and look at the rendered HTML, the screenshot, and the page resources / console messages to see what Google actually rendered and what failed to load.
• Rich Results Test — a quick rendered-HTML check without verifying the site.
• Disable JavaScript in DevTools and reload — a fast simulation of a crawler that doesn’t execute JS (and a decent proxy for what AI crawlers see).
• Search Console Coverage report — “Discovered, currently not indexed” can signal a render queue backlog; clusters of duplicate pages can signal the render-timeout boilerplate trap.
• JS-rendering crawlers — Ahrefs Site Audit and Screaming Frog (JS-rendering mode) render pages at scale so you can diff raw vs. rendered across the whole site. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian lima puluh delapan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Berikutnya.js dan Remix ( practical jawaban)

jika SEO penting dan Anda’re pada mentah CSR React, migrating untuk sebuah kerangka kerja itu renders pada server adalah biasanya right move. Berikutnya.js adalah purpose-dibangun untuk ini — SSR dan SSG out dari box, ISR, App Router, sebuah dibangun-di Metadata API, automatic code splitting, dan image optimization. Remix adalah web-standards alternative, dibangun pada fetch/permintaan/respons dengan SSR oleh default dan sebuah strong progressive-enhancement story. Berikutnya.js mendapatkan -nya own deep dive — I’m mempertahankan ini brief di sini pada purpose. poin untuk React SEO adalah lebih sempit: kerangka kerja ada untuk move Anda konten out dari browser-hanya render langkah dan ke awal HTML.

React adalah baik untuk SEO ketika Anda treat rendering sebagai sebuah architecture decision alih-alih sebuah afterthought. Pick SSR atau SSG untuk apa pun itu perlu untuk peringkat, pertahankan tautan dan routing honest, manage metadata per route, dan let Google’s own alat — tidak Anda browser — tell Anda apa sebenarnya dirender.

AI summary

sebuah condensed take pada Advanced versi:

«- React isn’t bad for SEO — CSR by default is. React the library supports client, server, static, and streaming rendering; it’s the default CRA/Vite toolchain (no server) that ships an empty <div id="root"> shell and builds the DOM in the browser, so the raw HTML a crawler fetches has no content.

• Google can render React via the Web Rendering Service (evergreen Chromium), but rendering is queued separately, can be delayed, and is stateless (no cookies/localStorage/sessionStorage between loads).
• The render-timeout trap: if main content loads slowly, rendering times out and Google indexes a boilerplate-only page. Across many URLs those look identical and get flagged as duplicates (Gary Illyes’s documented failure mode). Fix: load content first — or better, don’t depend on the render step (SSR/SSG).
• Rendering strategies, best→worst for SEO: SSG (lowest risk) ≈ SSR ≈ pre-render > ISR/hybrid > CSR (highest risk). Dynamic rendering is deprecated — Google recommends SSR, static rendering, or hydration.
• No ranking bonus for SSR — Mueller: “no SEO ranking bonuses for implementing it one way or another.” It just makes content reliably indexable.
• Hydration is a bug boundary, not a technique: SSR/SSG apps hydrate with hydrateRoot (not createRoot), which expects the client’s first render to match the server’s exactly. React warns on mismatches in dev but doesn’t guarantee patching them » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh enam, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) « — treat mismatches as bugs and verify server vs. post-hydration DOM directly.
• React Router: use History API (BrowserRouter), not hash routing; the server must handle those URLs; <Link> renders crawlable <a href> — onClick-only nav doesn’t.
• Metadata: React 19 natively hoists <title>/<meta>/<link> to <head> for standalone apps needing only the basics. On React 18, or for advanced needs (SSR context, titleTemplate), use react-helmet-async — never the original react-helmet, unmaintained since 2020. In Next.js, use the Metadata API regardless of React version. HTML-level beats JS-injected.
• AI-crawler rendering is provider-specific — CSR React depends on client execution that each crawler may or may not support. SSR/SSG puts content in the initial HTML and maximizes coverage.
• Test with View Source vs. Inspect, URL Inspection (rendered HTML + screenshot + console), Rich Results Test, JS-disabled reload, and a JS-rendering crawler.
• Next.js / Remix are the practical fix — they move content into the initial HTML. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian enam puluh enam, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Dokumentasi resmi

Utama-sumber documentation dari mesin pencari.

Google

• memahami JavaScript SEO Basics — crawl → render → indeks pipeline, SPAs, History API, canonical URLs dengan JS, dan bermakna HTTP kode status.
• Perbaiki Penelusuran-Related JavaScript masalah — soft-404 menangani di SPAs, stateless renderer (Tidak cookies/localStorage), dan testing dengan pemeriksaan URL.
• Dynamic rendering (deprecated workaround) — mengapa Google deprecated ini dan apa untuk gunakan alih-alih (SSR, static rendering, hydration).
• Introducing sebuah baru JavaScript SEO video series — Martin Splitt’s series, covering React, Angular, dan Vue secara khusus.
• di-Depth Guide untuk Bagaimana Google Search berfungsi — di mana rendering sits di crawl → indeks → sajikan.

Bing / Microsoft

• baru evergreen Bingbot (Microsoft Edge) — Bingbot rendering JavaScript melalui yang sama Chromium platform sebagai Googlebot.
• bingbot Series: JavaScript, Dynamic rendering, dan Cloaking — Bing’s older (2018) take; berguna untuk historical dynamic-rendering recommendation.

Teknis reference

• React v19 (rilis notes) — native mendukung untuk rendering <title>, <meta>, dan <link> tags di components, hoisted secara otomatis untuk <head>.
• createRoot / hydrateRoot (React docs) — client-render vs. hydration API split, dan caveat itu mismatches tidak guaranteed untuk menjadi patched.
• react-helmet-async (npm) — maintained fork untuk managing <head> di standalone React apps, React 18 atau advanced React 19 perlu.

Quotes dari sumber

pada—record statements dari Google’s Penelusuran team. setiap penelusuran-mesin deep tautan jumps untuk quoted passage pada sumber halaman; staf quotes di bawah adalah ditautkan untuk coverage itu reproduced them.

Google docs — SPAs dan dynamic rendering

«- “Single-page applications (SPA) are websites that load an HTML document once and fetch any additional content using JavaScript APIs.” — Google Search Central docs. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- “Dynamic rendering was a workaround and not a long-term solution for problems with JavaScript-generated content in search engines.” — Google Search Central docs. Jump to quote » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian tujuh puluh sembilan, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Martin Splitt, Google — bagaimana JavaScript halaman adalah terindeks

• “Apa we lakukan adalah we lakukan an HTTP request, dan we mendapatkan sesuatu back, right — some HTML, maybe ini a barebone HTML dan all it melakukan adalah load itu JavaScript dan jalankan itu JavaScript. Lalu, ini HTML itu we mendapat dari itu original HTTP Mendapatkan request dari itu crawl, goes menjadi rendering. Rendering berjalan JavaScript — boom!, a lot dari konten happens itu tidak di sana sebelum.” (terjemahan) “Apa kami melakukan adalah kami melakukan sebuah HTTP permintaan, dan kami mendapatkan sesuatu back, right — beberapa HTML, maybe ini adalah sebuah barebone HTML dan semua ini melakukan adalah muat JavaScript dan jalankan JavaScript. lalu, ini HTML itu kami mendapat dari original HTTP Mendapatkan permintaan dari crawl, goes ke rendering. rendering berjalan JavaScript — boom!, sebuah lot dari konten happens itu tidak di sana sebelum.” Baca coverage (mesin pencari Journal)
• pada dua-waves model menjadi imprecise: “there’s no such thing as the second wave of crawling-ish. The wave is an oversimplification.” (terjemahan) “ada Tidak such hal sebagai kedua wave dari crawling-ish. wave adalah sebuah oversimplification.” Baca coverage (mesin pencari Roundtable)

Gary Illyes, Google — render-timeout duplicate-konten trap

«- “I have a bunch of emails in my inbox where the issue is that the centerpiece took forever to load, so rendering timed out (my most likely explanation) and we were left with a bunch of pages that only had the boilerplate. With only the boilerplate, those pages are dups.”

• “Do you have a JavaScript-heavy site and you see lots of dups reported in Search Console? Try to restructure the js calls such that the content (including marginal boilerplate) loads first and see if that helps.” Read the post (LinkedIn) » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian delapan puluh tiga, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

John Mueller, Google — Tidak peringkat bonus untuk rendering pilihan

• “There are no SEO ranking bonuses for implementing it one way or another.” (terjemahan) “tidak ada SEO peringkat bonuses untuk implementing ini satu cara atau lainnya.” mereka’re “just different ways of making the content indexable (as is client side rendering).” (terjemahan) “hanya berbeda cara dari membuat konten dapat diindeks (sebagai adalah client side rendering).” Baca coverage (mesin pencari Roundtable)

React SEO checklist

sebuah lulus untuk konfirmasi crawler dapat see dan indeks Anda React app:

• penting konten muncul di View Sumber (mentah HTML), tidak hanya di dirender DOM — jika ini adalah missing, Anda’re depending pada CSR.
• halaman itu perlu untuk peringkat gunakan SSR atau SSG (Berikutnya.js, Remix, atau sebuah pre-render langkah), tidak mentah rendering sisi klien.
• Main konten memuat fast dan pertama — Tidak slow API waterfalls itu dapat trip render timeout ke sebuah boilerplate-hanya halaman.
• Routing menggunakan History API (BrowserRouter), tidak HashRouter / #/ URLs.
• server dapat respond untuk setiap client-side route (Tidak 404 pada direct hit atau refresh).
• Navigation menggunakan nyata <a href> tautan (React Router <Link>), tidak onClick-hanya handlers pada <div>/<button>.
• setiap route sets sebuah unique <title>, deskripsi meta, canonical, dan OG tags itu perbarui pada navigation.
• Metadata matches Anda versi: React 19 native <title>/<meta>/<link> tags untuk basics, react-helmet-async untuk React 18 atau advanced perlu (tidak pernah deprecated react-helmet), atau Berikutnya.js Metadata API jika pada Berikutnya.js.
• jika server-dirender, Anda’re hydrating dengan hydrateRoot (tidak createRoot), dan apa pun dev-mode hydration mismatch warning adalah treated sebagai sebuah bug untuk perbaiki.
• Client-side “tidak ditemukan” (terjemahan) “tidak ditemukan” routes mengembalikan nyata 404 (atau sebuah noindex), tidak sebuah soft-404 dengan sebuah 200 status.
• JavaScript dan CSS adalah tidak blocked di robots.txt (Google tidak akan render dari blocked files).
• Tidak critical konten bergantung pada cookies / localStorage / sessionStorage ( renderer adalah stateless).
• Verified di pemeriksaan URL: dirender HTML dan screenshot tampilkan Anda nyata konten.
• Coverage report diperiksa untuk “Discovered, currently not indexed” (terjemahan) “ditemukan, saat ini tidak terindeks” (render backlog) dan duplicate clusters (render-timeout trap).

mental models

1. satu-satunya pertanyaan itu penting: apa di mentah HTML? View Sumber sebelum apa pun JavaScript berjalan adalah apa sebuah pertama-fetch crawler — dan sebagian besar AI crawler, forever — see. jika Anda konten tidak di sana, Anda memiliki sebuah React SEO masalah regardless dari bagaimana baik halaman looks di Anda browser.

2. rendering adalah sebuah terpisah, fallible langkah. crawl → render → indeks. CSR puts 100% dari Anda konten pada far side dari render langkah, yang adalah queued, delayed, stateless, dan dapat time out. SSR/SSG move Anda konten sebelum itu langkah. jangan di atas-trust “dua waves” (terjemahan) “dua waves” model — Splitt himself called ini sebuah oversimplification.

3. boilerplate-duplicate failure mode. Slow konten + render timeout = setiap URL renders sebagai header/nav/footer hanya = Google sees duplicates. perbaiki adalah structural: muat konten pertama, atau berhenti depending pada render langkah.

4. rendering decision tree.

• Publik konten itu harus peringkat atau menjadi cited oleh AI → SSG (static) atau SSR (fresh).
• Mostly static (blog, docs, marketing) → SSG, atau ISR pada sebuah timer.
• Frequently mengubah, harus menjadi fresh → SSR.
• Logged-di dashboard, tidak dimaksudkan untuk menjadi terindeks → CSR adalah fine.
• baru bangun itu perlu SEO → reach untuk Berikutnya.js / Remix, tidak dynamic rendering.

5. HTML-pertama, JS-kedua untuk setiap SEO sinyal. konten, tautan, canonicals, judul, data terstruktur — mendapatkan them ke server-dirender HTML. Treat JS-injected SEO sinyal (including JS tag canonical dan react-helmet pada CSR) sebagai sebuah fallback, tidak plan: Google sees them late, dan AI crawler tidak di semua.

React SEO — cheat sheet

rendering modes di sebuah glance

umum React SEO mistakes → memperbaiki

Fast aturan

• renderer adalah evergreen Chromium, queued, stateless, dan times out.
• Tidak peringkat bonus untuk SSR — ini adalah tentang reliable indexability (Mueller).
• AI-crawler rendering varies oleh provider → mentah HTML adalah safest coverage baseline.
• di Berikutnya.js, gunakan Metadata API — tidak React Helmet.
• Bing renders JS (melalui Edge) tetapi lebih sedikit reliably; SSR/SSG adalah safe panggil di sana too.

periksa apa server mengirim sebelum React berjalan

Put representative dapat diindeks routes di urls.txt. ini menemukan CSR shells dan missing server-dirender head markup di mentah respons:

while IFS= read -r url; do
  html=$(mktemp)
  status=$(curl -sS -o "$html" -w '%{http_code}' "$url")
  bytes=$(wc -c < "$html" | tr -d ' ')
  title_count=$(grep -Eio '<title>[^<]*</title>' "$html" | wc -l | tr -d ' ')
  canonical_count=$(grep -Eio '<link[^>]+rel=["'"']canonical["'"'][^>]*>' "$html" | wc -l | tr -d ' ')
  printf '%s\t%s\tbytes=%s\ttitles=%s\tcanonicals=%s\n' "$status" "$url" "$bytes" "$title_count" "$canonical_count"
  rm -f "$html"
done < urls.txt

kecil byte size adalah hanya sebuah review sinyal, tidak sebuah error oleh itself. Bandingkan flagged mentah respons dengan dirender HTML dan konfirmasi itu utama text dan dapat di-crawl tautan adalah present.

alat untuk auditing React SEO

• View Sumber vs. Inspect Element — fastest pertama periksa. View Sumber adalah mentah HTML (apa sebuah crawler mendapatkan sebelum JS); Inspect Element adalah dirender DOM. konten di Inspect tetapi tidak View Sumber adalah JavaScript-dependent.
• pemeriksaan URL (Google Search Console) — sumber kebenaran. Jalankan sebuah pengujian langsung, lalu view dirender HTML, screenshot, halaman resources (apa dimuat vs. adalah blocked), dan console messages untuk see persis apa Google dirender.
• Rich hasil Test — sebuah quick dirender-HTML dan structured-data periksa untuk sebuah single URL tanpa verifying situs.
• Chrome DevTools — disable JavaScript (Command Menu → “Disable JavaScript” (terjemahan) “Disable JavaScript”) dan reload untuk inspect apa sebuah HTML-hanya fetcher menerima. ini adalah sebuah coverage periksa, tidak proof dari apa pun named AI crawler’s saat ini rendering perilaku.
• Search Console Coverage report — watch “Discovered, currently not indexed” (terjemahan) “ditemukan, saat ini tidak terindeks” (render backlog) dan duplicate clusters ( render-timeout boilerplate trap).
• JS-rendering crawler — Ahrefs situs Audit dan Screaming Frog SEO Spider (JS-rendering mode) execute JavaScript so Anda dapat diff mentah vs. dirender HTML di seluruh situs.

Mistakes React tim sebenarnya membuat

Concrete patterns I pertahankan seeing di CSR React apps itu mendapatkan shipped, tidak hypothetical ones. setiap adalah sebuah prevention move — catch ini sebelum ini costs Anda pengindeksan.

Shipping mentah CRA/Vite CSR untuk halaman itu perlu untuk peringkat

Tim ship buat React App atau Vite + React straight untuk production untuk marketing halaman, blog posts, atau product halaman — tepat konten itu perlu untuk tampilkan up di penelusuran. Mengapa ini adalah wrong: server mengirim sebuah hampir-empty <div id="root"> shell; Anda nyata konten hanya ada setelah JavaScript berjalan, so ini adalah delayed oleh Google’s render queue dan dapat menjadi invisible untuk apa pun AI crawler itu fetches awal HTML tanpa client execution. Apa untuk melakukan alih-alih: move apa pun itu perlu untuk peringkat atau menjadi cited untuk SSR atau SSG — Berikutnya.js atau Remix adalah easiest paths — dan reserve mentah CSR untuk logged-di, non-terindeks surfaces like dashboards.

Routing pada hash URLs (HashRouter)

Reaching untuk React Router’s HashRouter karena ini adalah path dari least resistance — Tidak server config needed, berfungsi pada apa pun static host. Mengapa ini adalah wrong: Google dapat’t reliably resolve /#/products-style URLs; old AJAX-crawling scheme itu dibuat hash fragments dapat di-crawl adalah deprecated. Apa untuk melakukan alih-alih: gunakan BrowserRouter ( History API) dan pastikan server responds untuk setiap route ini produces, including sebuah direct hit atau refresh pada sebuah deep tautan.

membangun navigation pada onClick alih-alih nyata anchors

Wiring up navigation dengan onClick handlers pada sebuah <div> atau <button>, sering karena ini adalah easier untuk style atau hindari default tautan perilaku. Mengapa ini adalah wrong: Google hanya mengikuti nyata <a href> tautan — sebuah <div> dengan sebuah click handler adalah invisible untuk crawling, Tidak penting bagaimana ini behaves untuk sebuah mouse. Apa untuk melakukan alih-alih: gunakan React Router’s <Link> component, yang renders sebuah sebenarnya <a href> di bawah hood, atau sebuah plain anchor tag untuk external navigation.

memuat main konten behind sebuah slow API waterfall

Fetching header dan nav fast, lalu chaining several API panggilan sebelum sebenarnya halaman konten — bagian itu membuat setiap URL unique — muncul. Mengapa ini adalah wrong: Google’s Web rendering Service enforces sebuah timeout; jika Anda centerpiece konten memuat slowly, rendering finishes sebelum ini arrives, dan Google adalah left pengindeksan boilerplate-hanya halaman itu lalu mendapatkan flagged sebagai duplicates dari setiap lainnya — tepat failure mode Gary Illyes described. Apa untuk melakukan alih-alih: restructure permintaan so main konten memuat pertama, atau hapus dependency pada rendering sisi klien entirely dengan SSR/SSG.

masih menggunakan original react-helmet

Reaching untuk react-helmet untuk per-route <title> dan meta tags karena ini adalah library setiap older tutorial recommends. Mengapa ini adalah wrong: original package adalah unmaintained — Tidak rilis since 2020 — dan memiliki known issues di bawah React 18’s concurrent rendering dan SSR. Apa untuk melakukan alih-alih: pada React 19, render <title>/<meta>/<link> secara langsung di Anda components dan let React hoist them (Tidak library needed untuk basics). pada React 18, atau untuk advanced perlu like SSR context serialization atau titleTemplate, gunakan react-helmet-async, maintained fork. pada Berikutnya.js, gunakan -nya dibangun-di Metadata API dan jangan bolt Helmet pada top dari ini.

Blocking JavaScript atau CSS di robots.txt

Blocking /static/js/ atau sebuah bundler’s asset folder di robots.txt, sometimes left di atas dari sebuah old crawl-budget concern atau copied dari lainnya situs’s config. Mengapa ini adalah wrong: Google dapat’t render apa ini tidak diizinkan untuk fetch — sebuah blocked bundle berarti Web rendering Service membangun sebuah incomplete (atau empty) DOM, bahkan though Anda kode sumber adalah fine. Apa untuk melakukan alih-alih: izinkan crawler untuk fetch Anda JS dan CSS, dan konfirmasi ini dengan pemeriksaan URL alat’s halaman-resources periksa untuk see tidak ada apa pun critical adalah blocked.

Uji pemahaman Anda: React SEO

Five quick pertanyaan pada membuat React apps dapat di-crawl dan dapat diindeks. Pick sebuah jawaban untuk setiap, lalu periksa.

Resources worth Anda time

My related writing

• React SEO: Best Practices untuk membuat ini SEO-Friendly (Ahrefs) — React SEO guide pada Ahrefs, yang I reviewed; ini artikel adalah deeper, sumber-ditautkan treatment.
• JavaScript SEO: sebuah Definitive Guide (Ahrefs) — my penuh guide untuk underlying rendering mechanics: DOM parity, paling-restrictive-directive aturan, canonical dan meta-tag menangani, dan rendering choices. Baca ini untuk umum case behind React-spesifik memperbaiki.
• Beginner’s Guide untuk SEO teknis (Ahrefs) — di mana React/JavaScript SEO fits di bigger picture.

My speaking

• Bagaimana Penelusuran berfungsi (SlideShare) — my walkthrough dari crawling, rendering, pengindeksan, dan peringkat. (My standing disclaimer applies: “Ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.” (terjemahan) “ini adalah my understanding dari sistem… tidak going untuk menjadi 100% menyelesaikan atau accurate.”)

«From around the industry

• Understand JavaScript SEO Basics (Google) — primary-source docs on SPAs, the History API, and canonical/status-code handling.
• Dynamic Rendering (deprecated) (Google) — why dynamic rendering is a workaround, not a long-term solution.
• Martin Splitt Explains How JavaScript Sites Are Indexed (Search Engine Journal) — the “barebone HTML … boom” explanation of the crawl → render → index flow.
• Gary Illyes on JS-heavy sites and duplicate content (LinkedIn) — the render-timeout-to-duplicates failure mode, in his own words.
• How to fix technical SEO issues on client-side React apps (Search Engine Land) — a real-world case study on auditing and fixing a CSR React app.
• SSR vs. dynamic rendering — no ranking difference (Search Engine Roundtable) — Mueller’s “no SEO ranking bonuses” statement. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat puluh empat, bagian kecil satu: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.) «- react-helmet-async (npm) — the maintained head-management library for standalone React.
• The new evergreen Bingbot (Microsoft Edge) (Bing) — Bingbot rendering JS via Chromium, like Googlebot. » (Terjemahan) (Ringkasan bahasa Indonesia untuk bagian seratus empat puluh empat, bagian kecil dua: teks sumber dipertahankan agar dapat diperiksa dalam tinjauan penutur asli.)

Videos

• Google Search Central — JavaScript SEO series (YouTube) — Martin Splitt’s official video series covers SEO untuk React, Angular, dan Vue secara khusus, walking melalui crawl → render → indeks proses dan umum memperbaiki. Series announcement · Channel

Log perubahan