Ngôn ngữ

Hướng dẫn về React SEO

React renders client-side theo mặc định, so các crawler see an empty shell until JavaScript chạy. Ở đây cách Google thực ra xử lý React apps, mà kết xuất strategy để pick, và cách sửa routing, metadata, và đó render-timeout duplicate-nội dung trap.

Xuất bản lần đầu: 26 thg 6, 2026 · Cập nhật lần cuối: 8 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2

React không phải bad cho SEO — nhưng client-side kết xuất theo mặc định là. Out of đó box (CRA, Vite + React), đó máy chủ ships an empty shell và đó trình duyệt xây dựng đó trang, so các crawler see không có gì until JavaScript chạy. Google có thể render React qua của nó Web Kết xuất Service, nhưng kết xuất là queued, delayed, và có thể time out — Gary Illyes có shown render timeouts leaving boilerplate-chỉ các trang đó nhận marked as duplicates. AI-crawler kết xuất contracts vary by provider, so CSR-chỉ nội dung adds một coverage risk. Đó cách sửa là kết xuất strategy: SSR hoặc SSG (hầu hết easily Tiếp theo.js hoặc Remix) diễn đạt nội dung trong đó ban đầu HTML, hydrated với hydrateRoot (không createRoot) so máy chủ và client output match chính xác. Thì dùng History API routing, real <a href> links, correct các mã trạng thái, và version-appropriate metadata: React 19 hoists <title>/<meta>/<link> natively, nếu không react-helmet-async (không bao giờ đó unmaintained original react-helmet).

Tóm tắt — React SEO vấn đề không phải React — nó client-side kết xuất theo mặc định. CRA và Vite + React ship rỗng shell và xây dựng DOM trong trình duyệt, so thô HTML crawler fetches có Không có nội dung. Google có thể render nó qua Web Kết xuất Service (evergreen Chromium), nhưng kết xuất là queued riêng, có thể là delayed, và có thể time out — Gary Illyes có được ghi lại render timeouts leaving boilerplate-chỉ các trang đó sau đó nhận flagged as duplicates. Bing renders JS ít hơn reliably; AI-crawler kết xuất varies by provider. khắc phục là kết xuất strategy: SSR hoặc SSG (phần lớn easily tiếp theo.js hoặc Remix) diễn đạt nội dung trong ban đầu HTML — và nếu bạn’re hydrating máy chủ-được kết xuất markup, sử dụng hydrateRoot (không createRoot) và treat bất kỳ máy chủ/client mismatch as bug, không warning để suppress. sau đó sử dụng History API routing (không hash các URL) và thực <a href> links. cho <head> metadata: React 19 hoists <title>/<meta>/<link> natively; on React 18 hoặc cho Nâng cao cần, sử dụng react-helmet-async (không bao giờ unmaintained gốc react-helmet). đặt đúng HTTP các mã trạng thái. có không xếp hạng bonus cho SSR — nó chỉ làm nội dung reliably indexable. cho chung kết xuất mechanics, see JavaScript SEO và headless CMS topics.

Điều gì thực ra làm React hard Đối với SEO

React là component-based JavaScript library, và out của box — Tạo React App, Vite + React — nó chạy client-side. máy chủ trả về near-rỗng document (famously chỉ <div id="root"></div>) plus bundle của JavaScript, và trình duyệt executes đó JavaScript để construct DOM. Contrast đó với máy chủ-được kết xuất trang (WordPress, Rails app), nơi đầy đủ HTML — nội dung, headings, links — arrives trong rất đầu tiên phản hồi.

So đó câu hỏi đó decides mọi thứ là: điều gì là trong đó thô HTML trước bất kỳ JavaScript chạy? Cho một default React app, đó câu trả lời là “almost nothing.” (bản dịch) «gần như không có gì.» Right-nhấp → View Nguồn on một CRA app và bạn’ll see đó shell, không đó nội dung. đó là chính xác điều gì một crawler nhận on của nó đầu tiên fetch.

