Skip to content

Palmík

How client-side rendering hinders SEO

26 March 2021

You have built the perfect website – perhaps even single-page app (SPA) – using the client-side JavaScript framework du-jour like React, Vue or Svelte.

Now you want to rank highly on Google Search. What are the common pitfalls of client-rendered sites when it comes to search engine optimization (SEO)?

Learn the basics of how search engines process web pages and how it’s affecting your site that relies on JavaScript for client-side rendering.

SEO pitfalls of SPAs🔗

While Google and other major search engines have some support for client-side rendering, it’s important to understand how things work under the hood.

Search engines process your website in three main stages:

  1. Crawling. Site is downloaded and HTML processed.

    • No JavaScript is executed, the search engine can’t access the HTML that would be generated by your JavaScript code.
    • New links from the HTML are potentially added to the crawling queue.
    • If JavaScript is present, the page is added to the rendering queue, otherwise it goes directly into the index queue. At this stage, different search engines might do things differently, some might send the page for early indexing even if JavaScript (that might change the HTML content of the page) is present.

  2. Rendering. Site is rendered using a headless browser.

    • All JavaScript is executed and the search engine can access the final HTML.
    • New links from the HTML are potentially added to the crawling queue.
    • The page is added to the indexing queue.

  3. Indexing. The contents of the page are indexed and eventually become discoverable by the users.

The following diagram from a Google article summarizes the situation nicely:

How googlebot crawls, renders and indexes sites

Client-side rendering slows down crawling and indexing🔗

For sites that rely on client-side rendering, the full HTML content only becomes available after the rendering stage. That means that discovery of any new links from the page is delayed. Some search engines also slow down the crawl rate of sites that rely on the rendering stage.

Client-side rendering can lead to incorrect title and snippet🔗

The title and description of the page is also commonly handled by JavaScript. This could result in the page being indexed with a wrong title and snippet, until the rendered version of the page is reindexed. I have observed this behaviour with my own site.

With server-side rendering. Everything is fine:

The title and snippet of a search result for SPA with SSR

Without server-side rendering. The title and the snippet in Google search results are the same regardless of the page, since I rely on JavaScript to set the title and the description to the proper values:

The title and the snippet of a search result for SPA without SSR

Renderer might use outdated headless browser🔗

Depending on the search engine, the browser used for the rendering stage might be outdated. For Google specifically this should no longer be an issue. You can use Google’s URL inspection tool to check what your site would look like to Google after rendering.

Server-side rendering to the rescue🔗

Does you website rely on JavaScript for client-side rendering? Then it probably suffers from all of the above.

Don’t worry, no matter how your site works or whichever framework it’s using, you can use the approach described in Universal server-side rendering to add server-side rendering on top of your website without having to rewrite any of your existing code.