Website and development are constantly evolving. The latest trend to emerge in terms of website development is the Single Page Application (SPA). They are a fantastic option for developing interactive websites and have been used for a number of years to build platforms such as Gmail, Google (News - Alert) Maps and Netflix. However, in the past few years, many companies have used SPAs to create their business websites. For example, Moneypenny, BeTheme and SocialSnack have opted to use SPAs rather than static or dynamic websites.
This article will look at the pros and cons of using a SPA as a company website and investigate how to overcome some of the issues that may impact performance and rankings on search engines.
What Options do You Have for a Business Website?
When you are looking to create a website in 2021, you typically have three options.
The most straightforward method to use is that of a static website. A static website is built by creating an HTML file for each page of the website. Then, these pages are individually uploaded to a server.
When a visitor enters the URL into their browser address bar or via a click from a search engine page, the server will send the relevant HTML file to the visitor’s browser. A static website typically consists of HTML, CSS (News - Alert) and sometimes JavaScript.
The HTML, CSS and JavaScript, however, are not generated dynamically; the raw files and source code are prebuilt and do not change with any requests sent by the visitor’s browser.
Static websites are a great option when you are creating a website that may not be highly interactive. For example, a personal website that contains your resume and work experience, or even a business website that isn’t highly interactive or personalized per visitor.
Another option is to build a dynamic website. With dynamic websites, the HTML and the code received by the visitor are not always the same. Instead, the code is generated on the fly by the server, allowing you to serve different pages per different requests.
For example, the HTML and raw code could be different when someone is logged into a dynamic website or viewing their shopping cart on an eCommerce site. The code can adjust dynamically on the server.
The content is usually generated with a server-side language such as Node.JS or PHP. Dynamic websites are great for online shops, where search engine optimization (SEO) and user experience (UX) are equally important.
The third and newest option for creating a website – is the framework provided by a Single Page Application (SPA). Said to be inspired by mobile applications, SPAs offer a more fluid, instantaneous user experience. You never have to wait for a new page to load because SPAs only use a single page – as the name would suggest! SPAs appear to use pages, just like other websites, but show different “views” that populate the “application shell.” The application shell will typically consist of the menus, the header and footer and any other elements ever-present across all pages/views of the website.
How Do Single Page Applications Work?
With SPAs, JavaScript is used to control the lifecycle of the pages. As a result, SPAs provide a much faster and more fluid user experience. Unlike static and dynamic websites, every click to load a new page does not result in a new request to the server. With SPAs, when a visitor lands or hits a page of the website, a small program of JavaScript code is downloaded within a second or two to the visitor’s browser. This JavaScript program then renders pages on the fly in the browser. With the JavaScript program rendering and loading pages on the browser, there is no need for the browser to send requests to the server.
Advantages of a Single Page Application include:
- Quick page loading
- Seamless user experience
- Uses less bandwidth
- Easy to debug in Chrome
- Work offline
Disadvantages of a Single Page Application include:
- SEO can be challenging
- Tracking & Reporting can have issues
- Security issues
- Doesn’t work if the user’s browser has JS turned off
- Requires highly skilled developer to update and maintain
Single Page Applications & SEO
If you decide to use a SPA for your next website, be sure to research and put in place solutions for the issues that can occur with SPAs and SEO.
An excellent way to test your SPA website is to use Google Mobile-Friendly Test to manually assess if the URLs of the website render correctly. If the page (or “view”) does not render correctly and shows the website as expected on the mobile preview, it is often best to check the JavaScript console messages to identify any errors.
In the example used in the YouTube video by Google Search Central, the Mobile-Friendly Test identified an issue with an unsupported feature – in this case, the geolocation API. When using the geolocation feature, always remember to have code that supports the SPA, and it allows it to function when the geolocation data is not available from the user. As well as some users, Googlebot will decline the geolocation request, so it’s essential to have a way of handling this option if the SPA website is to be indexed by Google.
Views & URLs
Single Page Applications do not use pages; they use “views.” Consequently, by default, the URL in the user’s browser will not change when the user navigates to different views on the website. The static-URL is also a problem for SEO, as Googlebot will only index a single page if the URL remains the same.
However, this issue can easily be overcome using the History API and correct HTML link markup to expose the other URLs to users and Googlebot. As with other website formats, using a robots.txt file and an XML sitemap is also a good idea to ensure Googlebot is aware of all the ‘pages’ on your SPA website.
Error Handling
Another common issue that can impact SEO and UX is error handling. For example, if a page is not found, the best practice is to return a 404 HTTP status code from the server.
By default, however, if a page or URL is not found, a SPA’s server may still return an HTTP 200 status code – which indicates to Googlebot that everything has loaded correctly. These “soft 404 errors” can cause many SEO-related issues, so it is best to get them fixed.
The best solution to this appears to be configuring the SPA’s server to respond with a specific HTTP status code when a particular URL is loaded. For example, JavaScript code can be added to the SPA so that if a page is not found, the user is redirected to a specific URL such as example.com/not-found/. In turn, when that URL is loaded, a 404 HTTP status code is returned. You can learn more about this configuration technique on this YouTube video, and more error handling methods are listed here.
Conclusion
Single Page Applications provide a fast and fluid user experience. As a result, they are likely to be used more often in the future. The main issue with SPAs at present, however, relates to SEO and also campaign tracking. Tracking relates to the ability to track campaigns and platforms and how they bring traffic to your website. For example, if you create a set of Facebook (News - Alert) ads with accurate tracking, you will be able to report how many conversions or sales occurred as a direct result of those adverts. Fortunately, Google Analytics 4 has some built-in tracking options under the “Enhanced measurement” options. You can learn more about tracking SPAs in this video.
Finally, here is a checklist of best practices when it comes to optimizing a SPA website for SEO:
- Test website with Google’s Mobile-Friendly Test
- Test individual URLs in Search Console’s URL Inspection Tool
- Add unique meta titles & descriptions to each HTML view
- Check URL indexation in Search Console
- Check URL indexation with a “site:” search, e.g., site:example.com
- Add an XML sitemap and robots.txt file to the root domain
- Ensure correct HTML link markup is used
- Use canonical URLs
- Ensure errors and redirects are handled correctly
- Ensure there are no “soft 404s” reported in Search Console
- Ensure URL tracking is in place to enable campaign reporting