để là precise về nơi responsibility thực ra sits: React library không phải CSR-chỉ. React DOM ships client kết xuất (createRoot), máy chủ kết xuất (streaming và static APIs), và hydration APIs — library hỗ trợ tất cả nó. rỗng-shell vấn đề là thuộc tính của default toolchain (Tạo React App, Vite + React với không máy chủ), mà wires lên chỉ client APIs và không có gì đó renders để HTML on máy chủ. Đổi toolchain — tiếp theo.js, Remix, hoặc React own máy chủ-kết xuất APIs — và giống nhau library ships đầy đủ HTML on đầu tiên phản hồi.

Đây là React-cụ thể application của rộng hơn JavaScript SEO vấn đề — go ở đó cho chung thất bại modes (parity, interaction, state, timing). Ở đây I’ll focus on Điều gì cụ thể để React và Cách khắc phục nó.

Cách Google thực ra xử lý React app

Google xử lý JavaScript trong three phases: crawl → render → chỉ mục. Googlebot fetches URL, được kết xuất DOM là được xây dựng sau đó by Web Kết xuất Service (WRS) — evergreen version của Chromium, giống nhau engine as Chrome — và sau đó được kết xuất output nhận được lập chỉ mục và của nó links extracted. Evidence for this claim Google processes JavaScript pages through crawling, rendering, and indexing using its Web Rendering Service. Scope: Google Search rendering behavior. Confidence: high · Verified: Google: JavaScript SEO basics

Đó quan trọng nuance là khi kết xuất happens. Kết xuất là tài nguyên-intensive, so đây là queued riêng từ đó ban đầu crawl. Martin Splitt described đó flow plainly: “we do an HTTP request, and we get something back … some barebone HTML and all it does is load the JavaScript and run the JavaScript. Then, this HTML … goes into rendering. Rendering runs JavaScript — boom!, a lot of content happens that wasn’t there before.” (bản dịch) «we làm an HTTP yêu cầu, và we nhận điều gì đó lại … some barebone HTML và all điều này làm là load đó JavaScript và chạy đó JavaScript. Thì, này HTML … goes vào kết xuất. Kết xuất chạy JavaScript — boom!, một lot of nội dung happens đó đã không ở đó trước.» Cho một CSR React trang, đó “boom” là của bạn entire trang — none of điều này tồn tại until đó render step chạy.

MỘT caveat worth carrying: không over-chỉ mục on đó old “two waves of indexing” (bản dịch) «hai waves of lập chỉ mục» model. Splitt himself walked điều này lại, calling đó wave “an oversimplification.” (bản dịch) «an oversimplification.» Đó practical takeaway không “there’s a formal Wave 2 with defined timing” (bản dịch) «có một formal Wave 2 với được định nghĩa timing» — đây là đó kết xuất là một distinct, deferrable, fallible step, và CSR diễn đạt 100% of nội dung của bạn on đó sai side of điều này.

Hai nhiều hơn facts về renderer đó bite React apps cụ thể:

  • nó stateless. Googlebot không retain localStorage, sessionStorage, hoặc cookies giữa trang loads. bất kỳ nội dung hoặc routing đó phụ thuộc vào client-side state là invisible để crawler.
  • nó có thể cho lên. renderer enforces timeout. nếu của bạn main nội dung loads slowly — lớn bundles, waterfalls của API calls — kết xuất có thể finish trước khi của bạn nội dung arrives, và Google indexes incomplete trang.

render-timeout trap (và Vì sao nó tạo duplicates)

Này chế độ lỗi là rarely explained well, và đây là đó hầu hết damaging một cho React apps. Gary Illyes described điều này trực tiếp: “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.” (bản dịch) «I có một bunch of emails trong my inbox nơi đó vấn đề là đó centerpiece took forever để load, so kết xuất timed out … và we đã là left với một bunch of các trang đó chỉ đã có đó boilerplate. Với chỉ đó boilerplate, những các trang là dups.»

Walk qua Điều gì đó có nghĩ là cho CSR React app. của bạn header, nav, và footer là boilerplate đó loads fast. của bạn thực tế nội dung trang — part đó làm mỗi URL unique — là fetched và được kết xuất by JavaScript, và nó loads slowly. Kết xuất times out. Google là left với header + nav + footer on mỗi URL. Hiện tại mỗi trang looks giống hệt, và Google marks them as duplicates của mỗi khác trong Search Console.

