# Do hydration errors affect SEO? > Do hydration errors affect SEO? Not as a ranking factor, but their effects can: content that differs, metadata React never fixes, slow pages, layout shift. Source: https://hydration.jscrate.dev/docs/guides/hydration-errors-seo Last updated: 2026-09-18 Do hydration errors affect SEO? Not directly: Google does not describe hydration errors as a ranking factor, and it indexes the page as rendered in its browser. What they do to the page can matter, though: content that differs between server and client, metadata React never corrects, extra work that slows the page, and layout shift. ## How Google sees a server-rendered React page Google's [JavaScript SEO basics](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics) describe three phases: crawling, rendering and indexing. Googlebot renders pages with "an evergreen version of Chromium", and indexing uses the rendered HTML. The same page also says that "server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers." So Google sees roughly what a user's browser sees after hydration. A page that hydrates badly is not hidden from Google, but it is slower, and it may not say what the server HTML said. ## Do hydration errors affect SEO directly? Not according to anything Google documents. A hydration error is a message in the browser console. What Google describes evaluating is the result: the content it renders and the experience of the page. That is where hydration problems can show up. ## The effects that can matter | What happens | Why | Can it matter for search? | | ---------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | React renders a tree again on the client | In React 19, a text or structure mismatch makes React throw away the server HTML for that tree | More main-thread work during load, which can hurt responsiveness and paint timing | | Content changes after load | The client renders different text than the server sent | Layout shift, and a crawler that does not run JavaScript sees other content than one that does | | An attribute stays wrong | React 19 keeps the server's attribute and does not patch it | A wrong `href`, `lang` or `alt` stays in the page | | `` differs | A title or meta tag rendered differently on the client | Search engines and link previews can read different metadata | | Interactivity breaks | Lost state and input when a branch is replaced | Affects users; not a search signal on its own | Google's [Core Web Vitals page](https://developers.google.com/search/docs/appearance/core-web-vitals) says good Core Web Vitals align with what its core ranking systems seek to reward, alongside other page experience aspects. The targets are an LCP within 2.5 seconds, an INP under 200 milliseconds and a CLS under 0.1. A hydration mismatch does not guarantee a bad score, and fixing one does not guarantee a good one; it removes work and movement from the page. ## Metadata is where a mismatch hurts most The attributes Google relies on live in ``: the canonical URL, `hreflang` alternates, robots directives, the title and the description. Google's JavaScript guide warns against changing the canonical URL with JavaScript to something other than the canonical in the original HTML, and notes that a `noindex` in the original HTML may stop Google from rendering the page at all. If a `` value differs between server and client, for example a title built from a browser-only value or an `hreflang` computed from the visitor's locale, the server HTML and the rendered page disagree about what the page is. hydration-proof reports a changed title, meta tag, stylesheet or script in `` as [HP1014](https://hydration.jscrate.dev/docs/issues/hp1014), and [how it works](https://hydration.jscrate.dev/docs/how-it-works) notes that React 19 adds a new `` or `<meta>` instead of fixing the server one. ## Check the pages that get indexed Test the pages in your sitemap, in a production build, the way crawlers get them: ```bash npx hydration-proof test --sitemap ``` `--sitemap` adds every route listed in your sitemap (it also reads `robots.txt` to find it). Fix [head mismatches](https://hydration.jscrate.dev/docs/issues/hp1014) first, then text mismatches that make React re-render ([HP1010](https://hydration.jscrate.dev/docs/issues/hp1010) and [HP1011](https://hydration.jscrate.dev/docs/issues/hp1011)), then attribute ones. [Routes](https://hydration.jscrate.dev/docs/routes) covers the other ways to choose pages. ## Related - [What is hydration in React?](https://hydration.jscrate.dev/docs/guides/what-is-hydration) - [React hydration errors: messages and causes](https://hydration.jscrate.dev/docs/guides/react-hydration-error) - [Hydration errors only in production](https://hydration.jscrate.dev/docs/guides/hydration-error-only-in-production) - [How hydration-proof works](https://hydration.jscrate.dev/docs/how-it-works) - [Detect hydration errors in CI](https://hydration.jscrate.dev/docs/ci)