Article Content Details
- 1 Rendering SEO Overview
- 2 What is Rendering in SEO?
- 3 How Rendering Happens in Client-Side/Browser
- 5 Types of Rendering in SEO
- 6 Google Recommends Dynamic Rendering for SEO
- 7 Server-Side rendering vs Client-side rendering: Which is Best for SEO?
Rendering SEO Overview
The fundamental of Search Engine Optimisation (SEO) is crawling & indexing, everything comes next. And, that’s how the search engines work as well.
Hence, it is intuitive that,
In order to rank, we have to be indexed.
In order to be indexed, we have to be rendered accurately.
Well, SEO is that simple!
What is Rendering in SEO?
Have you heard of the Black & White negative processing in the olden days? Obviously, you will find details only after the processing & rendering of the negative.
It’s the same in SEO too!
Thus, without an effective rendering, it’s impossible for the search engines to understand our page and consequently fails to index or rank higher in the SERP.
How Rendering Happens in Client-Side/Browser
The following video is the realtime example of how rendering happens in the client-side/browser.
As you see, rendering takes time (almost 3s) and thus causes a delay in loading!
Every webpage has two stages, raw HTML and the rendered HTML. The rendering happens between them.
The application/website can be totally different between these two stages.
That is the RAW HTML file.
The View Rendered Source is one of the chrome extensions to find what has changed from a Raw HTML to Rendered HTML.
Rendering is ultimately important for helping Google & other search engines to understand the elements of the page. Poor rendering leads to missing an essential text/image/files during indexing which might cause a poor ranking in many technical SEO aspects.
- Helps search engines to crawl the website faster
- More URLs can be indexed in short time due to effective crawling
- Quick rendering helps in decreasing the page loading time, increases user experience.
- Decreases Time to First Byte (TTFB)
- Faster rendering improve your core web vitals
- Helps in 100% complete cache
Types of Rendering in SEO
There are 4 major rendering in SEO and are as follows:
Server-Side Rendering (SSR)
Server takes full control of what to deliver by generating a full HTML on the server in response to the navigation. As most of the client requests were handled within the server, it avoids any additional round-trips for fetching data. It simply produces faster First Contentful Paint (FCP) & Time to Interactive (TTI) as well. As everything happens right on the server, sometimes the Time to First Byte (TTFB) can be more and that’s one of the major disadvantages of the server-side rendering in SEO.
Client-Side Rendering (CSR)
Rehydration is the combination of client-side rendering and server-side rendering. Rehydration rendering maintains a balance between the two and helps website/apps to load fast, highly interactive and nevertheless SEO friendly.
Prerendering is a highly intuitive technical term, meaning, this rendering preloads all elements on the page for a web crawler. Interestingly, prerendering will serve the rendered page only to a bot visit and thus for human visits, the page loads normally. Prerendering is purely for the benefits of crawlers/bots for better crawling and indexing.
Google Recommends Dynamic Rendering for SEO
SEO Myth Buster: Often the dynamic rendering is confused with Cloaking, as it servers different rendered versions for different bots. But, that’s not the case. Googlebot never sees dynamic rendering as Clocking because all the rendered versions will have the same content. Cloaking is serving different content for visitors and different for servers.
Server-Side rendering vs Client-side rendering: Which is Best for SEO?
I have encountered several “people also ask” questions regarding rendering in SEO like,
- Which type of rendering is more SEO friendly?
- Does Google use server-side rendering?
- Why server-side rendering faster?
- Is server-side rendering more secure?
Basically, be it server-side rendering or client-side rendering, it purely depends on what type of experience you are building for the users & bots.
There is a longstanding debate over the server-side rendering vs client-side rendering and which is best, but, it’s important to remember that we can opt for server-side rendering for a few pages whilst some pages can be served in client-side rendering for the betterment of user experience, SEO.
Many progressive web applications were adopted for the hybrid rendering techniques.
Matching and maintaining a balance between user intent & search engine intent with who can wait for what and why it is ok to wait (of course the wait I’m talking here only in ms) is a key.
Deciding whether you go client-side rendering or server-side rendering for SEO itself makes 90% of the job. However, taking a side should be done by precisely measuring and understanding the application’s bottlenecks (experience interactive).
Time to shift to HTTP/2
HTTP2 reduces the latency by minimizing several protocol overheads with its full request & full response multiplexing technology. Thus, HTTP2 helps in making our applications run faster. More about the benefits of HTTP2 for SEO.
Wanna hands on building dynamic rendering for SEO, implement dynamic rendering with Rendertron in just 15 mins for free from Codelabs.