Many companies and organizations are switching from multiple-page websites, based on HTML, CSS, and usually a content management system like WordPress, to Single Page Applications (SPAs).

A Single Page Application is created using HTML and CSS but operates using JavaScript, usually with client-side rendering. After the initial page is loaded from the server, the user can navigate to different pages on the website swiftly and efficiently. This speed is possible because, during transitions, the SPA uses Ajax requests that only retrieve data in the form of JSON from the backend. There is no need to reload pages or retrieve HTML. SPAs are fast because the user stays on the same page.

Why use a Single Page application?

SPAs are incredibly fast. With SPAs, developers can create fast, fluid, and configurable web pages that are deep linkable, and dynamic. The main difference between multiple-page websites is in the navigation. When you first come to a website built as a SPA, your browser downloads a tiny JavaScript application on your browser that runs in the background. The application communicates with the server if necessary, without having to reload any pages. So when you navigate to different pages on the website, it can be done instantly as only a tiny fraction of the typical bandwidth is used.

When using SPAs, new pages are often referred to as "views," as technically, they're not new pages - even though they appear to be when the user is navigating through a website. A SPA will typically use an "application shell" model, whereby the constant elements of the website, such as the header, footer, and menus, are static and loaded initially with the first page that the user lands on. The different views are rendered within the shell, meaning that the header, footer, menus, and other consistent website elements don't need to be reloaded at all.

Online applications such as Gmail, Facebook, and Twitter use SPAs. More recently, company websites have been using SPAs. For example, Moneypenny.com and globe.co are created using SPAs.

Potential SPA Issues

A good way to test your SPA is to use Google's mobile friendly test. This test will often flag some of the issues that can occur with SPA sites. 

For example, if the SPA uses any unsupported features, such as specific Geolocation APIs, there can be issues loading the page. Especially when a user denies access to their location. 

Another common issue with SPAs, is that the URL does not change when a user navigates through pages/views. Technically, a new page is not being loaded each time a user clicks on a navigation item to go to a new page, therefore by default, the URL will not change. This causes a confusing user experience, and can also have negative implications for SEO. As Googlebot and other search engine bots will only index a single page, if a single URL is used.

To enable users and Googlebot to see individual views as different pages, a SPA developer can use the history API and correct link markup. 

Another potential SEO issue is that the same generic meta title and meta description by default will be shown for each page/view in the search engine results. This can be overcome by ensuring each view has different titles and descriptions in the HTML.

Error handling can also be an issue with SPAs. For example, if a page is not found, the application may display an error message such as "Not Found" but instead of returning a 404 error, the server returns a 200 http status code - indicating that everything has been accessed and loaded correctly. With SPAs, the server does not handle errors any more, so this can cause problems. To see how to specifically handle these "soft 404s" please see the Google documentation on how to Fix Search-related JavaScript problems. A developer will need to add specific JavaScript code so that the user is redirected to a URL that responds with a 404 status code. The server will also need to be configured so that specific pages, respond with designated http status code. for example, you could redirect any soft 404/error pages/views to example.com/not-found/ which in turn returns a 404 https status code.

Tracking & SPAs

Using Google Tag Manager and Google Analytics 4 are generally considered the best tools for tracking events and campaigns using SPAs.

Simply adding tracking code, may not work with SPAs. There are a number of methods you can use to add tracking.

Google Analytics 4, under "Enhanced Measurement" has some built in tracking functions for SPA websites. Enable the Enhanced Measurement feature, and under "Page Views" within Enhanced Measurement, make sure that under advanced settings "Page changes based on browser history events" is turned on. Analytics should now automatically track a pageview.

Another method for tracking is to use the Google Tag Manger history change trigger. If the original method outlined above does not work, then disable enhanced measurement. Go to Tag Manager, then "Triggers" - "New" and add one of the built in triggers "History Change". Go to "Variables" and enable all of the history variables.

For more information on SPAs and tracking, please see this YouTube tutorial.

SEO & SPAs

As you can see by reading the section above, many of the issues that relate to SPAs as company websites, related to SEO and Google's ability to index the single page application as a multiple page website.

SEO Checklist

• Test Spa using the Mobile Friendly Test & Structured Data Tool

• Test URLs in Google's URL Inspection Tool in Search Console& Check it renders correctly

• Ensure there is unique Meta Title & Meta Description in the HTML of each view

• Ensure that open graph social sharing meta markup is added to each view

• When site is live check indexation in Search Console & with site: search

• Perform a site: search with a specific URL and specific snippet of text to check indexation

• Use the URL inspection tool in search console to confirm indexation

• Ensure URLs are discoverable with the sitemap and internal linking markup

• Do not use onclick for link markup/code

• Use the history API so that users can navigate back and forth between URLs

• Ensure that URLs are clean and do not contain hashtags, irrelevant elements such as session IDs 

• Use canonical URLs in the HTML of different views

• Ensure that errors and redirects are handled correctly and that no soft 404s are reported in Search Console

• Search prefers visible text - event-based loading e.g. click, hover, scroll can be devalued

• Don't block JavaScript or CSS files for Googlebot

• Ensure URL tracking is in place and working effectively so that campaigns and events can be tracked

The above list is not exhaustive, so be sure to do some further reading. This SEO & JavaScript guide is a great starting point.