JavaScript SEO Checklist for 2026: Optimize React, Angular, Vue and Next.js Websites

  • Author
    Ankit Sain
  • Publish
    July 7, 2026 5:22 am
  • Read Time
    9 Mins
javascript seo checklist 2026

TABLE OF CONTENTS

    Quick summary: Google now reads JavaScript well, so that half of the old problem is mostly solved. The new problem is AI search. As of mid-2026, the main AI crawlers (GPTBot, ClaudeBot, and PerplexityBot) do not run JavaScript. They read your raw HTML and stop. So a React, Angular, or Vue site that hides content behind client-side rendering can rank on Google and still stay invisible in ChatGPT, Claude, and Perplexity. The fix is the one that has always worked: put your real content in the HTML the server sends. Use server-side rendering (SSR) or static generation (SSG) with Next.js, Angular SSR, or Nuxt. Then check what crawlers see with View Source and the URL Inspection tool.

    Your React or Angular site ranks on page one of Google. Then you ask ChatGPT the same question your customers are asking, and your site isn’t in the answer. Nothing is wrong with your rankings. Something is wrong with what AI crawlers can actually see and it’s costing you visibility in the channel that’s growing fastest.

    That’s the JavaScript SEO problem in 2026. Googlebot reads JavaScript now, so that old worry is mostly solved. But GPTBot, ClaudeBot, and PerplexityBot don’t render it at all; they read the raw HTML your server sends and stop. If your content only appears after the browser runs a script, those crawlers never see it. This checklist covers what changed, what to fix, and how to test it, from the point of view of an agency that runs these audits every week. If you’d rather have that audit run for you, that’s exactly what our technical SEO services cover.

    What changed in JavaScript SEO for 2026

    For about ten years, the main worry with JavaScript sites was simple. Would Google see the content? That worry has faded.

    On March 4, 2026, Google removed the “Design for accessibility” section from its JavaScript SEO Basics page. That section had told developers to test their pages with JavaScript turned off. Google called the advice out of date, noting that Googlebot has rendered JavaScript with an evergreen version of Chromium since 2019 (source: Google Search Central changelog; Search Engine Journal, March 2026).

    So Google reads modern React, Angular, and Vue apps fine most of the time. Good. But that is only half the story now and Google’s own May 2026 AI Search guide confirms the rest of this shift: AI-driven search is no longer a side channel; it’s where an increasing share of your buyers actually look.

    The new gap is AI search

    People no longer search only on Google. They ask ChatGPT. They ask Claude. They ask Perplexity. Those tools send their own crawlers. Here is the catch that trips up most teams:

    • As of mid-2026, none of the major AI crawlers render JavaScript. This includes GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-SearchBot, PerplexityBot, and Meta-ExternalAgent.
    • A Vercel and MERJ study of Next.js and traditional web traffic confirmed the same pattern: none of the major AI crawlers execute JavaScript. Some fetch script files but never run them.
    • The one real exception is Google Gemini, which borrows Googlebot’s rendering.

    This creates a split we see often in audits, and we’ve written about the mechanics of it in more depth in our piece on AI crawl budget and how LLMs decide whether to use your content. A client ranks well on Google for a hard keyword. The same page returns nothing when you ask ChatGPT to read it. The content lives in JavaScript, so the AI crawler sees a blank shell.

    One more detail. Roughly 92 percent of ChatGPT’s web answers pull from Bing’s index, and Bingbot renders JavaScript unreliably. So a client-side app can lose twice: weak in Bing, invisible to the AI crawler directly.

    How crawlers read your JavaScript

    Two systems read your site in very different ways.

    Googlebot: Crawl, render, index

    Googlebot works in three steps. It crawls the HTML. It queues the page for rendering. Then it runs the JavaScript and indexes what appears. This works, but rendering sits in a queue and can lag. Heavy bundles can time out. Google reads external resources up to about 2 MB, so a bloated bundle can break rendering.

    AI crawlers: Fetch and stop

    GPTBot, ClaudeBot, and PerplexityBot fetch the first HTML response and read the text in it. They do not wait for scripts. They do not call your API. They do not click tabs. Whatever sits in the initial HTML is all they get. This is a design choice, not a bug. Rendering at their scale would cost too much compute, so it will not change soon.

    Pick the right rendering strategy

    Your rendering method decides what crawlers see on the first request. You have four options:

    • Server-side rendering (SSR): The server builds the full HTML for each request. Best for pages that change often, like product or news pages.
    • Static site generation (SSG): The server builds HTML at build time. Best for blogs, docs, and marketing pages. It gives the fastest load and the cleanest result for crawlers.
    • Incremental static regeneration (ISR): Static pages that rebuild on a schedule. A good mix of speed and freshness.
    • Client-side rendering (CSR): The browser builds the page. Fine for dashboards and logged-in apps you do not want indexed. Wrong for anything you want found.

    Our rule for clients: if a page needs organic traffic or AI citations, its content must sit in the server HTML. Reach for SSG first, and SSR when the data changes.

    Google also dropped dynamic rendering (serving a separate version to bots) from its list of recommended fixes for new sites. It relies on spotting each bot by name, and new AI crawlers appear all the time. SSR and SSG fix the problem at the root.

    The JavaScript SEO checklist for 2026

    This is the core list. It applies to any JavaScript site, whatever the framework.

    JavaScript SEO Checklist for 2026: Optimize React, Angular, Vue, and Next.js Websites

    Content and rendering

    • Put your main content in the initial HTML. Right-click, choose View Source, and confirm your headings and body text sit in the raw HTML, not just the rendered page.
    • Choose SSR or SSG for any page that needs search or AI visibility.
    • Keep the server and client output the same. Hydration mismatches cause flicker and confuse crawlers.

    Links and crawl paths

    • Use real anchor tags with href values for internal links. A clickable div is not a link, and crawlers cannot follow it.
    • Give every important page a real URL that returns full HTML. Client-only routing hides pages from AI bots.
    • Do not block JavaScript or CSS in robots.txt. Google needs both to render your pages, and the same file controls whether AI crawlers can reach you at all. See our technical AEO checklist for the exact robots.txt rules for GPTBot, ClaudeBot, and PerplexityBot.
    • Consider adding an llms.txt file at your domain root as a low-effort, low-risk addition. Be realistic about what it does, though: Google has confirmed llms.txt receives no special ranking or crawling treatment, and independent analysis of roughly 300,000 domains found no measurable link between having one and getting cited more by AI engines. Treat it as tidy housekeeping, not a fix for the rendering problem above.

    Metadata and structured data

    • Set titles, descriptions, and canonical tags server-side. Do not build them only with client JavaScript.
    • Put JSON-LD schema in the initial HTML. Google can read schema added by JavaScript, but AI crawlers cannot. HTML is a safe place. We cover exactly which schema types to prioritize and how to structure content for AI discovery.
    • Add Open Graph and Twitter tags for clean link previews when people share your pages.
    • Reinforce your schema with clear entity signals, consistent naming, author attribution, and organization details, which is the same groundwork we outline in entity SEO and why it’s the key to AI Overviews.

    Indexing traps

    • Never ship a noindex tag in the base HTML and then try to remove it with JavaScript. Google may skip rendering when it sees noindex, so the tag stays and the page drops out. We have watched this wipe out whole sections of a site.
    • Fingerprint your files, for example, main.2bb85551.js. Googlebot caches scripts hard, and a hash forces a fresh copy after each change.

    Speed and Core Web Vitals

    • Split your bundles. Ship only the code each page needs.
    • Track LCP, CLS, and INP in Search Console and PageSpeed Insights. Faster pages help both rankings and AI citations.
    • Serve images in modern formats with set dimensions to stop layout shift.

    Framework notes

    The checklist above holds for every stack. Each framework reaches it in a different way.

    React and Next.js

    Plain React ships an empty div and a script. That is the worst case for search and AI. Next.js fixes it. Use the App Router and React Server Components so content renders on the server. Use the Metadata API for titles, canonicals, and Open Graph. Set metadataBase in your root layout so canonical URLs resolve. Generate your sitemap with a sitemap.ts file. Pick SSG for stable pages and SSR for live data (source: Next.js documentation).

    Angular

    Angular ships as client-side by default, which is not enough for content sites. Modern Angular includes built-in SSR through the @angular/ssr package. Start a project with the –ssr flag, or add it later with ng add. Hydration is on by default and reuses the server DOM, which cuts flicker and helps Core Web Vitals. Use @defer blocks to lazy-load parts of a page without hurting the first render. Guard browser-only code such as window, document, and localStorage with isPlatformBrowser so it does not break the server render (source: angular.dev, Server-side and hybrid rendering).

    Vue and Nuxt

    Vue on its own renders in the browser, like React. Nuxt brings SSR and SSG to Vue with little setup, so reach for it on any Vue site that needs traffic. Nuxt handles universal rendering, static generation, and per-route control, which lets you server-render the pages that matter and keep the app parts client-side.

    Test what crawlers really see

    Do not trust the browser. It runs JavaScript, so it hides the problem. Use these checks instead:

    • View Source. If your content shows in the raw HTML, it is server-rendered. If you see an empty div and scripts, it is not.
    • Disable JavaScript and reload. Whatever vanishes is invisible to AI crawlers.
    • curl the page. Run it with a crawler user agent and search for your key text. If the text is missing, fix your rendering.
    • URL Inspection tool. In Google Search Console, run Test Live URL to see what Googlebot renders. This is the right tool for Google, not the JavaScript-off trick. Once your pages are indexed correctly, Search Console’s new Generative AI performance reports are the next place to check whether they’re actually showing up in AI Overviews.
    • Ask the AI directly. Paste a URL into ChatGPT or Claude and ask it to summarize the page. A generic or wrong answer means the content did not reach it.

    Make your content easy for AI to answer

    Getting content into the HTML is step one. Step two is shaping it so AI tools quote you the discipline we cover in full in our GEO and AI SEO guide. From our work on answer engine and generative engine optimization, a few things help:

    • Lead with a clear, short answer near the top. AI tools lift direct answers.
    • Use plain question headings that match how people ask. This feeds People Also Ask and AI summaries.
    • Keep facts specific and current. Add dates and numbers. Vague pages rarely get cited.
    • Add clean JSON-LD (Article, FAQ, Organization) in the HTML so machines read your structure.
    • Keep one clear idea per section so a crawler can pull a clean passage.

    Mistakes we see most often

    • Content that loads only after an API call, so the first HTML is empty.
    • Internal links built as clickable divs, so crawlers hit dead ends.
    • Titles and schema set by client JavaScript are missing from the raw HTML.
    • A noindex tag left in the base HTML, which blocks rendering.
    • Assuming a strong Google ranking means AI tools see the page. It does not.

    People also ask

    Does Google render JavaScript in 2026?

    Yes. Googlebot has rendered JavaScript with an evergreen Chromium engine since 2019. In March 2026, Google removed its old warning about JavaScript-heavy pages and called it out of date.

    Do ChatGPT and other AI tools read JavaScript?

    No. As of mid-2026, GPTBot, ClaudeBot, and PerplexityBot read only the raw HTML. Independent crawler analysis has consistently found no JavaScript execution from any of the major AI crawlers. Content that loads with JavaScript stays invisible to them.

    Is React bad for SEO?

    React on its own hurts SEO because it renders in the browser. Next.js solves this with server-side rendering and static generation, so crawlers get full HTML.

    Do I need SSR, or is SSG enough?

    Use SSG for pages that rarely change, such as blogs and docs. Use SSR for pages with live data. Both put content in the server HTML, which is what matters.

    How do I check if my site has this problem?

    Open any page, choose View Source, and look for your main text. If it is missing, or the page goes blank with JavaScript off, crawlers cannot see your content.

    At White Bunnie, we run this checklist on every JavaScript site we audit. The pattern is steady. Fix the rendering, and both Google rankings and AI citations tend to follow. If you want a second pair of eyes on your own site, our AI SEO services start with exactly this kind of rendering and crawler-access audit.


    RELATED ARTICLES

    Let's Build Something Remarkable Together

    You know the potential your business has. We're here to help more people see it, trust it, and choose it. Together, we'll turn visibility into growth and growth into lasting success.

    get-touch

    Get In Touch

    One form. Endless growth possibilities







      Ask AI about White Bunnie
      whatsapp
      Scroll to Top