Deutsch
JavaScript & frameworks

JavaScript frameworks

JavaScript frameworks such as React, Angular, and Vue are toolkits for building interactive web interfaces from reusable components. MDN describes them as tried-and-tested tools for scalable, interactive web applications. For SEO the key question is where a framework builds the HTML, on the server or in the browser.

Which frameworks are there?

MDN lists React, Angular, Ember, Svelte, and Vue as options. Strictly speaking, React is a library, but it is usually grouped with the frameworks. Meta-frameworks such as Next.js, Nuxt, or Astro build on top of these and add routing and server-side rendering.

Why do they matter for SEO?

A framework often delivers a nearly empty HTML document and creates the content once the JavaScript has run. Google processes such pages in three phases, crawling, rendering, and indexing, and uses a headless Chromium to execute the scripts. Content that only exists after rendering can be indexed, but it depends on the render step succeeding.

Google still recommends server-side rendering or pre-rendering, because it makes a site faster for users and crawlers and not all bots run JavaScript. web.dev compares three approaches. Server-side rendering can increase time to first byte. Static rendering needs the URLs to be known in advance. Client-side rendering tends to ship more JavaScript as an app grows, which can hurt performance on mobile devices.

Google’s JavaScript guide adds a few rules for framework sites:

  • Use the History API for routing instead of URL fragments.
  • Return real status codes (404) or add a noindex robots meta tag to error views, otherwise soft 404s can be indexed.
  • Add content hashes to file names, for example main.2bb85551.js, because Googlebot caches resources aggressively.
Where the HTML is created: CSR, SSR, SSG and dynamic renderingFour rows show where the content of a page is created. With CSR the server sends an empty HTML shell and JavaScript in the browser builds the content. With SSR the server renders the HTML on every request and hydration makes it interactive in the browser. With SSG the HTML is created at build time. Dynamic rendering serves finished HTML to crawlers and the JavaScript version to users; Google calls this a workaround.SERVERFIRST HTML RESPONSEBROWSERCSRClient-siderenderingsends HTML shelland JavaScript<div id="app">no contentJavaScript buildsthe contentSSRServer-siderenderingrenders HTMLon every requestcontent isin the HTMLhydration makesthe page interactiveSSGstatic renderingprerenderingHTML is builtahead of timecontent isin the HTMLshows HTML at once,hydration optionalDynamicrenderingworkarounddetects crawlers,renders for themcrawlers: HTMLusers: empty shellfor users, JavaScriptbuilds the contentSchematic. Google renders JavaScript in a separate step after crawling.Not all bots run JavaScript.
What matters for crawlers is whether the content is already in the first HTML response. Google recommends server-side rendering or prerendering and calls dynamic rendering a workaround, not a long-term solution. Sources: web.dev: Rendering on the Web; Google Search Central: Understand the JavaScript SEO basics; Google Search Central: Dynamic rendering as a workaround.

Example

A React app without server-side rendering delivers this HTML:

HTML
<div id="root"></div>
<script src="/static/main.2bb85551.js"></script>

Title, text, and links appear only after the script has run. With a meta-framework the same project can place that content in the first HTML response.

Common mistakes

  • Error pages that return status 200, so Google treats them as normal pages.
  • Navigation through URL fragments (#/page), which does not give each view its own URL.
  • Key content that a render failure or a blocked script file hides from Google.
  • File names without a content hash. Googlebot caches aggressively and its rendering service may ignore caching headers, so outdated JavaScript or CSS files can be used.
  • A canonical URL set by JavaScript that differs from the value in the original HTML.

FAQ

Which JavaScript frameworks are most common? MDN names React, Angular, Ember, Svelte, and Vue. Rankings shift often, so check a current developer survey.

Are JavaScript frameworks bad for SEO? The framework alone does not decide this. What counts is whether the important content is in the rendered HTML, ideally already in the first response.

Sources

  1. JavaScript frameworks and libraries - MDN Web Docsdeveloper.mozilla.org
  2. JavaScript SEO basics - Google Search Centraldevelopers.google.com
  3. Rendering on the Web - web.devweb.dev

Last updated: