Should Your Next Company Website be a Single Page Application?

It’s fairly standard these days for a business to have its own website. It’s a great way to showcase your services, products, and credentials. Many companies in 2021 exist and operate solely online and do not have a “bricks and mortar” presence, such as a shop or office.

In order to get found by potential customers, marketing professionals spend millions each year on advertising through social media platforms and search engines. Search Engine Optimization (SEO) remains the foundation for many business endeavors, providing ‘free’ traffic from a search engine such as Google and Bing.

User Experience (UX) is also crucial. It is no use spending months perfecting your latest SEO campaign and social media adverts if the majority of your website’s visitors bounce straight back to the search engine because the site is too slow or too hard to use.

With a SPA, users enjoy the fastest and most fluid experience possible. This is why applications such as Gmail, Trello, and websites such as Angular University, Moneypenny.com, and Airbnb ause SPAs.

What is a Single Page Application?

One of the latest developments in web design, is the use of single page applicatins or “SPAs”.

SPAs are a lot faster in terms of the speed that they load and in their general functionality. With a standard website, such as a hardcoded HTML site,  WordPress, Wix or Shopify site, the website has to download ingormation from the browser each time a user clicks on a navigation item, in the menu.

With a SPA, as soon as the first page of the website, such as the homepage, is loaded, the SPA no longer has to communicate with the server. It uses a small javascript program that downloads to the users browser in a couple of seconds, to load and resolve every required element of the website. It functions much like a desktop application.

Unlike multipage, standard websites, a SPA doesn’t reload any identical elements of a page. It downloads an “application shell” on the first page that is visited. So for example, if a website uses the same header and footer throughout, this is loaded once and does not have to reload when the user navigates to a new page. With a standard website, the whole page has to load and resolve each time a new page is navigated to by the user.

Pros & Cons of Single Page Applications

• Single page applications load extremely fast

  Single page applications are fast. The initial page that the user lands on, will load relatively quickly, but the real difference in speed is seen when the user navigates to separate pages.

• Works Offline

The whole application is loaded only once. If a users internet went down mid-session, the SPA would still work.

Some of the drawbacks, or cons of SPAs include:

• Does not work if JavaScript is disabled

A small percentage of internet users like to disable Javascript. This can help provide a faster web experience, but will stop many websites from functioning fully. The big difference between SPA and standard websites, is that SPAs use Javascript to load the HTML and other content. So almost nothing will work on a SPA website if the user has JavaScript disabled.

• SEO

A big issue with SPAs is the difficulty when it comes to SEO. Due to the amount of code and Javascript, Google can struggle to crawl the website properly. SEO professionals can also struggle to optimize SPA websites, if they are not competent at coding.

SEO & Single Page Applications

If you or your company is going to use a SPA, then it is really important to start with SEO in mind. It is not unusual for a SPA to go live and replace a standard multipage website, only for rankings to plummet, in turn losing substantial amounts of revenue for the business.

Common issues with SPA websites include unsupported features such as APIs, issues with URLs resolving and displaying. There can also be issues with tracking – making it difficult to identify if tracking came from a Google Ads, a Google organic listing or a social media source.

Finally, SPAs can have issues displaying error pages and the correct http status codes. For example, if a page does not exist or has been moved, it is common for a SPA website to show a 200 status code – which suggests everything is fine, instead of a 404 status code, which tells the server and the user that the page cannot be found.

Resolving SEO Issues with SPAs

As ever, its always better to bring forward solutions, instead of problems.

For example, if the URL does not change when a user clicks onto a new page (or “view” as they are sometimes called in applications such as SPAs), this is a problem, as Googlebot and other search engines will only index a single page.

To overcome the URL issue, use the history API and proper link HTML markup. You can learn more about the history API in this YouTube tutorial and link markup in this tutorial.

To ensure that the SPA displays the correct https status codes, configure the server to respond with a specific status code for a given URL. For example, if all pages that don’t exist are redirected to a specific URL such as example.com/notfound/ then the server can be configured to generate a 404 https status code every time example.com/notfound/ is loaded. You can learn more about how to set this up, in this YouTube tutorial from Google Search Central. This will tell both the user and Googlebot that there is an error and that the page shouldn’t be indexed.

Campaign Tracking & Single Page Applications

The issue with tracking URLs with SPAs, is that the URLs don’t load or reload in the same way that they do on a standard HTML website.

As mentioned above, it is important to incorporate the history API into the development of a SPA to ensure that the user sees the different URLs in the address bar.

Google Tag Manager has a special trigger that can read the information that gets sent to the history API.

To make use of Google Tag Manager, you will need a google account and you will need to sign up for a specific Google Tag Manager account.

You then need to install the necessary code on your website to use and implement tags. You can do this yourself, or if it is too technical, you can always hire a freelancer on a website such as UpWork or PeoplePerHour.

To install the tag, go to Google Tag Manger, click on “Triggers” in the side menu. For “trigger type” click on “history change”, then click “save”.

Next click “variables” and click to check/tick all of the “History” variables, including “New history fragment” and “history source”.  Refresh everything and then navigate back to your website. With its widespread usage, whenever a particular platform is employed, upgraded editions are readily available to optimize data tracking. For instance, while using Magento, Magento 2 Google Tag Manager plugin excels in compatibility compared to the standard Google Tag Manager.

Conclusion

Single Page Applications can provide a higher standard of user experience, which in turn can give your company a competitive advantage. However, even with experienced developers and a highly skilled team of SEO executives, the deployment of a SPA, rarely seems to go smoothly. It can certainly help to be aware of all the common problems related to SPAs and SEO, so that you can prevent many of them from occurring in the first place.

Google Tag Manager is a great tool in general and can help with tracking campaigns, especially with SPAs. Click here to see a full tutorial of Google Tag Manger for beginners. One final thing to be aware of with SPAs are potential security issues. Because of cross site scripting, hackers can potentially gain access to the client-side of a website and insert new scripts.

SPAs are a great idea when you have a dynamic website with a small data volume and if you are thinking of developing a mobile app – as the backend API can be used to develop desktop and mobile apps.