Javascript SEO: How Can Single Page Apps Rank in Google?

Single page apps (SPA) are a popular way for web developers to build websites and web applications. Instead of a server providing HTML and CSS to a visitor’s browser, an SPA instead delivers Javascript. The browser executes that Javascript, which then renders a page. SPAs are often easier to develop and can deliver a better user experience to your visitors.

SPAs are a great choice for web apps that have a high user dwell time and lots of user interaction. The initial Javascript bundle contains all the logic needed to render and navigate between pages. So visitors can click through to a new page, downloading minimal data if necessary. It also gives a better user experience, enabling animations between pages and infinite scrolling.

It is no wonder then that the most popular web apps we use every day are single page apps. Trello, Gmail, Twitter and Instagram all use this pattern. Take Trello as a key example. Opening and closing cards is a fundamental part of the product. This would be a much poorer experience if each card reloaded the entire page.

But single page apps can present a problem for SEO. The way an SPA works is fundamentally different to a traditional server-rendered website. So search crawlers, including those of Google and Bing, can have a tough time crawling and indexing your pages.

Why Are Single Page Apps a Problem for SEO?

By default, single page apps do not deliver a whole page with content to a visitor’s browser. Instead they deliver a blank page, with reference to a Javascript bundle. It is that Javascript code, when executed by the browser, that produces the page with all its content.

Web crawlers, including Googlebot, work in the same way. When they request a page, they instead get a blank page without content. This problem led Google to introduce the Web Rendering Service. Today, Google is able to render webpages using the same technology behind Google Chrome.

But this method of crawling is not perfectly reliable. There are strict crawl budgets, so slow or resource-heavy websites may not render correctly in WRS. Google also tends to use older versions of Chromium, the project that backs Google Chrome. This means you need to support this older version for Google crawling and indexing to work correctly.

Even more importantly, not all web crawlers support single page apps in the way that Google does. Neither do many “snippet crawlers” — those handy crawlers from Facebook, Twitter, et al, that enrich links with titles, descriptions and images extracted from your webpages.

So, even with Google’s advanced technology, it is clear that SEO remains a problem in regards to single page apps. Every website wants search engines to reliably index their pages. So it is important to take the basic steps to make your SPA-based website as SEO friendly as possible.

Server-side Rendering and SEO

Server-side rendering is an optional feature of a single page app. But it is the most important factor when it comes to search engine optimization. Server-side rendering mimics a traditional webpage, serving up a full page with content.

Only once the initial page loads does the web browser download the Javascript and execute it. In a server-side rendering model, the purpose of this Javascript is to ‘enrich’ the page. It does this by adding support for interactive features and supporting client-side navigation. This ‘enrichment’ process is commonly known as hydration.

Before we even consider SEO, let’s remark on the benefits that server-side rendering gives to your visitors. Because your website serves up a full page, the content is rendered immediately in a visitor’s browser. This means they can start reading your content before the SPA is fully loaded. And it even benefits visitors that have Javascript disabled.

The benefits for SEO are even clearer. Your website serves a fully-rendered page to web crawlers like Googlebot. And because your single page app Javascript code will only hydrate the page when it loads, it will not change any of the content rendered. This means that Google can index your page reliably, without risking a mis-render from executing your SPA.

Important SEO Considerations for Single Page Apps

How do you ensure reliable crawling and indexing of your single page app website? The best way is to ensure that your website behaves as ‘traditionally’ as possible. If your website is viewable and navigable with Javascript disabled, it’s a good bet that Google and other search engines will index it well.

Take hyperlinks within your webpages. In a single page app, it is possible to add an ‘event handler’ to a link. And this event handler can in turn navigate the browser to the next page. But event handlers like this only work when the page fully loads, including the single page app Javascript bundle. Instead, you should ensure that your links have a valid URL href: <a href=”http://example.com”>Link</a>

In this way, web crawlers can extract URLs from your page without having to ‘virtually’ click on the links. This is important so that Google can understand your website link structure and is able to discover new pages.

It is also good practice to provide sitemaps to search engines. Sitemaps can help search engines discover new pages, which may be more difficult when crawling single page apps. Search engines regularly check sitemaps that are linked from robots.txt.

SEO Basics

At the same time, you should ensure that your single page app meets basic SEO criteria. Things like page titles, meta tags and canonical markup are equally important in both SPA and non-SPA websites. But the complexity of single page apps make it easier to overlook these factors.

URLs are a good example. It is best for SEO (and user experience) to use short, descriptive URLs that contain keywords in the pathname. But, many single page apps still rely on ‘hashbang URLs’ (https://example.com/#!/about) or IDs. It is a good idea that single page apps use pathname-based URLs and correctly set the URL when navigating.

Meta tags and canonical tags are important for both SEO and social crawlers. Google often displays the meta description in its search results. Even when using server-side rendering (SSR), meta tags can be overlooked. This is because they appear in the <head> part of a page, so it requires additional work to ensure the tags are included.

A big issue with many single page apps is how they show error pages. Google is pretty good at detecting not found and other error pages. But it is good practice to ensure that these pages return the correct HTTP status code – 404 for Not Found. You can check Google Webmaster Tools for ‘soft errors’ to see if this issue exists.

Single Page Apps and Core Web Vitals

Core Web Vitals are a new set of performance metrics defined by Google. The metrics aim to measure loading performance, speed of interactivity and visual stability of a webpage. Largest Contentful Paint, First Input Delay and Cumulative Layout Shift are what Google calls these metrics, and they each fall into a ‘Good’, ‘Needs Improvement’ or ‘Poor’ category.

These new metrics will become a ranking signal in May 2021. So they are now an important consideration for SEO. If your webpages perform poorly with these new metrics, you may see your website rank poorly in search results.

First Input Delay (FID) presents a problem for single page apps. It measures the time it takes for a user’s input – a button click for example – to be handled by the website. If your webpage’s first input delay is greater than 100ms, it could be because the browser is busy doing something else.

For single page apps, this is often due to the browser parsing a large bundle of Javascript when the page first loads. It is not unusual for such an app to serve up a very large amount of Javascript, required to render the whole website. One solution to this problem is code splitting, which splits your single page app into multiple Javascript bundles – so there is less Javascript to parse and execute on the first page load.