Showing posts with label SPA. Show all posts
Showing posts with label SPA. Show all posts

Monday 8 April 2019

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 java script code which 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 dont take care of SEO from beginning, we may have to put extra efforts 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 this search engines are one of the major task 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 engines 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 about SEO technology.

Why SPA is not readily SEO Friendly?

The advantage of SPA is, they can even update entire pages or part 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 expects 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 usecase too.

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

Canonical URL's: 
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 options for the SPA pages.

What are all the new features of AEM 6.5?

Below given the further details about new features.
AEM 6.5 Site related new features

AEM 6.5 Specific new features in Assets section

New Features in AEM 6.5 Forms

Foundation updates in AEM 6.5 which a developer should be aware of

Cloud Manager for AEM 6.5 New features

Monday 26 November 2018

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

While working with AEM, we should know about all relevant technologies in the market. SPA and PWA are such ones. AEM already supports SPA OOTB. Let us understand about them more.


SPA are the applications having single page and the content gets updated within the page dynamically based on user interaction. Commonly used technologies to develop SPAs are AngularJS, Ember.js, Knockout.js, Meteor.js, ExtJS, Vue.js and React .

Eg: Gmail

SPA Features:
1. Responsive
2. Fast and efficient.
3. Not served through app store.
4. No extra queries to the server to download pages
5. User friendly.


This is an application behave like a native application and developed using modern web technologies. This application supports offline features(using service worker & Web App Manifest) when no internet connection and are extremely fast & engaging.

PWA is an idea proposed by Google developers.

What is a Service Worker?
They are scripts that stand between your web application and your network

What is a Web App Manifest?

Web App Manifest is a JSON file with meta-information about the site.

Angular, React , Vue

PWA Features:

1. Responsive

2. Push Notification.

3. Offline Support.

4. Fast and efficient.

5. Not served through app store.

6. relatively cheaper than developing native apps

7. Does not require installation

  • An SPA can be a PWA, but a PWA does not have to be a SPA.

Progressive Web Apps are the next level of browser based applications, offer a rich user experience that parallels what users know and expect from native apps and combine that with the benefits that browser based applications provide.

  • Progressive Web Apps are not Single Page Apps

- PWA's Register a Service Worker with a Fetch Event Handler and Minimal Offline Support
- PWA's Have a Valid Web Manifest File with a Minimal Set of Icons
- PWA's Served using HTTPS (Secure)

Read More:

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

AEM Experience Fragments vs Content Fragments

Single Page Applications and AEM

Watch below video to understand more on SPA Vs PWA