Making SPA's(Single Page Applications) SEO(Search Engine Optimized) Friendly in AEM

AEM now supports SPA SDKs which helps to create Single Page Applications using Angular and React JS. A Single Page Application is a javascript code that injects new content from a server into a page without the entire page getting reloaded in the browser. This gives the advantage of faster loading websites.

If we don't take care of SEO from the beginning, we may have to put extra effort to go back and fix the indexing issues later.

Why indexing required?
User comes to the site through various search engines and indexing site pages with these search engines are one of the major tasks during project implementation.

What is SEO?
Search Engine Optimization is the way which the search engine find the content in a website and index it. We need to ensure our site pages are SEO friendly by following SEO Guidelines. Every search engine like Google, Bing, Yahoo, DuckDuckGo having their own bots to crawl the site content.

This post is written considering the users are having a basic understanding of SEO technology.

Why the SPA is not readily SEO Friendly?
The advantage of SPA is, they can even update entire pages or parts of the page without making another request to the server or even changing the URL. In this case, an entire HTML is not getting rendered. AJAX calls are used to load parts of the page using JSON snippets. SEO experts a fully built page for indexing.

Methods to make SPA s SEO Friendly
Below given some of the methods identified to make SPA pages SEO friendly. This solely depends on the use case too.

Pretty URLs: Never use 'hashes' in URLs. Always go for SEO friendly pretty URL instead.

Canonical URLs: Here a complete duplicate site would be created within the same url to ensure that crawlers would index the site pages properly.

Pre-rendering: In this scenario, we can run the app before deploying it, capture the page output and replace all HTML files with the captured output. Typically this is achieved with a headless browser (For e.g. Firefox Headless Mode, PhantomJS etc). Pre-rendering is a good choice because there is no additional server load, and therefore faster and cheaper than server-side rendering.

Server-Side Rendering (SSR): In this case, pages that display constantly changing data which must be loaded dynamically at load time, or for pages that have user-specific content. Note here, Server hosting the website should have Node enabled to implement server-side rendering.

HTML pushState: HTML 5 provides a History API called 'Push State'. The pushState method takes three arguments, a data 'state' object, a 'title' string, and a 'url'. When the pushState method is called, the url which is passed to it will appear in the browsers url window. This method can be used as an alternate indexing option for the SPA pages.