SPA SEO

A pretty common question that comes up is “SPA SEO….. are these apps good or bad for search engines?…” At this point in time these apps for Search Engine Optimization have a lot of digital marketing bottle necks for search engines.

In this article i’ll first showcase my process for trouble shooting single page apps, followed my general thoughts on using whether or not you should have built your web page (or eCommerce store) with a js based programming language utilizing a single-page application framework.

Let me be clear, I’m a Javascript superfan, but there is a right way and wrong way to use Javascript (or spas) for search engine SEO efforts.  I also don’t pretend to know everything, feel free to email if you have any SEO testing ideas for a Single Page Application or apps in general. 

TL;DR: Is SEO for SPA Search Engine Friendly? Yay Or Nay?

Can single page apps rank in searches? Sure. As an SEO that has actually worked on SPAs (notice there is an “S” – implying more than 1 of these SPA SEO apps) it’s possible and can be done in single page application SEO.

In my opinion (are we still allowed to have those?)  – There is a lot of work to be done to “get it to zero” for SEO.  Meaning, there’s a lot of ground work before you can do normal SEO stuff, before SPAs are similar in nature to a normal php or static html website. This is a necessary step, regardless if you use react, vue, angular or some other framework.

Do you wanna get going or do all the extra work needed for a single page app? Developers are generally busy, does your team have the bandwidth to workout the SEO infrastructure these apps require? Are they prepared to debug client-side html and server-side rendering?This is a decision you as the business owner, developer or marketer have to make whether or not to go with building a single page app. 

My SPA metaphor for SEO: Do you want to buy the first version of Tesla with battery issues? Or a later model? While search engines are on the right track and have made considerable progress with rendering these types of apps, probably better to wait until search engines have Javascript a bit more figured out.

SPA SEO: Is all lost if you already built an Application?

My opinion, absolutely not, just be prepared to troubleshoot your single page web app for at least a few months. In this article, I made sure to include lots of information on how to diagnose your application. 

Anyway, here is the helpful links to jump around this page:

On that note, I thought a good place to start is to understand the types of problems most SPAs (Single Page Websites)fall into with search engine optimization. After that I’ll dive into my overall thoughts on the approach of using SPAs over other types of applications/software.

How to make SPA SEO Friendly & Diagnose Problems

When you are looking at pure SPA applications, you cannot start from the same place as a “normal” website or or non SPA web application. 

Firstly you need to identify where the page SEO deficiencies are, namely where we are encountering troubling shooting bottlenecks with these types of single page applications.

A place I really like to start is seeing how the page is cached and the websites indexing. 

Check How Many Pages of Your SPA Are Indexed

In SPA SEO, Even when you use a sitemap, indexing is almost always a problem with Single page applications, frameworks such as React, Vue js, Angular etc.  Outside of the Google Search Console, you can look at Google itself to see if your page is indexed. 

Firstly, remember to use an ‘incognito window’ in Chrome to view your page, this is important, even for non SPAs.

If you use a normal Chrome window to view your page, its going to throw off your SPA diagnosis results. This goes for any client side browser, always use a private window when trouble shooting.

You have to type the following into google:

site:websitename.com

Typing the site operator into our browser is pretty powerful, it will show you all the pages indexed with your single page application.

Let’s do it a quick example for the following web page that uses SPA SEO: 

Although it’s curious that the first page showing up is in Japanese, the rest of the information is quite helpful. 

We can see that over 119,000,000 are indexed. 

If we were working on a small website with say, 1,000 pages and only 100 of them showed up here, we’d know pretty quickly which app pages are indexed and that there is in fact likely a SPA indexing problem. 

How to Apply this to real world Single-Page Application and Fix It Up

Knowing WHICH pages of your app are indexed is important. We can reverse engineer WHY each page is being indexed. 

Sadly, even outside of spa’s, there is no easy and quick answer, but here are a few things I’d look for:

• Which pages are internally linking to the indexed pages
• Some kinda prerendering going on? Template code any different for these pages?
• Was it just luck each SPA page made it the index?
• Are competitors utilizing server-side rendering having better luck?

Check Google Cache 

This is a trick I personally really like to use to diagnose SEO issues indexing, not only Single Page applications, but ‘normal’ websites that utilize server-side rendering as well. 

