--- title: "Fix JavaScript SEO so crawlers read your content without a render step" description: "See how Googlebot renders JavaScript, move key pages to SSR or SSG, fix hydration mismatches, and test links, lazy loading, and schema in CI." canonical: "https://scalewithsearch.com/articles/javascript-seo-guide" date: "2026-03-20" modified: "2026-09-25" --- ## Site navigation - [Scale With Search](https://scalewithsearch.com/) - Real estate - Real estate - [Real estate](https://scalewithsearch.com/for/real-estate) - Work - Start here - [Send your brief](https://scalewithsearch.com/work#send-your-brief) - [Prepare your six-question brief](https://scalewithsearch.com/work#prepare-your-six-question-brief) - Build - [Site build, content library with SEO, signal desk](https://scalewithsearch.com/work) - For your business - Trades and home services - [Auto body and collision shops](https://scalewithsearch.com/for/auto-body-and-collision-shops) - [Foundation and home repair contractors](https://scalewithsearch.com/for/foundation-and-home-repair) - [Garage door and fencing contractors](https://scalewithsearch.com/for/garage-door-and-fencing-contractors) - [HVAC contractors](https://scalewithsearch.com/for/hvac-contractors) - [Janitorial and commercial cleaning companies](https://scalewithsearch.com/for/janitorial-and-commercial-cleaning) - [Locksmiths](https://scalewithsearch.com/for/locksmiths) - [Moving companies](https://scalewithsearch.com/for/moving-companies) - [Pest control companies](https://scalewithsearch.com/for/pest-control-companies) - [Plumbing and electrical contractors](https://scalewithsearch.com/for/plumbing-and-electrical-contractors) - [Restoration and water or fire damage companies](https://scalewithsearch.com/for/restoration-and-water-fire-damage) - [Roofing companies](https://scalewithsearch.com/for/roofing-companies) - [Towing companies](https://scalewithsearch.com/for/towing-companies) - [Tree services and landscaping companies](https://scalewithsearch.com/for/tree-services-and-landscaping) - [Solar installers](https://scalewithsearch.com/for/solar-installation) - [General contractors](https://scalewithsearch.com/for/general-contractors-and-construction) - [Paving, concrete, and flooring contractors](https://scalewithsearch.com/for/paving) - Practices and professional services - [Bookkeeping and tax practices](https://scalewithsearch.com/for/bookkeeping-and-tax-practices) - [Dental practices](https://scalewithsearch.com/for/dental-practices) - [Family and criminal defense law firms](https://scalewithsearch.com/for/family-and-criminal-defense-law-firms) - [Med spas and aesthetics practices](https://scalewithsearch.com/for/med-spas-and-aesthetics) - [Personal injury law firms](https://scalewithsearch.com/for/personal-injury-law-firms) - [Veterinary clinics](https://scalewithsearch.com/for/veterinary-clinics) - [Gyms and fitness studios](https://scalewithsearch.com/for/fitness) - [Therapy and outpatient health practices](https://scalewithsearch.com/for/therapy-and-outpatient-health) - [Medical billing companies](https://scalewithsearch.com/for/medical-billing) - [Insurance agencies](https://scalewithsearch.com/for/insurance-agencies) - [Financial advisors](https://scalewithsearch.com/for/financial-advisors) - [Property management companies](https://scalewithsearch.com/for/property-management) - [Recruiting and staffing agencies](https://scalewithsearch.com/for/recruiting-and-staffing) - [Architects and interior designers](https://scalewithsearch.com/for/architects-and-interior-designers) - [Logistics and supply chain companies](https://scalewithsearch.com/for/logistics-and-supply-chain) - Agencies, MSPs, and manufacturing - [IT and managed service providers](https://scalewithsearch.com/for/it-and-managed-service-providers) - [Machine shops and precision manufacturers](https://scalewithsearch.com/for/machine-shops-and-precision-manufacturing) - [Marketing agencies and freelancers](https://scalewithsearch.com/for/marketing-agencies-and-freelancers) - [SEO agencies and consultants](https://scalewithsearch.com/for/seo-agencies-and-consultants) - [Small manufacturers and fabricators](https://scalewithsearch.com/for/small-manufacturers-and-fabricators) - Restaurants, shops, studios, and nonprofits - [Restaurants and hospitality businesses](https://scalewithsearch.com/for/restaurants-and-hospitality) - [Retail stores and ecommerce sellers](https://scalewithsearch.com/for/retail-and-ecommerce) - [Photographers, event planners, and travel agents](https://scalewithsearch.com/for/photographers) - [Churches and nonprofits](https://scalewithsearch.com/for/churches-and-nonprofits) - [All industries](https://scalewithsearch.com/for/) - Learn - For your office - [Office job guides](https://scalewithsearch.com/guides/) - [Browser calculators](https://scalewithsearch.com/tools/) - Start here - [How it works](https://scalewithsearch.com/how-it-works) - [Free Starter Kit](https://scalewithsearch.com/kit/business-memory-starter-kit.zip) - [Synthetic specimen](https://scalewithsearch.com/specimen/working-session-specimen.zip) - Guides - [The Complete Guide to Business Memory for AI Agents](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [The Complete Small-Business Guide to AI Agent Governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [The Complete Guide to Leaving Vendor AI Memory](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - Articles by cluster - [Business memory](https://scalewithsearch.com/articles/business-memory-for-ai-agents-guide) - [Agent governance](https://scalewithsearch.com/articles/ai-agent-governance-guide-small-business) - [Migration and ownership](https://scalewithsearch.com/articles/leaving-vendor-ai-memory-guide) - For machines - [llms.txt](https://scalewithsearch.com/llms.txt) - [llms-full.txt](https://scalewithsearch.com/llms-full.txt) - [Machine view](https://scalewithsearch.com/?view=machine) - Company - Evidence - [Proof](https://scalewithsearch.com/proof) - Company - [About](https://scalewithsearch.com/about) # Fix JavaScript SEO so crawlers read your content without a render step. A React release moves the product description into a `useEffect` call. Nothing looks different in the browser. Two weeks later, the product pages lose their snippets in Google, because the server HTML no longer contains the description. JavaScript SEO makes sure crawlers can discover, render, and index content that JavaScript produces. Googlebot renders JavaScript with a headless Chromium browser, but that step adds delay, resource limits, and failure modes that server HTML does not have. If content that must rank exists only after client-side rendering, you have an engineering problem, not a content problem. This article explains Googlebot's pipeline, server rendering, hydration errors, the move from client rendering, links, lazy loading, structured data, common mistakes, and tests. ## Understand how Googlebot processes JavaScript ### Two phases: crawl, then render In phase one, Googlebot fetches the URL and parses the HTML response at once. It adds the links it finds to the crawl queue. Content in this HTML is ready for indexing. In phase two, the page enters the render queue. Google's Web Rendering Service (WRS) runs the JavaScript in headless Chromium and produces the final DOM. Content that exists only after JavaScript runs becomes available at this point. Phase two uses shared resources. In 2019, Google said the median time from crawl to render was about five seconds, with a long tail that can reach minutes or more. During that gap, JavaScript-only content is not indexed. If rendering fails, it may never be. The [Googlebot rendering guide](/articles/googlebot-javascript-rendering) shows how to see both phases for your own pages. ### Know what the renderer supports Googlebot renders React, Vue, Angular, and plain JavaScript apps. It supports ES6 and later, `async` and `await`, Promises, the Fetch API, and modern CSS. It has limits. It does not install service workers. It declines permission requests. It clears cookies, `localStorage`, and `sessionStorage` between page loads. It does not click, hover, or fire scroll events. Content that depends on those actions, or on live WebSocket messages, is at risk. These patterns do not get indexed: - Content behind a login. - Content that loads only on a scroll event listener. - Infinite scroll with no paginated URLs. - Content that appears only after a click or a hover. ### Treat render cost like crawl cost Crawl budget is the number of URLs Googlebot will crawl on your site in a period. Rendering adds a second cost on top of it. On a site with thousands of pages, not every page gets crawled and rendered promptly. Less JavaScript execution, fewer render-blocking resources, and complete server HTML all reduce the work Google must do for each page. ## Make server rendering the default ### Why SSR removes most of the risk Server-side rendering (SSR) builds the full HTML on the server. When Googlebot fetches the page, the HTML already holds the content, the links, and the metadata. The page does not depend on the render queue. Next.js (React), Nuxt (Vue), and Angular's built-in SSR all provide it. For pages that must rank, such as landing pages, articles, product pages, and category pages, SSR removes the main technical risk. ### Next.js Next.js offers three approaches: - `getServerSideProps` (Pages Router) renders on every request. Use it for pages where freshness in search matters. - `getStaticProps` (Pages Router) renders at build time, with optional incremental static regeneration (ISR). Use it for articles, documentation, and product descriptions. ISR sets a revalidation interval, so you need no full rebuild. - `generateStaticParams` (App Router) builds static pages for dynamic routes. In the App Router, Server Components render on the server by default. For most content, static generation with ISR is the best choice: a fast server response, complete HTML on the first request, and automatic freshness. ### Nuxt Nuxt 3 and later use universal rendering by default: SSR on the first request, then client-side navigation. Keep `ssr: true`, which is the default. Load data on the server with the `useAsyncData` or `useFetch` composables. `npx nuxi generate` writes fully prerendered HTML files. That suits content sites, but each content change needs a rebuild. ### Vue without Nuxt Vite supports SSR for Vue, but you configure it by hand. You need a server entry that renders HTML strings and a client entry for hydration. That is much more work than Nuxt's built-in SSR. Use Nuxt unless you have a specific reason not to. The [JavaScript framework configuration guide](/articles/javascript-seo-frameworks) covers Next.js, Nuxt, and Angular setup in detail. ## Prevent hydration errors ### What hydration does Hydration attaches JavaScript event handlers to server-rendered HTML. The server sends complete HTML, and the browser paints it at once. Then JavaScript loads and takes over the existing DOM instead of rebuilding it. ### Why mismatches matter If the server HTML differs from what the client code produces, React and Vue report a hydration mismatch. The framework may throw away the server DOM and render again. Users see a flash of wrong content or a layout shift. A mismatch causes two search problems. Googlebot can index server content that differs from what users finally see. The layout shift during hydration also hurts [Core Web Vitals](/articles/core-web-vitals-engineering). Four causes are common: - Dates and times formatted in a different time zone on the server and the client. - Browser APIs called during the server render. - Rendering that depends on `window` or `document`. - Random IDs that differ between server and client. ### Fix the mismatch Keep browser-only code out of the server render: - In React, put browser-only logic in `useEffect`, and use `useId` for stable IDs. - In Vue, use `onMounted`. In Nuxt, wrap the component in ``. - In Next.js, load a component that cannot render on the server with `dynamic` and `ssr: false`. Only move non-essential UI this way. Content that must rank stays in the server render. To test, compare the server HTML from `view-source:` with the live DOM in the DevTools Elements panel. Check the browser console for hydration warnings. Any difference needs a fix. ## Move content out of client-side rendering ### See the problem A client-rendered single-page app sends a nearly empty shell, often `
`, and a JavaScript bundle that builds the page. Googlebot must render the bundle to see anything. For a small site with strong authority, the delay may be tolerable. For a large site, a new site, or a site with heavy JavaScript, client rendering creates index gaps. ### Diagnose it 1. In Google Search Console, open the URL Inspection tool and test the live URL. 2. Check the HTML that Google fetched and the rendered result. 3. If the fetched HTML has no real content and the rendered result does, your content depends on rendering. 4. Load the page in Chrome with JavaScript turned off. If it shows no headings, no text, and no navigation, crawlers see the same emptiness in phase one. ### Migrate by framework For a React single-page app, move to Next.js. Move route-level data fetching into `getStaticProps` or `getServerSideProps`, or into Server Components in the App Router. Replace client-side routing with Next.js file-based routing. Migrate route by route, starting with the pages with the most traffic. For a Vue single-page app, move to Nuxt. Put route components in the `pages/` directory. Replace client-side data loading in Vuex or Pinia with `useAsyncData`. The Nuxt migration documentation covers the common patterns. For an Angular single-page app, run `ng add @angular/ssr` on Angular 17 or later. Older versions used Angular Universal (`@nguniversal/express-engine`), which needed a separate server module. The architectural change is larger than in React or Vue. ## Treat dynamic rendering as a temporary bridge Dynamic rendering sends prerendered HTML to crawlers and the normal JavaScript app to users. A server component checks the user agent. If it matches a known crawler, such as Googlebot or Bingbot, it returns the prerendered version. Google's documentation now calls dynamic rendering a workaround, not a recommended solution. SSR, static rendering, or hydration are the long-term answers. Dynamic rendering adds a rendering service, such as a Puppeteer instance, and a maintenance burden. Both versions of every page must carry the same content. It can still make sense in three cases: - A large app where SSR is too expensive for now. - An app with client state that is hard to reproduce on the server. - A hybrid where only some routes justify the work. To set it up, deploy the rendering service. Route crawler requests to it at the web server or CDN, and cache the rendered HTML. Set the cache lifetime by content type. For example, use 24 hours for content that changes and 7 days for evergreen pages. A stale cache shows crawlers old content. If you already have SSR, you do not need dynamic rendering. Both solve the same problem. ## Put structured data in the server HTML [Structured data](/articles/structured-data-implementation) should be in the first HTML response. Google can read JSON-LD that client JavaScript adds, but server output removes the dependence on rendering. With SSR, render the JSON-LD script element on the server. In the Next.js App Router, render the JSON-LD script inside the page component. The Metadata API does not generate JSON-LD. In the Pages Router, use `next/head`. In Nuxt, use the `useHead` composable. All of these put the data in the server HTML. Test with the Google Rich Results Test, which renders JavaScript first. Then check the raw HTML with JavaScript turned off to confirm that the JSON-LD is there before rendering. ## Use real links in single-page apps Single-page apps route on the client with `history.pushState` or hash fragments. Googlebot follows links, not router events. It finds URLs reliably only through `` elements with a real `href`. Use standard `` links for every internal link, and let the framework intercept the click. Next.js ``, Nuxt ``, and React Router `` all render real links by default. To check, turn off JavaScript and click through the site. If links still work, crawlers can follow them. ## Handle lazy loading, infinite scroll, and code splitting ### Images and media Native lazy loading with `loading="lazy"` defers images outside the viewport. Never lazy-load the LCP image, the main image above the fold. It must load at once: ```html description description ``` Googlebot renders with a tall viewport and supports native lazy loading and `IntersectionObserver`. It does not fire scroll events. Content that waits for a `scroll` listener stays invisible. Text that must be indexed belongs in the initial HTML. Lazy loading is for images and media, not for body text. ### Infinite scroll Infinite scroll that loads more items only on scroll hides everything below the first batch. Give each batch its own URL, such as `/blog/page/2` and `/blog/page/3`. The infinite scroll loads those pages for users. Googlebot finds each page through normal `` pagination links. Older guides add `rel="next"` and `rel="prev"` link elements. In 2019, Google said it no longer used them for indexing. They do no harm, but the `` links are what Google follows. ### Route-based code splitting Frameworks split bundles by route. That speeds up the first load. But if a route depends on a chunk for content, a chunk failure during Google's render leaves the route empty. Each route must render its full content in the server HTML. The client chunk adds interactivity, not content. To test, view the source of each route and confirm that the full content is there, not a loading skeleton. ## Avoid four common mistakes ### Mistake 1: critical content in useEffect React's `useEffect` runs only in the browser. Content produced there is not in the server HTML. Googlebot may see it after rendering, later and less reliably. Move headings, body text, and structured data into the component render. Server data functions such as `getStaticProps` or a Server Component also work. ### Mistake 2: JavaScript blocked in robots.txt If `robots.txt` blocks the CSS or JavaScript that the page needs, Google renders a broken page. Never block framework bundles, stylesheets, or critical third-party scripts. In URL Inspection, check the rendered screenshot. A broken screenshot usually means blocked resources. ### Mistake 3: hash-based routing Browsers do not send the part after `#` to the server, and Google ignores it. A site with hash routing (`example.com/#/page`) has, in Google's view, one URL. Move to history routing so each page has a real path. Examples are `BrowserRouter` in React Router and history mode in Vue Router. ### Mistake 4: client-side redirects A JavaScript redirect such as `window.location.href = '/new-page'` passes signals less reliably than a server 301. Put every redirect that matters for search at the server or CDN. Keep client redirects for in-app navigation that needs no search visibility. ## Test JavaScript SEO in CI and by hand ### Automated checks Add checks to the CI pipeline. For each route, confirm: - The server HTML contains the ``, the meta description, and the `<h1>`. - The JSON-LD is in the raw HTML response. - Internal links are `<a>` elements with valid `href` values. - The console shows no hydration warnings. - Core Web Vitals stay within the budget. Lighthouse CI in GitHub Actions scores performance and SEO and can fail a build below a threshold. The [Lighthouse CI guide](/articles/lighthouse-github-actions-seo) shows the workflow file. ### Manual checks 1. View the page source, not the Elements panel. Does the HTML contain the content? 2. Turn off JavaScript. Does the page still show real content? 3. Run URL Inspection in Search Console. Does the rendered page match what users see? 4. Run the Rich Results Test. Is the structured data valid? 5. Test on a real phone. Does the content render on a slower device? No framework is worse for SEO by nature. A React app with SSR in Next.js performs the same way in search as a Vue app with Nuxt. An Angular app with server rendering does too. The failure mode is client-only rendering, in any framework. ---- ```text .|########||. .|########||. .|########||. |##||. .||##|. |##||. .||##|. |##||. .||##|. |#|. .|#|. |#|. .|#|. |#|. .|#|. |#| |#| |#| |#| |#| |#| .#| |#. .#| |#. .#| |#. .#. .#| .#. .#| .#. .#| |#. .#| |#. .#| |#. .#| |# ...... #| |# ...... #| |# ...... #| .# ||#########| #| .# ||#########| #| .# ||#########| #| .#. |######||######|. .#. .#. |######||######|. .#. .#. |######||######|. .#. #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# #. .##|###|##|#|######| .# || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || || |##|#||||||||||||#||#| || # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. # |#||||||||||||||||||||#| #. || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # # .#||||||||||||||||||||||||#| # || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || || ....|||#||||||##|#|||#|#||##||||....|. || #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# #. . ....|# ....#||| ||| .#||| ....#. .# # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. # . ||||#| .#####|| . .#| .#||| ||||# #. .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || .| ||||| #. |#|||||. || #. |#||. .||||| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || || |.... #. ....|#. |. ...|. ....|| || #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# #. .||||||##||||||##||####|||||||#||||||#| .# # .||####|###########################|. # # .||####|###########################|. # # .||####|###########################|. # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#||||||.#.|| # |. ..# #| #|||||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||||| .. |# ## |#| ...#|#|||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#|||#|# .# .#| #| ##|.#..#|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # .#||||||############|######|||||#| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # # |...||#||||||#||||#|#||||||#|||||#||| |.| # #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# #. .. ||||# .|||##|. |#| .|| || .|||#. #| # .# || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || | ...|| ...##| | #| .|. |. ##### .. .| || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || || ||||| || ||||#| . |. |. |#. ||||| |#| || || .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. .# |.....#|....|#.||||.|||##.|#|....||.#||.#. #. #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# #.|||||||#############################| ||| .# || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || || ##||#||#||||||#||#||#||#||##. || # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # # .#|||||||||#||#|||||||||||#| # || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || || |#||||||||||||||||||||||#| || .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. .# |#||||||||||||||||||||#| #. || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || || |#||||||||||||||||||#| || #. .######|#|#########| .# #. .######|#|#########| .# #. .######|#|#########| .# .#. |#####||||#####| .#. .#. |#####||||#####| .#. .#. |#####||||#####| .#. |# ||########|| #. |# ||########|| #. |# ||########|| #. |# ...... #| |# ...... #| |# ...... #| |#. .#| |#. .#| |#. .#| |#. .#. |#. .#. |#. .#. .#| |#. .#| |#. .#| |#. |#| |#| |#| |#| |#| |#| .|#|. .|#|. .|#|. .|#|. .|#|. .|#|. |##||. .||##| |##||. .||##| |##||. .||##| .||########||. .||########||. .||########||. Scale With Search 2026 [scalewithsearch.com](https://scalewithsearch.com) ```