Illyes own cách sửa là đó actionable bit: “Try to restructure the js calls such that the content (including marginal boilerplate) loads first and see if that helps.” (bản dịch) «Try để restructure đó js calls such đó nội dung (including marginal boilerplate) loads đầu tiên và see nếu đó helps.» Nhưng đó hơn durable câu trả lời là để không phụ thuộc on đó render step cho của bạn main nội dung tại all — mà có nghĩa là SSR hoặc SSG.

Kết xuất strategies cho React

Đây là single phần lớn impactful decision. options, khoảng worst để best Đối với SEO:

  • CSR (default React). máy chủ gửi shell; trình duyệt xây dựng mọi thứ. nội dung là delayed by render queue và exposed để timeout. Worst Đối với SEO. Fine cho authenticated dashboards bạn không muốn được lập chỉ mục anyway.
Evidence for this claim Client-only React rendering constructs UI in the browser; server rendering APIs produce HTML before browser hydration. Scope: React rendering mechanics; SEO impact depends on what the initial response contains. Confidence: high · Verified: React: hydrateRoot React: Server APIs
  • Pre-kết xuất. Xây dựng-time kết xuất không có đầy đủ SSR framework — tools như react-snap hoặc prerender service crawl của bạn app và save static HTML. Nhẹ hơn-weight; hoạt động cho simpler, mostly-static các trang.
  • SSG (Static trang web Generation). HTML được xây dựng sau khi tại deploy time và phân phối as static files. Fastest, nội dung luôn present trong thô HTML. Limited cho highly dynamic hoặc theo-người dùng nội dung; lớn các trang nhận chậm xây dựng.
  • SSR (máy chủ-Side Kết xuất). máy chủ executes React theo yêu cầu và gửi đầy đủ HTML. nội dung immediately khả dụng để các crawler; luôn fresh. Costs Node.js máy chủ và slightly cao hơn TTFB.
  • Hybrid / ISR (Incremental Static Regeneration). tiếp theo.js feature đó regenerates static các trang trong background — static speed với periodic freshness.
Strategynội dung trong ban đầu HTML?SEO riskBest cho
CSR (thô React)KhôngHighestLogged-trong dashboards, không-được lập chỉ mục apps
Pre-kết xuấtCó (xây dựng time)ThấpNhỏ, mostly-static các trang
SSGCó (xây dựng time)LowestBlogs, tài liệu, marketing
SSRCó (theo yêu cầu)ThấpFresh, dynamic nội dung
ISR / hybridCóThấpnội dung đó thay đổi hourly/daily

Và một strategy để skip on new xây dựng: dynamic kết xuất — detecting đó crawler người dùng-agent và serving điều này một pre-được kết xuất version trong khi người dùng nhận CSR. Google hiện tại calls điều này “a workaround and not a long-term solution” (bản dịch) «một workaround và không một dài-term giải pháp» đó “creates additional complexities and resource requirements,” (bản dịch) «tạo additional complexities và tài nguyên requirements,» và khuyến nghị máy chủ-side kết xuất, static kết xuất, hoặc hydration thay vì. (Bing được khuyến nghị dynamic kết xuất lại trong 2018, nhưng đó hướng dẫn là dated — since 2019 Bingbot renders qua Microsoft Edge / Chromium, và SSR/SSG là đó right call ở đó cũng.)

có một myth worth killing ở đây: SSR không phải một xếp hạng boost. As John Mueller put điều này, “there are no SEO ranking bonuses for implementing it one way or another” (bản dịch) «có không SEO xếp hạng bonuses cho implementing điều này một way hoặc một sản phẩm khác» — đó khác nhau kết xuất các phương thức là “just different ways of making the content indexable.” (bản dịch) «chỉ khác nhau ways of đang làm đó nội dung indexable.» SSR giá trị là reliable indexability (và thường tốt hơn Core Web Vitals từ một nhanh hơn Đầu tiên Contentful Paint), không một magic xếp hạng lever.

Hydration phải match chính xác — đó bug boundary, không SEO technique

