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.
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.
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.
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:
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 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.
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.