Single Page Applications & SEO
Tags: seo, singlepageapps, javascript, google
Published: 2021-06-22 11:09:31

Hi, this is my first post. I don't have a background in coding, I actually have a MSc in Nutrition and fell into digital marketing after making my own company website using Dreamweaver. 

I've tried learning to code many times. In fact, back in 2012 I was fortunate enough to sit next to a front-end developer and learnt all about aliens, e-cigs (before they were cool) and CSS. Great times.

I can get by as an SEO, I know the fundamentals of jQuery, JavaScript, CSS and a bit of PHP - although what goes into a Wordpress CMS still baffles me.

Well, now us hapless SEOs have Single Page Applications (SPAs) to deal with. 

As you probably know, SPAs have been around a while and are used to create platforms like Gmail, Twitter and Facebook. However, they are now popping up as company websites with the likes of [BlackbeltWhitehat](https://blackbeltwhitehat.com/), KitKat and [PixelLab](http://thinkpixellab.com/) using SPAs instead of multiple page websites, coded or "marked up" primarily in CSS and HTML.

**SEO & Single Page Applications**

Having called upon the power of the internet, and every YouTube video and article I could find about SPAs and SEO, here is a summary of what to look out for. I'll write it in a way that SEOs can understand, so sorry for any Devs who may feel patronised by any of the content to follow...

A SPA, is different to a regular website in that it uses JS to control the page's "lifecycle". JS is used to create the HTML and it uses JS to allow users to interact with the website, for example navigated to different views/page on the website.

SPAs often use the "app shell model". Using this model, shared content or elements, across the entire website - such as menus, footers and headers are loaded on the first landing page - the different pages or "views" don't need to reload these ever-present elements.

**Test SPAs with the Mobile Friendly Tool**

A good way to start an SEO audit on a SPA website, is to enter the homepage URL into Google's [Mobile Friendly Test](https://search.google.com/test/mobile-friendly).

The Mobile Friendly Test will pick up many of the rendering issues that can occur with SPAs. In the example used on Google Search Central's [YouTube Channel](https://www.youtube.com/watch?v=l-JWN2x_Na0) by examining the JavaScript Console Messages section of the Mobile Friendly test, it was possible to identify a problem with the code that prevented the SPA from rendering correctly on mobile devices - an unsupported feature was being used. In this instance the SPA's code was dependent on acquiring the geolocation of the user, and the SPA didn't handle instances when the location was not provided.

You can also test all URLs in Search Console, using the URL inspection tool to check if Google can render pages properly. Also, make sure that URLs are SEO-friendly, in that they are not long or full of code etc - example.com/our-services/ for example is better than example.com/our-services-324t9450%6&./

**URL Problems**
One common issue with SPAs, concerning SEO, is that URLs in the browser and when crawled by a search engine bot, don't change when a user navigates to a new page/view. 
This would mean that if Googlebot visited a SPA website with this issue, only a single page would get indexed, instead of the whole site.

This can be fixed using the [history API](https://stackoverflow.com/questions/15042695/history-api-with-ajax-single-page-application-and-virtual-urls) and proper link markup using "a href" and not "onclick".

Another issue with SPAs using views, rather than multiple pages, is that even if all pages do get indexed, the same meta title and meta description can be shown for each page. 

**Error Handling**
As an SEO, my technical knowledge expands about as far as knowing what a 404, 301 and 500 http status code represent.

An interesting and annoying issue with SPAs, can be that instead of returning a 404 http status code when a page cannot be found - they generate 200 status codes, indicating to Google that everything has loaded correctly - resulting in a "soft 404".

As the server typically no longer handles the errors, additional JS is required to read the URL, fetch the data - then display an error message if that fails. The server then needs to be configured to respond with an error code for a specific URL. For example, you could redirect any not found pages to example.com/not-found and configure the server so that this page returns a 404.


**Sitemaps for SPAs**
Any website should have a sitemap, if you want it indexed. The sitemaps tell search engine bots which URLs to crawl and index. You can use a tool such as [Screaming Frog]9https://www.screamingfrog.co.uk/) to create a SPA-optimized sitemap for you.

As well as an XML sitemap, ensure that canonical tags are used and rendered in the HTML of each view/page.

**Campaign Tracking & SPAs**
As well as actually getting indexed, SPAs can create problems for SEOers, attempting to track the effectiveness of their SEO or even PPC or social campaigns.

Google Analytics 4 has some built in features under the "Enhanced Measurement" section, that can help. Activate “Page changes based on browser history events”. If this does not work, you may have to play around with/fight with Google Tag Manager and the "history change" trigger.

**In a Nutshell**

Every loves a list, so here's some issues to check when conducting an SEO Audit on a SPA

**SEO Checklist**

- Test app with the Mobile Friendly Test 

- Test app with Structured Data Tool

- Test individual URLs in Google's URL Inspection Tool in Search Console 

- Do not block JavaScript or CSS files for Googlebot

- Unique Meta Title & Meta Description in the HTML of each view

- open graph social sharing meta markup is added to each view

- Check indexation in Search Console & with site: search

- Usea site: search with a specific URL and a snippet of text to check indexation across search engines

- Add a sitemap and robots.txt file

- Ensure correct internal linking markup is used

- Use the history API so that googlebot can find each URL

- Ensure that URLs are clean / SEO Friendly 

- Use canonical URLs

- Errors and redirects are handled correctly and that no soft 404s are reported in Search Console

- Ensure URL tracking is in place

- Use Lazy below the fold rendering and a CDN to speed up the initial page load speed

In addition, be sure to check all of the standard SEO stuff with a [technical seo checklist](https://businessdaduk.com/2020/12/23/seo-technical-audit-checklist-advanced/)

Have fun!