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
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
Thanks for sharing. Great post very Informative, also checkout Spa Treats By Jas
ReplyDeleteNice
ReplyDelete