Functional

SEO for SPA application pages

SEO in Single page applications can be a challenge. This (non-technical) guide helps you understand SPA SEO challenges & how you can overcome them.

Harshita Gupta

March 11, 2021

min read

The (Non-Technical) Guide To SEO Challenges In Single-Page Applications.

Nowadays, Single-page applications (SPAs), popularized by JavaScript frameworks are taking the browsers by surprise. With SPA, the website feels much faster, the experience of scrolling through and navigating applications is smoother, and the development efforts are reduced by more than half.

But building a highly sophisticated application(s) is just not everything to do with traffic – you need to smartly market it as well. However, employing traditional SEO methods and ranking one-page websites are a tad bit tricky. SEO for SPA pages requires certain SEO techniques and special ways of working with them. Before we dive into the SEO for SPA pages, let’s quickly look at the basics of a SPA and why it is the most favored technology for web creation by developers.

What is a SPA and Why SPA?

A single-page application is a type of web application or website that works within the user’s browser to enable them to navigate through the application without reloading the page. Built using javascript-framework (such as React, Angular, or Vue.js), SPAs performs client-side rendering to dynamically download the content eliminating the need to send multiple requests to the server.

Just think of applications we use daily - Canva, Grammarly, Pinterest, Google Maps, Gmail, Trello, Figma, etc. These are some of the great examples of SPAs.

This JavaScript architecture works well when you need to provide a dynamic experience to users like in the case of most SaaS applications, social networks, and closed communities. Coming with numerous advantages, one-page applications don't just provide faster navigation, greater responsiveness, and linear user experience, but are also easy and fun to build feature-rich applications.

How to know if it’s a SPA?

At the ground level, you can tell a web app is a SPA if it does not refresh for certain actions or any calculations. Like in the case of most designing and image editing tools.
Also, there are various tools and browser plugins available to detect if the content on your website or application is javascript enabled or disabled. One such tool is WWJD where you can type the URL of your website into the console and get the results.

You could also try doing this with browser plugins, Google chrome users can use Quick JavaScript Switcher and Firefox users can use JavaScript Switch.

SEO challenges in SPA applications

While SPA is an ideal choice for developers and even users, given the merits, it often creates issues for marketers and SEO professionals. This is because, when trying to incorporate conventional SEO methods, SPAs face a host of obstacles.

JavaScript SPAs are unreliable when it comes to search engine indexing. SPAs don’t perform server-side rendering, hence take a little longer to do some heavy lifting to extract hyperlinks and render the next set of pages to access your page(s), and content they hold.

To make matters worse, conventional SEO interlinking is not possible on SPA websites. As the majority of the internal links are not included in the HTML source code, it makes the task even more difficult for search bots.

‍Search engines rank website pages, and not the website itself. So every time the information is auto-updated, the URL doesn’t change which means not all SPA pages have a unique (and search-friendly) URL address which makes it much tougher to optimize such applications as most pages can’t be indexed by bots. Also, single-page websites’ performance is more difficult to track.

SEO relies primarily on URLs, meta tags, page sessions, content & ease of web page crawling by search engines, but handling all of these things in SPAs is a lot more difficult than typical web apps.

In SPAs, with a conventional SEO approach, you may find that your page will rank for some keywords and you won't rank for others because it is unrealistic to stuff a single page with a laundry list of all keywords that you wish to rank for.

What needs to be done differently?

Since SPAs are not inherently SEO-friendly, marketers use technological SEO techniques, in particular JavaScript SEO, to help search bots index and crawl every content on the website, and thus have a higher chance of search ranking.

Googlebot and other bots, including Bing's and Yahoo's are capable of handling websites whose backend is based on HTML/CSS with lightning-fast speed. But if these bots are exposed to a javascript infrastructure, most of them fail, except Google's. However, even Google search engines can crawl the rendered content with just half-precision.

Let’s discuss some of the important optimization techniques.

Basics first -

Perform JavaScript audit for SEO to identify and fix potential problems in the website that may be affecting the ranking negatively.
Optimize each section of your page by using headings and subheadings (H1, H2, H3..), and try to write keyword-dense header tags, page titles, canonical tags, hreflang tags, meta tags and alt tags for all images. Also, make sure all these tags get rendered directly within the source code.
Make sure your main keywords are within each page’s URL slug are unique, and easy-to-read. Consider picking a domain name that has a target keyword.
Embed internal SPA links using <a> tags instead of JavaScript on click events. This helps to allow the search engine to crawl.
Create and publish an XML sitemap to Google Search Console for search engines to access all SPA pages.
Make sure your SPA can handle 404 pages well, and return a 404 header status and a 500 status for a server error if a user attempts to access a missing page.
Be sure to regularly SEO audit your website. Keep your website/ application updated time-to-time, it could be a content change, adding video, etc.
Check if the website’s post-login interface is on the same or a different subdomain. In the case of different subdomains, the tracking can break up. Read more on cross-domain tracking here.

Optimization techniques for SPA (that may involve developers):

Implement server-side rendering(SSR) to render a normally client-side only SPA on the server and then sending a fully rendered page to the client making the process enable crawlers to access site’s content, even if it is unable to execute the JavaScript code. Here’s a descriptive article to guide you through.
As discussed before, not all search engines can process SPAs fast and as intended, Dynamic rendering and Pre-rendering solutions are other viable workaround solutions to deal with these issues.
Isomorphic JavaScript sometimes referred to as Universal JavaScript is considered to solve the SEO issues as it eliminates execution and rendering of the JavaScript in the indexer.
‍Headless Chrome is another alternative recently suggested as an easy-to-use solution by a Google developer, who also cites another solution called Preact that ships with server-side rendering.
Create static sites with the help of tools like VuePress to dynamically generate a static HTML page, without compromising with the benefits that the SPA has to offer.
Implement Hash-bang tags, using '#!' in a URL (like- http://example.com/#!/users). However, this is not by World Wide Web Consortium (W3C) standards, as it doesn’t truly mark the path to a real resource location, but works well to solve the crawling issue in AJAX pages.

Note: Don't forget to share this information with your technical team.

Frequently Asked Questions

Q: Is Single-page Applications (SPA) SEO-friendly?

‍A: Single-page Applications (SPA) are generally known as non-SEO friendly websites because they are hard to crawl and a bit difficult to render content by Googlebot.

Q. Can SPAs be built on CMS?

A: CMS and SPAs are difficult to pair, as these SPAs are apps that require development work to tinker with the display and delivery of the experience, the marketers need to go back to traditional methods and call for development assistance for any tweak-inducing unavoidable bottlenecks. However, with advanced CMS like Bloomreach, this is also made possible.

Q: Is Vue.js SEO-friendly?

A: Generally, Vue.js websites are not regarded as SEO-friendly as they have many underlying issues in them including page load speed, meta, sitemap, hash URL updates, and more others.

Q: Is React better than Vue for SEO?

‍A: Neither Vue nor React is SEO friendly by nature, however, there are certain practices you can use in both to make them SEO friendly.

Q. How does Google index sites based on JavaScript?

A: Google bots are capable of indexing any website whether it is JavaScript-based or not. Google announced the support of JavaScript for their bots on Webmaster Central Blog in May 2015, deprecated the Ajax crawling scheme one year later, and announced it would be abandoned in July 2018. However, without any particular solution, it usually takes days or weeks to index the dynamic content produced with JavaScript. To circumvent this limitation, it is now recommended to implement the Dynamic Rendering recommendation which supersedes the old Ajax crawling scheme specification.

We have compiled a list of step-by-step guide so you can make your JS-powered applications/websites (irrespective of the framework you use) SEO-friendly: