SPA SEO – How to create SEO-Friendly Single Page App Website
This article will be useful for SEO specialists and site owners who want to switch to Single Page Application, but do not dare, because SPA can "quarrel" with the search engines.
What is SPA (Single-Page Application)?
Let's see in more detail how content is loaded and rendered on SPA-sites:
- The user requests HTML content from the site.
- The application determines on which page the user is and what content he needs to display.
- With the help of AJAX the user gets the required content: CSS, JS, HTML, and text content.
- When browsing the site, the whole page is not refreshed, but only the necessary content.
Pros of SPA-sites:
- high speed of operation;
- rapid development;
- The creation of versions for different platforms based on ready-made code (desktop and mobile applications).
Cons of SPA-sites:
- SPA-sites do not work without JS enabled in the browser;
- they cannot be analyzed for errors by popular programs and tools (e.g. Netpeak Spider).
Which search engines can index SPA sites?
Nowadays, only the Google search robot knows how to render the content of SPA sites, as it uses Chrome 41-based tools for rendering. ASK.com uses Google output. Other search engines require content in HTML code.
How to optimize SPA?
Google robot can index Single Page Application if the site structure complies with certain rules. For Google, it is necessary to use only the correct URL format.
You can not block indexing of JS and CSS files for Google search robots. By restricting their indexing, Google will not be able to index the contents of SPA sites.
There are two ways to "force" search robots to index AJAX pages:
- Use "? _escaped_fragment_=".
- Return the HTML copy to the robot by identifying it by user-agent.
Using "? _escaped_fragment_="
This method involves generating HTML copies of pages (snapshots) by a separate URL using the "?_escaped_fragment_" parameter.
Using URLs with "#!"
If AJAX pages are formed with "#" (hash), then you need to replace it with "#!" (hashbang). For example, from https://example.com/#url to https://example.com/#!url. Google will scan the content at the main URL.
Examples of addresses with "#!" and HTML copies of pages:
- https://example.com/home#!page → https://example.com/home?_escaped_fragment_=page;
- https://example.com/index/#!main → https://example.com/index/?_escaped_fragment_=main;
- https://example.com/#!home/index → https://example.com/?_escaped_fragment_=home/index.
Use of "traditional" URLs
If the site uses "traditional" URLs (https://example.com/url), you must include a meta tag on all pages:
<meta name="fragment" content="!">
Google will scan the content at the main URL.
For popular frameworks, there are ready-made solutions that replace "#!" with "traditional" URLs, such as HTML5 mode for Angular.
(!) Meta-tag should not be placed in HTML-copies of the document: in this case the page will not be indexed.
(!) On pages of HTML-copies canonical should either be absent or lead to itself.
For example, on the page https://example.com/home?_escaped_fragment_= the following canonical should be added:
<link rel="canonical" href="https://example.com/home?_escaped_fragment_=" />
Return HTML copies of the page at the main URL
This method is suitable for SPAs with "traditional" URLs. It means that when a search robot requests a page through the main URL, it gets an HTML copy of the page instead of a dynamic version. You can identify the search robot by User-Agent.
In order to allow search engines to index the content, it is necessary to implement the creation of HTML-copies of pages.
HTML-copies are rendered versions of SPA-site pages. For example, the content of the source code of the SPA-site page looks like this:
And here is the rendered HTML copy of this page:
<html lang="ru"><head> <title>TITLE of the page</title> <meta name="keywords" content="keywords"> <meta name="description" content="Description of the page"> <meta name="viewport" content="width=device-width,maximum-scale=1,initial-scale=1,user-scalable=0,shrink-to-fit=no"> <link rel="canonical" href="https://site.com/"> <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon"> <meta name="robots" content="index, follow"> <link rel="stylesheet" type="text/css" media="screen" href="/style.css"></head><body> <div>PAGE CONTENT</div></body></html>
To create HTML copies of pages, you can:
- Use rendering on your own servers.
- Use outsourced rendering.
There are many off-the-shelf solutions for HTML copy rendering, so if you use a popular framework (such as Angular), it should only take a few developer hours to implement HTML copy pages.
Rendering on your own servers
It is suitable for large projects. You can use the following tools to render HTML copies on your servers:
Suitable for small projects. For HTML rendering on outsourced servers, you can use these tools:
This approach to site development allows to solve two problems at once: the site receives all the benefits of SPA-site and the ability to be promoted in the search engines without additional implementations.
404 pages processing
Page rendering on SPA-sites occurs on the client-side, so without any additional modifications, the response code of the non-existent page will be 200 OK.
Optimized Single-Page Application must correctly process non-existent pages and give 404 error as a page header.
Setting up Google Analytics
The standard Universal Analytics code is executed when every new page is loaded, while SPAs load content dynamically by "simulating" switching between pages. For Google Analytics to process page transitions correctly, you need to make sure that the Universal Analytics counter is activated each time the site's URL changes.
You can set up Google Analytics for SPA sites using Tag Manager and the "History" trigger, or - by passing the data manually.
Using Tag Manager and "History" Trigger
Using HTML5 History API on SPA sites allows you to set up the correct work of Google Analytics counter in GTM with the help of "History" trigger. Every time you update the history (URL, Title change), the Google Analytics tag will be reactivated.
Manually transmitting data
Each time you change the URL in your browser bar, you need to pass information about it to Google Analytics.
To update the counter, you need to use the command "set" and specify the new value of the variable "page":
ga('set', 'page', '/new-page.html');
Now all future requests will be bound to the new URL. To send pageview information, you need to use the "send" command and specify the "pageview" value immediately after the counter is updated:
For more information, see the Google Analytics help for single page application measurement.
SPAs are the present and the future, so do not be afraid to take on such projects. Single Page Application can be "friendly" with search engines. To make SEO-Friendly SPA, I recommend:
- Use "traditional" URLs.
- Use isomorphic applications or rendering of HTML copies.
- Configure the correct response to the "404 Not Found" header.
- Configure Google Analytics to work correctly.
Are single-page applications SEO-friendly?
Yes, single-page applications can be SEO-friendly. However, developers need to be experienced and skilled enough to structure and build a SPA with SEO. The correct rendering type for the app needs to be chosen, and additional tools should be used to treat metadata and URLs correctly.
How does Google crawl single-page applications?
Are single-page applications the future?
It's hard to say definitively whether single-page applications are the future. However, SPAs have become increasingly popular in recent years due to their many advantages. For one, they tend to be much faster and more responsive than traditional web applications because they don't have to reload the page every time a user takes an action. This can make for a much more user-friendly experience. Additionally, single-page applications can be easier to develop and deploy since there's only one page to worry about.
Traffic Cannibalization in ASO and Apple Search Ads
What is traffic cannibalization and why is it needed?
Performance Max Campaign Optimization: 10 Steps to Maximize Efficiency
A deep dive into Performance Max Campaign: when to use it, how to set it up, and how to get the most out of it.
App Store Promotional In-App Purchases - How to Boost and Optimize Promoted In-App Purchases
What are In-app purchases, and how to promote and optimize them