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.
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 Moneypenny, KitKat and PixelLab 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.
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&./
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 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.
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
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
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