Dev Bandit logo
screenshots

SEO for Single Page Applications

When Building a Mass Market SaaS Product like a marketplace, Job Portal, Photo / Video Editor, etc. It is vital to choose a technology that is SEO Friendly. Since Google gets about 90% of the search requests it can be a major channel for customer acquisition.

Although React and Vue Js are popular frameworks for building single-page applications because they make building complex web apps very simple however since they use javascript to display data, There have been concerns about their SEO Friendliness.

In this article we will discuss what prevents single-page applications from being SEO Friendly and the best practices to ensure a good ranking for your web app.

How Google Reads a web page

Google has a Bot that constantly looks for new websites and adds it to their massive library of Web Pages also known as the Search Index. Users can opt-out of being indexed or prevent a specific page from being added by specifying it in their website's Robot.txt file.

When the crawler finds a web page, It renders the sites content just like a browser and notes down details about the page including Keywords, Links in their search index.

Since this process of crawling and indexing is automated it is important to ensure that the content is displayed in a way that is easily read by Google.

Finally when a user searches for something google scours through its search index to find the most relevant results.

The Problem with Single Page Applications

1. Prone to Errors

Plain HTML Pages are easily scanned by the google Bot

How Plain Html is Loaded

However with Javascript page, New pages can only be indexed once the javascript is completely loaded. If there is an error, Google sees it as empty and indexes it with no content.

How Plain JS Page is Loaded

2. Incomplete Indexing

Single Page Applications are only loaded once, All the other content is generated dynamically on demand. This provides it a smooth experience since partially generated content can be rendered while data is still being fetched. However, if a bot is crawling the page when content is not loaded. A significant part of the App won't be indexed.

what you see]

How to Make React SEO Friendly

Below are a few common methods to make SPA's SEO friendly.

Pre Rendering

Pre Rendering means generating HTML of a page in advance, Instead of having it completely done by client side javascript. Pre renders intercept request to your website to see if the agent viewing your site is a bot, So that It can be served cached HTML version of your website.

It is used in both Single page and Multi page applications to improve their machine readability (SEO).

There are primarily two types of pre rendering, The difference between the two is the time when html is generated

1. Static Generation Is the method that generates HTML at build time. The same html is then reused everytime.

2. Server Side Rendering In SSR html is generated on each request and the bot is served with filled HTML Page. Traditionally React apps use Client Side rendering where incomplete or empty html is served to the bot while the client is waiting for javascript to fetch the data.

Disadvantages of Pre Rendering

 1. Pre renders can be slow for sites with a large amount of pages.

 2. For statically pre rendered pages, You need to rebuild the website each time its content changes.

 3. For Sites pre rendered using SSR. It can be slower than Client SSide rendering.

 4. Pre rendering services may cost money.

To solve this issue, Web apps can use a combination of Static generation , Server Side rendering and client side rendering depending on the type of content displayed on the page to achieve an optimum user experience.

Conclusion

Overall Single page applications can be made SEO friendly and are a great choice for building Awesome web applications


Remy Sharp
Written by Sahil Kamra, I primarily talk about latest trends in technology, persuasion, media and marketing. To stay updated you can
Follow Me on twitter