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, 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.
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 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 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
Have fun!
Top comments (4)
Mine, we tend to prefer professional sites and rather don't recommend one page sites.
Yea, me too!
I really appreciate it, Drew. As you know most of the web developers do not apply these SEO metrics, but they must. for your informative post and SEO checklist, I am sure they will understand the importance of SEO for their web sites.
thank you for the comment :) Yes, SPAs are pretty hard for us SEOs to understand, we need to make sure that we communicate well with the developers as I think they'll be the only ones who will be able to implement the SEO best practices