Optimising JavaScript Websites | Advanced SEO – 10

Now that we understand how JavaScript websites work and the various issues involved from the SEO perspective. Here we will talk about how we can resolve those issues. First, we need to understand client-side rendering and server-side rendering.

Client Side Rendering

A web page is essentially structured by HTML. The styling and functionality of the website is implemented via CSS and JavaScript.

The CSS and JS files are only included in the HTML. A browser needs to parse and execute those files in order to display a complete web page. This is called rendering. Now, if rendering is happening in the end user’s browser then we say it is client-side rendering.

In client-side rendering, the server gives all the required files to the browser and tells it: okay, these are the files you need,  now go on and execute them. A browser behaves as a worker and a server behave like a raw material provider. Let’s say a web page is a building to be constructed.

The server gives the raw materials to the browser and the browser takes these raw materials and builds the website. 

A crawler behaves the same way as a browser. It needs to take in all the raw materials (CSS, JS) and start building the website (rendering).

Server Side Rendering

In server-side rendering, all the work is done by the server and the browser is served a static HTML file (which requires no extra work) and is displayed to the user. In this case, the browser does not need to do anything extra since all the work is done by the server.

As is clear, all the load is taken away from the client and is handled by the server. This might slow down the server.

Now that you understand what is client-side and server-side rendering. It is time to talk about how we can optimise JavaScript websites. 

Optimise JavaScript Website

In the previous guide, we learnt about the various SEO issues we might face while developing a JS website. There is a solution for each of them but needs to be handled by the developer only.

Those solutions require the knowledge of JavaScript and we can’t implement those solutions on our own. But if you are a JS developer, here’s how you can solve various JS issues.

But as an SEO, you need to make sure that the JavaScript-powered website is rendered correctly by the crawler. If while rendering, some of the content or even all of the content is not being rendered by the crawler then it might affect your rankings severely.

There are two tools you can use to check how your web page is being rendered by the Google bot. The mobile-friendly test tool and the URL inspection which is available in the search console.

As we already saw on this page, its source code doesn’t include any of the content presented on the front end.

Let’s check how this is being rendered by the Google bot. Go to the mobile-friendly test and run the test on this URL https://angular.io/guide/what-is-angular

This is what we get

Click on view tested page

So, it turns out content is being rendered correctly and we need not to worry further about it.

Implement Dynamic Rendering

Dynamic rendering is one of the ‘all in one’ solutions to all the SEO problems with JS websites. In Dynamic rendering, if the web page is requested by the google bot or any other crawler then we render the web page from the server-side and give the crawler a static HTML with all the content in it.

This way, a crawler doesn’t have to miss or render any content.

And if the web page is being requested by the normal user then we serve the web page normally for it to be rendered in the browser. Dynamic rendering doesn’t put any load on the server since requests from users and crawlers are handled separately. We don’t have to render web pages from the server side for all requests. 

Some of the common dynamic renderes are: Rendertron, puppeteer and  prerenderer.io 

How do you test if dynamic rendering is correct or not? For that, you again use the Mobile-Friendly Test tool or URL inspection tool. You also need to make sure that structured data is also being rendered correctly. For that, you can use the Rich Results Test Tool.

Leave a Reply

Your email address will not be published.

16 + 15 =