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.
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
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.
How to Make React SEO Friendly
Below are a few common methods to make SPA's SEO friendly.
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.
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.
Overall Single page applications can be made SEO friendly and are a great choice for building Awesome web applications
Follow Me on twitter