SSR và SSG cả hai hand trình duyệt HTML đó đã có của bạn nội dung trong nó. React sau đó có để attach để đó markup on client, và đó khác API từ đơn giản client render:

  • createRoot renders React vào DOM node từ scratch — không existing markup dự kiến. sử dụng nó cho CSR-chỉ apps.
  • hydrateRoot attaches React để HTML đó react-dom/server đã generated, và expects client đầu tiên render để produce output giống hệt để Điều gì máy chủ được gửi. nếu bạn’re SSR/SSG, bạn muốn hydrateRoot, không createRoot — calling createRoot on máy chủ-được kết xuất markup có nghĩ là React discards nó và re-renders từ scratch, throwing away chính xác SEO benefit bạn thiết lập SSR/SSG để nhận.
Evidence for this claim hydrateRoot attaches React to HTML previously generated by React on the server; the initial client output should match the server output. Scope: hydration Confidence: high · Verified: hydrateRoot

Mismatches giữa máy chủ và client output là một real risk trong React apps đang làm SEO các cách sửa — một Date.now() trong một tiêu đề, một locale-phụ thuộc format, an if (typeof window !== 'undefined') branch. React own tài liệu là blunt về điều gì happens thì: điều này warns về mismatches trong development, nhưng “there are no guarantees that attribute differences will be patched up in case of mismatches.” (bản dịch) «có không bảo đảm đó thuộc tính differences sẽ là patched lên trong case of mismatches.» Đó hướng dẫn là để treat mismatches as bugs và cách sửa them — không để suppress đó warning và assume nội dung parity. Cho SEO cụ thể: không assume của bạn được kết xuất nội dung và metadata match điều gì đó máy chủ đã gửi chỉ vì đó trang looks right trong đó trình duyệt. Diff đó máy chủ HTML so với đó post-hydration DOM trực tiếp (đó View Nguồn so với. Inspect Element kiểm tra từ đó kiểm thử section dưới là đó fast version of này) thay vì trusting một sạch console.

React Router và URL structure

React Router xử lý navigation trong trình duyệt không có máy chủ round-trips, mà là fine Đối với SEO nếu configured correctly:

  • sử dụng History API, không hash routing. BrowserRouter dùng pushState và produces sạch, crawlable các URL (/products). HashRouter produces /#/products, và Google không thể reliably resolve hash-based các URL — old AJAX-crawling scheme đó đã làm them hoạt động là deprecated. sử dụng History API.
  • máy chủ phải xử lý những điều đó các URL cũng. với History API routing, mỗi “trang” cần thực URL máy chủ có thể respond để — cốt yếu cho SSR, và necessary so trực tiếp hit hoặc refresh on /products không 404.
  • <Link> renders thực anchor. React Router <Link> component outputs <a href>, mà là crawlable. Navigation được xây dựng on onClick handlers không có anchor là không crawlable — Google chỉ follows thực <a href> links.

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

qua React 18, React không bao giờ đã cập nhật document <head> on route thay đổi natively — mỗi route <title>, mô tả meta, canonical, và Open Graph / Twitter tags có để là đặt by library. React 19 changed đó: components có thể render <title>, <meta>, và <link> tags trực tiếp, và React hoists them để <head> on của nó own — hoạt động với client-chỉ apps, streaming SSR, và máy chủ Components alike. React 19,2 là hiện tại ổn định phát hành as của mid-2026, so điều này hiện tại áp dụng để bất kỳ app on hiện tại React version.

đó có nghĩ là right câu trả lời phụ thuộc vào của bạn React version và Điều gì bạn thực ra cần:

  • React 19, standalone app, chỉ basic tags. Render <title>/<meta>/<link> trong của bạn components trực tiếp — không library needed.
  • React 19, nhưng bạn cần htmlAttributes/bodyAttributes, SSR context serialization, onChangeClientState, prioritizeSeoTags, hoặc titleTemplate. Native hoisting không cover những điều này — sử dụng react-helmet-async. Của nó own tài liệu call điều này out trực tiếp: không có những điều đó cụ thể cần, bạn có thể không cần package tại all on React 19.
  • React 18 hoặc trước đó, standalone app. Native hoisting không exist tuy vậy — sử dụng react-helmet-async. nó actively maintained (major version 3, và nó detects của bạn React version tại runtime) và hỗ trợ SSR.
  • ** gốc react-helmet.** không sử dụng nó, on bất kỳ React version. nó unmaintained — không phát hành since 2020 — và có known bugs dưới React 18’s concurrent kết xuất.
  • tiếp theo.js apps. sử dụng tiếp theo own Metadata API ( metadata export / generateMetadata trong App Router) regardless của React version — không bolt on Helmet, và không rely on native React tag hoisting either. framework owns document trong tiếp theo.js app.

