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?
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.
Important SEO Considerations for Single Page Apps
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.
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.