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!
For example: Googlebot (Google’s crawler/user-agent for Smartphone and Desktop) visits a website, retrieves information (html), runs several codes (JavaScript, CSS, and CDN, images) and assess your content to clearly understand what the structure or the layout of the website is all about. This process is technically called “Rendering”.
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 rendered HTML. The rendering happens between them.
The application/website can be totally different between these two stages.
Raw HTML:
In Chrome, for any website, we find it’s page source using the “View Page Source” option (shortcut: Ctrl+U for Windows & Cmd+Option+U for Mac). The page source will have only the links to the resources like CSS, CDN, Images & Javascript that are essential to build the website.
That is the RAW HTML file.
Rendered HTML
The Documented Object Model (DOM) version of the page is the rendered HTML. Simply, it is the raw HTML along with the changes it requests/call via Javascript during the rendering.
The View Rendered Source is one of the chrome extensions to find what has changed from a Raw HTML to Rendered HTML.
Benefits of Rendering in Technical Javascript SEO
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
- Ranking a Single Page Web Applications (SPAs) (built in Javascript) becomes easy
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)
Almost every Javascript functionalities, like, data fetching, logic, routing, templates happens only at the browser – client-side rendering (CSR). The size of the Javascript will scale as the application/website grows. Thus, it is difficult to get the client-side rendering to be faster in mobile.
Rehydration
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
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
As we know, Javascript SEO isn’t that easy at the moment. Not all search engines crawlers are able to process the Javascript efficiently. The dynamic rendering switches between the pre-rendered and client-side rendered contents based on specific user agents.
Must Read 👉 Top 10 reasons to try Dragon Metrics SEO Tool
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.
Implement Javascript SEO for Better Crawling & Ranking
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.
JavaScript SEO is challenging, but that’s the future of technical SEO as many powerful applications were built on it.
Wanna hands-on building dynamic rendering for SEO, implement dynamic rendering with Rendertron in just 15 mins for free from Codelabs.
Must read 👉 “Guide to Export 25,000 rows using GSC API without coding!!!”
