SEO tips for single page apps

Google’s Martin Splitt shared what SEOs should check when working with single-page apps. In his latest Google Lightning Talks video, Martin Splitt shares SEO tips for single-page apps to make them discoverable by search engines.

The main difference between an HTML-based website and a single-page application is the dependency of the latter on JavaScript. JavaScript is used to generate HTML for a single page application that renders the page.

When users navigate to different parts of a single-page application, JavaScript is required to load the content on the page they go to. When JavaScript loads new content, it’s called a “view”. Relying on JavaScript for single-page applications allows browsers to load views without a full reload.

JavaScript also allows for design elements such as custom transitions between different parts of the application. Simply put, JavaScript makes single-page applications work as they should.

Text Content

Challenges of working with single-page applications
Google’s SEO tips for single-page apps

Titles and Descriptions
Dealing with Errors
Challenges of working with single-page applications

JavaScript is not ideal for search engines when it comes to crawling and indexing. As SEO experts well know, even a decent amount of JavaScript on a page poses some challenges. The difficulty level goes up a notch when all content is tied to a JavaScript layer. This is exactly the case in single-page applications.

So what will SEO experts do to get a one-page app indexed and ranked in the search engine?

Google’s SEO tips for single-page apps

Martin Splitt offers four key SEO tips for single-page apps:

Include all code paths
Treat views as URLs
Optimize titles and descriptions for each view
Improve the way the app handles errors

Here is a brief summary of the key points Splitt mentioned.

Titles and Descriptions

There is nothing more fundamental to SEO than optimizing the titles and descriptions of web pages. However, it’s often overlooked when it comes to optimizing “looks” for single-page apps.

This results in all views having the same title and description, and you’re probably aware of the problems this can cause.

Each view should have its own unique title and description. Splitt, this can be accomplished by adding “a little bit of extra JavaScript”.

Dealing with Errors

Another common issue is the way single-page apps deal with error scenarios such as invalid URLs. Splitt gave an example of a single page application that displayed an error message while the server displayed an HTTP 200 status code and explained the situation. Ideally, if there is an error while displaying the content, the server should return a status code stating that everything is fine. This is not an option for single-page applications because the server does not do error handling.

A server always returns an HTTP 200 status code for single-page applications. Executing the code or displaying an error is JavaScript and browser dependent. This should be fixed as HTTP status codes help Googlebot and crawlers decide how to deal with the error response.

There is no simple fix for this as HTTP status codes cannot be changed after the server loads a single page application. What you can do is change the default status code for individual views in a single page application.

That’s why Splitt has a view that presents a 404 code, a view that offers 500 codes, and so on. Suggests its creation. The JavaScript can then be edited to redirect browsers to the appropriate view when an error is encountered in the code.

You can watch the video to learn more about any of these recommendations.