Now that we know how to use the “site:” operator, let’s do that again and check to see how the page is cached in Google.

Here is how you do it (even in Non SPA SEO):

1. Click the “three dots” in the search results page (the name of this navigation area escapes me at the moment)
2. Then click “cached”

You’ll see a page like this:

It provides A LOT of useful information about the page. 

How Can You Use This Information to Improve Your SPA App?

You can see how often pages actually get cached, which is different from indexing a page. 

If you get a page indexed, great, but the information that is being updated on the page being taken into account?   It’s a good metric for “are my SPAs onpage updates actually being counted in Google.”

Meaning, if you make an update to a page, then you see the updates cached, it means Google is taking into account the updates that you made.

Also look for any weirdness with how the content is displaying, both visually on the page and in the source code.

Here is is what I’d look at:

• The source code, what’s indexed?  Any funky html tags or xml tags not appearing as expected?
• Rendered code? Again, what is cached or indexed?
• Any major differences between the two sets of SPA html code in the course and client side? Often the meta data, such as the title tag, etc visible server side, are they different?

I cannot emphasize base enough, this is incredibly useful information for any SPA. 

How Does a Typical SPA Application Cache in Google?

Well… often it’s not good. You’ll see pretty much nothing, although the cached code is often pretty telling.

You can expect similar problems in both vue and angular, however for the purpose of this article I took examples from a react app.

A blocked out the name of the SPA for privacy reasons, but here is a react app we are currently working on at the time we wrote this blog post:

What Do We Gotta do to Update the Web App:

I’d focus on seeing how you can make something ‘show up’ when the page is cached. In my book, not seeing a single html element is concerning.

A lot of the time, page app developers have to work out how it’s rendering html on the page. 

Troubleshooting Javascript in Chrome: Set Your User Agent To GoogleBot

Once again, Chrome is one of my favorite tools for SPA. 

In this case, since I can’t publicly share client information or their apps, I’m going to use eBay as an example. I believe they are a MPA, but let’s suspend belief for a moment for the purposes of this SPA article.

In Chrome, set the following:

1. Right click, ‘click inspect’
2. Click ‘network’
3. Click browser default
4. Select one of the GoogleBot user agents.

Now that you know how to set up Chrome to change the useragent to Googlebot and view your page, let’s compare the two different menus. 

Menu with Normal Client User Agent

Menu When GoogleBot Crawls The Site

As a disclaimer, it’s hard to say if they are doing this on purpose, it’s a huge website, there are probably some kind of crawling benefits. It’s also worth pointing out, their website caches as expected, as shown in a previous step about the Google Cache .

What I am saying, it’s a good visual page example to figure out and troubleshoot if there is a GoogleBot issue with your SPA app. 

Although I can’t share their page publicly, I’ve seen menu scenarios like this with client sites. If Google is unable to crawl all the links (urls) and html your page menu, it often leads to HUGE ranking and indexing issues. I’ve witnessed developers mistakenly tank organic traffic from making updates like this.

Links, especially in the menu are often the gateway to the rest of your website for search bots. I highly recommend making sure all internal linking displays correctly and is in proper working order. 

Also take the time to see if all Semantic HTML elements are displaying property.  For example, is the text? HTML displaying in a weird way?

What app updates should you make?

If in both the cached view and Google Chrome you are having display roadblocks. Brainstorm with your devs how to normalize it. It’s likely a rendering issue.

It’s also nice if you have a newer website that has not been cached by Google yet to have this tool available. 

Google Search Console for SPA

This is the one that everyone likes to point to that say everything is “perfectly” fine with your app. Yes, it is an amazing tool, better yet it’s totally free.  That said, my general impression is that most people “stop here” and don’t do the steps we outlined above.   Skipping the above stuff is where you can get yourself into trouble.

That said, I’d enter the URL into this section, test the “Live View” and address any issues that pop up, this will help ensure you have SEO friendly URLs.

Here are the spots I’d probably focus on when reviewing a single page:

What should you do here?

I’d suggest:

• Inspect the URL you are currently investigating.
• Don’t forget to read all the stuff that Google brings up, offering a pretty good overview.
• Test the live URL when you are done and address anything that comes up. If you have a problem with one page, you probably have an issue with a whole bunch of ’em.

What Do You Audit Next?

