The impact of single page web applications on SEO
First things first, what is a single page web app?
You might have seen them around here and there as they are becoming increasingly popular.
When I say ‘Single page web application’, what I am referring to are the modern and responsive websites that are built using web frameworks like Angular, React, and Vue.
SPAs (single page applications) are web apps that only have 1 page (obviously), so rather than having different webpages for different parts of your website, you’re given 1 page. But how does it work? Well, what happens is that there is a lot of clever JavaScript trickery going on behind the scenes, an SPA is made up of reusable components rather than HTML pages. The components themselves can vary greatly depending on what framework is being used, you can even make your own custom components!
E.g.
Rather than hardcode a menu into your website with all the data and logic manually programmed in, you would simply use a menu component from the framework and just give it the data you want to display!
The example is a perfect demonstration of the fluid interface of SPAs. You get an immediate response when you interact with the website. This makes for a very mobile app-like experience.
How does this effect SEO?
Search engines need to continuously index the content on their site, this is what makes the site content searchable. For obvious reasons, this cannot be done by a human, so how do search engines index all of their content?
Introducing: Web Crawlers!
Web crawlers are internet bots that systematically browses the World Wide Web.
It works by downloading your website source html, this information is then sent back to the bot owner and indexed on the search engine. Crawlers can also validate hyperlinks and HTML code to ensure that it is safe and compliant with their standards.
The limitations of web crawlers
Remember how I mentioned that SPAs have lots of clever JavaScript? Well that is all rendered client side (in your browser). You are essentially sent some JavaScript instructions detailing how to build the web app. Your webpage will be mostly empty with 1 tag acting as the insertion point for your web app.
Most crawlers are either unable to render JavaScript, or cannot render it correctly enough to index the content, therefore with this limitation, it’s not possible to list your website correctly in search engine results as they will not be getting the complete structure/content of your site.
Well… What can I do about it?
“I’ve invested all this time and money into a beautiful SPA for my business, and you mean to tell me that I can’t list this in search results?!”
Not exactly, where there’s a will, there’s a way; In this case, that ‘way’ is called ‘Server side rendering’. I’ve mentioned briefly that SPAs are rendered client side, well that doesn’t have to be the case.
Server side rendering means that your browser will receive a pre-rendered version of your website. This facilitates the crawlers as they have all the content they need to index your website properly.
Having your website rendered on the server removes a lot of browser processing from your machine, making for an even smoother and faster experience.
Summary
To summarise, SEO has been the main focus of many businesses when designing and building websites. It’s an arms race to be that #1 search result, this means that most businesses and companies will usually shy away from anything that might negatively impact SEO. Modern websites like SPAs are definitely the future! And I cannot wait to see more and more businesses adopt them.
Get in touch