Một reliability rule carries over từ JavaScript SEO generally, và áp dụng không quan trọng mà của trên bạn sử dụng: HTML-cấp độ metadata beats JS-injected metadata. canonical tag injected by client-side JavaScript là far ít hơn reliable hơn một present trong máy chủ-được kết xuất HTML — mà là một argument cho SSR/SSG.

AI các crawler làm điều này urgent

2026 wrinkle: kết xuất behavior cho GPTBot (OpenAI), ClaudeBot (Anthropic), PerplexityBot, và khác agents là provider- và version-cụ thể. CSR React app ships mỗi crawler giống nhau rỗng shell đầu tiên Googlebot fetch sees, và hiện tại provider tài liệu không establish một shared render step đó sẽ fill nó trong. As generative engines become bigger phát hiện surface, SSR/SSG dừng là Google-chỉ concern: thô HTML maximizes coverage không có assuming universal crawler limitation. ( headless CMS topic covers điều này AI-crawler reality trong nhiều hơn depth.)

Kiểm thử Điều gì Google thực ra sees

không trust của bạn trình duyệt — của bạn DevTools Inspector hiển thị được kết xuất DOM (post-JavaScript), mà là chính xác Điều gì crawler-không có-JS làm không see. sử dụng right tools:

  • View Nguồn so với. Inspect Element. View Nguồn là đó thô HTML (điều gì các crawler nhận trước JS). Inspect Element là đó được kết xuất DOM. Nếu nội dung là trong Inspect nhưng bị thiếu từ View Nguồn, đây là JavaScript-phụ thuộc.
  • URL Inspection Tool (Search Console) — đó hầu hết có thẩm quyền kiểm tra. Chạy một trực tiếp kiểm thử và xem đó được kết xuất HTML, đó screenshot, và đó trang các tài nguyên / console messages để see điều gì Google thực ra được kết xuất và điều gì failed để load.
  • Rich Kết quả Kiểm thử — một nhanh được kết xuất-HTML kiểm tra không có verifying đó site.
  • Disable JavaScript trong DevTools và reload — một fast simulation of một crawler đó không execute JS (và một decent proxy cho điều gì AI các crawler see).
  • Search Console Coverage báo cáo — “Discovered, currently not indexed” (bản dịch) «Discovered, hiện tại không được lập chỉ mục» có thể tín hiệu một render queue backlog; clusters of duplicate các trang có thể tín hiệu đó render-timeout boilerplate trap.
  • JS-kết xuất các crawler — Ahrefs Site Audit và Screaming Frog (JS-kết xuất chế độ) render các trang tại quy mô so bạn có thể diff thô so với. được kết xuất trên đó toàn bộ site.

tiếp theo.js và Remix ( practical câu trả lời)

nếu SEO matters và bạn’re on thô CSR React, migrating để framework đó renders on máy chủ là thường right move. tiếp theo.js là purpose-được xây dựng cho điều này — SSR và SSG out của box, ISR, App Router, được xây dựng-trong Metadata API, tự động code splitting, và image optimization. Remix là web-các tiêu chuẩn alternative, được xây dựng on fetch/yêu cầu/phản hồi với SSR theo mặc định và mạnh progressive-enhancement story. tiếp theo.js nhận của nó own deep dive — I’m giữ nó brief ở đây on purpose. point cho React SEO là hẹp hơn: framework tồn tại để move của bạn nội dung out của trình duyệt-chỉ render step và vào ban đầu HTML.

React là good Đối với SEO Khi bạn treat kết xuất as architecture decision thay vì afterthought. Pick SSR hoặc SSG cho bất cứ điều gì đó cần để xếp hạng, giữ của bạn links và routing honest, manage metadata theo route, và let Google own tools — không của bạn trình duyệt — tell bạn Điều gì thực ra được kết xuất.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.