Even if you are a non-enterprise level site, I’d hop over to the guide we put together on how to do an enterprise SEO audit. A lot of the time, even smaller SPAs suffer from the same issues large scale server-side rendering enterprise applications do.

Generally speaking, as long as you understand how to review Javascript pages with the above strategies, you can roll it out on a larger scale. 

Wrapping up our App Audit for SPA’s

Now that we got the trouble shooting over with, hopefully you understand the types of search engine optimization problems that commonly accompany single page applications.

Let’s dig into common objections I hear from developers and marketers…

Are javascript libraries and SPA Frameworks Worth the Risk?

That said, at this point in time, I’m not certain SPA’s are worth the risk for search engine facing content, regardless if we’re talking about react, angular or some other framework.

Onto common objections:

“The Speed Is Amazing Therefore We’ll Get More SEO Traffic Than Our Competitors”

Wrong. All because a website is fast, doesn’t mean you’ll gain a lot of organic traffic. Speed is around 1/15 core factors (give or take) for search engine optimization. 

Yes, it’s important and something you must do. I personally wouldn’t consider that an advantage over competitors. Nowadays, most companies have fast websites or apps. In a competitive SERP (Search Engine Result Page in Google, Bing etc) It’s no longer a way to stand out, everyones doing it.

“Prerendering Is Amazing for SEO.”

Not convinced, it depends on the situation. Is it better than regular old Javascript rendering client side? In most cases yes.  

In my option, prerendering is a worthwhile use case for single page applications that are already created.  Kind of “after the fact” web development and “we need to boost our SEO.”

In most cases, you are better off using a different Javascript framework, then say regular old out of the box React JS, or good old fashion server side rendering programming languages.

According to all our SEO testing thus far, while it does index urls and is crawlable, it doesn’t (at least not yet) pass authority (pagerank and power from backlinks) from one page to another like server side rendering. 

Therefore it impacts overall rankings. 

“You SEO folks Are Wrong, There is a Simple Configuration Issue We Need To Figure Out”

Can you wait 3-6 months to figure out said configuration issue? Or can you use a programming language or different Javascript Framework that doesn’t have these search engine road locks? 

There are lots of great solutions with programming. While I’m not closed off to the idea, I’ve personally yet to encounter a single page application in popular javascript programming languages (vue js, react, angular, etc) that have overcome these objections.

In my experience most developers are unaware of how long SEO takes to ‘kick in.’  Competitive keywords can take years for a less authoritative website  to rank for, why add 6 months to that process?

“XYZ Famous Website Does it, why can’t we?”

How much traffic are they leaving on the table? In addition, are they super authoritative (lots of backlinks) and can get away with things your web app or ecommerce store can’t?  

“All The Articles & Documentation I’ve Read Say it’s fine….”

Misinformation on the internet?…. More often than not, most SPA search engine optimization articles are written by developers and writers.   Not technical SEO experts.

Now that you get the basics, let’s deep dive into each individual aspect.

Does Javascript and SPA Rank Well? Will it get organic Traffic?

Can it? Sure, will it?…… There are strategies to overcome these types of Javascript related SEO issues.

When I explain this to developers, many are surprised to hear this. It’s not their fault. In fact at one point at time I was under the impression it didn’t really matter. 

However time and time again I find that normal server side rendering websites often outperform Single Page Applications (even with prerendering.) 

Crawling, Indexing and Ranking Are not the Same Thing

Most developers I encounter believe that Crawling & indexing === rankings. 

They do not. 

They are three separate aspects of SEO.

All because you are indexed by Googlebot, or if they are crawling your site and urls, it does not mean that you will be rewarded with page one results. 

In order to receive organic traffic, you must be on page one of Google (or any search engine) for your targeted keywords

Crawling

Yes, Search Engines can crawl your SPA Javascript app and its urls, at the time we wrote this article Google can crawl client side applications. Other search engines such as Bing and DuckDuckGo (thus far) cannot.  For the “other search engines” you’ll need prerendering. 

Update: Bring is showing promise for client-side rendering html. Although if you are focusing on Bing, I’d still stick with server-side rendering.

Indexing

Yes, SPA’s can be indexed, similar to how they can be crawled.

Ranking for Competitive Organic Traffic

This is where things get a bit shaky for any website, including SPAs. 

