Single Page Applications (SPAs) & SEO Problems

Published on: 14/05/2021 | Updated on: October 25, 2024

Single Page Applications have become immensely popular over the last three years. A Single Page Application (SPA) is effectively a website that fits on a single webpage. Websites are usually accessed with a web browser. The user would type in the web address to their browser; the browser sends a request to the server that says “send me the homepage of thiswebsite.com.” The server then sends the homepage back to the web browser, which renders it so that the user can see and interact with it.

SPAs (Single Page Applications) have significant benefits for both users and developers. Many popular websites and applications use the SPA format, including Gmail, Trello, and Moneypenny. 

If the user clicks a link or an item on a standard multiple-page website’s navigation bar, another request is sent from the user’s browser to the webserver. Again a page will be sent to the browser and rendered.

Essentially, you always get a new page when you click or request a new page or URL. The page reloads each time.

When you first come to the website with a SPA, behind the scenes, the browser downloads a javascript program. Once the program is running, you will no longer need to request or reload a webpage on the same domain. If required, the program can get new information for a new page without reloading it in the browser.

It is called “single page” because it only has to load once. This method of loading the website once should provide a much quicker and more fluid user experience.

Only one HTML page is ever downloaded; after that, all the other pages gather and render the webpages using the Javascript that was downloaded when you visited the first page of the website. With a standard website or blog, a multiple-page application, multiple pages are downloaded, and content is rendered on the server. 

In this video, from Google Search Central, the presenter states that JavaScript is used to control the page’s lifecycle.

Javascript is used to create the HTML that creates the page. It also uses JS to load other content on other pages. Developers may refer to different web pages as “views” rather than “pages.”

SPAs (Single Page Applications) are great for developers because they support ReSTful APIs, and SPAs are generally much easier to convert to a mobile-friendly website.

SEO Problems & Single Page Applications

While loading new web pages on the same website can dramatically speed up using SPAs, it can also create problems from an SEO’s perspective.

All the content and the page elements are loaded using dynamic API calls, making it tricky to perform an SEO audit on SPAs.

Using javascript allows any website to be more interactive and dynamic. However, in the past, search engines have not always been able to crawl and index javascript efficiently. Using too much JS could actually slow down a site and negatively impact search engine rankings. 

For example, it is common for developers to use code or features that may not work correctly on all web browsers and devices. Also, navigating to new pages may not cause the URL to update as it would on an HTML-based website. This would confuse Googlebot, as it would see everything as a single page, which as an SEO, we don’t want as only one page can be indexed.

There can also be problems creating unique meta titles and descriptions. If not addressed correctly, all web pages (or views) can be assigned to duplicate meta titles and descriptions.

Another common issue with SPAs is how errors and error messages are handled. For example, if an invalid URL is typed into the web browser’s address bar, a soft 404 can be created whereby the server generates a 200 status code, but the user encounters an error message. Source: https://www.paridirect.com 

Test SPAs with Google’s Tools

Use the mobile-friendly test and search console’s “Fetch as Google” to test your SPA. Using these two tests, you should be able to establish whether or not Google will completely and efficiently index your SPA site.

An excellent place to start testing your SPAs is to use the Google mobile-friendly test. This test is the easiest way to ensure that all the content is visible. You can use development stage URLs and live URLs – it gives you a screenshot of the above-the-fold content, and the test also provides a rendered HTML – the HTML that will be rendered for indexation by Google.

If the mobile-friendly test picks up all of your HTML, then that’s great – your site has effectively passed the first stage of SEO! 

If a SPA works in the mobile-friendly test, it will also work in search. 

Rendering & HTML

There is much debate around the best form of rendering for SPAs (Single Page Applications).

With server-side rendering, the HTML is prerendered on the server before it is sent to the client’s browser.

With server-side rendering, the bot crawling your SPA for indexation will receive HTML, which they crawl most efficiently.

This method requires that the server hosting your SPA has Node enabled.            

For more information on server-side rendering for SPAs, please see this Medium article by Matthias Kunnen. He opted to use server-side rendering and used headless browsers for testing, along with a Node library – Puppeteer. This library allows you to extract the HTML after a SPA has finished rendering. 

SPAs can be built using vanilla JS or frameworks such as Angular, React, or Vue. The best type of rendering can often be specific to the framework. The codelabs documentation from Google is an excellent place to learn more about rendering.

Meta Tags

Meta tags such as the meta description, the meta title, and canonical URLs should be rendered directly in the actual code of the page according to experts at SEOlutions. This direct rendering should be separate or a supplement to the rendering functionality (either pre, dynamic, or server-side rendering).

Navigation and Links

For Googlebot and Bingbot to follow and crawl the entire website, the pages must be linked with HTML, using the <a>href attribute and not the JS onclick functionality.

Views must be treated as URLs. Otherwise, search engines will see the website as one page and only index a single page.

Developers can use the history API and <a>href attribute to ensure URLs are acknowledged as individual pages and crawled as such.

Use and Update Sitemap.xml

In addition to adequately marked up internal links, an XML sitemap should be submitted to Google via Search Console to ensure that they know all of the website’s pages/views.

Status Codes

As previously mentioned, SPAs can have issues handling errors such as 404s. As the server does not do the error handling, a SPA will usually return a 200 status code, stating to Google that everything is okay, even if a page is broken or not found.

Unfortunately, status codes cannot be changed once the server has loaded the homepage or first page on the website. However, a developer can change the default status code for individual views/pages within the app. in the Google Webmasters video, Martin Splitt creating a view that serves a 404 code and a view for 500 errors.

Create SEO Friendly URLs

Ideally, your SPA should output an ID URL and a slug URL. Speaking at dotCMS’s conference in 2018, John Hartley advised that SPAs should push both these URL formats and gave the below examples:

ID URL*: http://localhost:8082/recipes/3fdc86d5-76fe-48c2-9ed9-24dba3c7c78b

Slug URL*: http://localhost:8082/recipe/fiery-chipotle

The ID URL is required so that a router can pull and establish the relevant content types and utilize them in a component. The ID URL contains the unique ID numbers that are associated with each fragment of content. 

The slug URL contains words and hyphens, which looks better, is easier to read and share. Each page or view should have a unique slug URL that returns a 200 status code.

Use Canonical URLs

As with every standard website, SPAs must make use of canonical URLs. It is a way to tell search engine bots which URLs need to be indexed and which parameters can be ignored. It is an HTML element that also helps to prevent any issues with duplicate content. According to kruschecompany.com, if you want to use the canonical URL attribute with a SPA website, you have to generate the URLs dynamically. The canonical URL must match the relevant sitemap URL.

Conclusion

SPAs (Single Page Applications) are a highly effective way to create websites that offer a great user experience. However, they offer a completely new challenge to SEOs, especially those not familiar with Javascript.