There is so much green in between here, for example, developers may make an honest mistake, therefore you are likely better off with a framework or coding language that offers server side rendering. 

Allow me to explain.

Especially in more competitive niches, you can easily do some research and figure out if client side or server side is a good idea or not for your SPA. 

Can SPA’s Outrank More Competitive Websites?

Can they? Of course. 

Lots of developers report that the Single Page Application they built can outrank competitive and highly authoritative websites. 

However, depending on the keyword your SPA is targeting:

For example: 

• Are they outranking a forum of a major website? Historically, forums are very easy to outrank and many major websites have a form attached to their main brand.
• Did the ‘major’ competition do a good job of targeting said keywords?  Lot of times, enterprise level sites are behind the ball in terms of basic optimization. 

My point, does the person reporting the results know how to calculate competition? From my experience, no.

SPA Client Side Rendering 

For Non-SEO people, this is going to sound like the SPA tin foil hat club from random intranets. Prepare yourself.

Google can now crawl and render Javascript in the browser. This is a pretty well known fact. 

That said, lots of SEOs have reported that they frequently disable client side rendering.

 Especially during recent updates.

This is bad….

Meaning, your content marketing team can be making updates to articles and Google is completely ignoring them until they resolve whatever they are working on or the update is over. Server-side rendering does not have this roadblock.

Especially in highly competitive markets where frequent updates are required to rank, (ie charts with data for stocks or whatever) it’s a major issue if Google is ignoring your SPA updates until they are able to process front end rendering again.

Server-Side Rendering

The main aspect of server-side rendering, I personally prefer is the predictability. For example, node.js renders server-side, where as react, vue, angular etc generally renders client side.

To gloss over this rather quickly, all search engines can render and process this type of rendering with ease. In todays search engine environment, server-side rendering often the better choice (in my option) then client-side.

What About Prerendering? 

My opinion, it’s a possible solution for an existing application. However if I was personally asked to build an application from scratch, I’m not so confident I’d use front end javascript frameworks. 

For example, I’d probably pick Node.js (server side rendering SSR) with some kind of templating engine over vue, angular or react SPAs (single-page applications). 

That said, if I was working on an existing application or saas, it’s a viable option. I suggest you read the  article we wrote on the subject Rendertron vs Prerender.io to better understand server side rendering for SPA SEO.

Other Search Engine discoverability Questions

Here some common single page apps questions we couldn’t quite fit into this article..

What Javascript Frameworks do you recommend?

Is React better than Vue? Is Vue better than Angular? Which is the best framework overall? There are quite a few, we have an entire article about the best javascript framework for seo.

Should an e-commerce store use these frameworks?

They can, but the same reasons we outlined about ‘normal’ websites apply to e-commerce. For example, I’m not of the belief it is the “secret sauce” to eCommerce marketing.

Can these frameworks be intergraded into popular eCommerce platforms?

According to developers I have spoken to they can be integrated into Shopify, etc and most shopping cart platforms. Just note all the client-side rendering stuff we mentioned above.

Will cloudflare help?

Sure, cloud services can reduce latency which is always helpful, but it will have a similar impact as it would on other websites.

Should you be worried about the URLs produced?

Yes, URLs are very important for SEO. Frankly, normal optimization standard practices practices apply here for any single url or urls. When it comes to SEO for spas, unless its totally necessary, make sure no funky urls are being produced.

How do you handle structured data and metadata?

Lots of good workarounds for this with these types of apps. Not a huge problem, handle it as any other normal website. Same goes for cookies and metadata.

Any good podcasts or blogs on the subject?

Sorry not a single single page applications podcast or newsletter comes to mind. Same goes for a decent blog, Snipcart is okay. Well besides our blog 😀

How does a Single Page application they compare to MPAs?

My option, a multi page application tend to perform better.

How does it compare to Static HTML files for Search Engines?

Web pages that are built with static html pages are rumored to be the ‘best.’ However a site with only plan html file is hard to scale. A basic example, the html page title is more easily read than javascript code.

Google Analytics Settings for Web Apps

There is no special settings different from a simple html page that will give a boot. Same goes for Google webmaster tools.

Final Single-page application SEO thoughts

Pretty much, you need to decide what your goal is for the single page applications you are working on.  If you are deciding which technology to use for a search engine facing application, you may want to consider