Best Online Tutorials

SQL Tutorial

Free SQL Tutorial

SQL Interview Questions

SQL Practice Questions

SQL Tips & Tricks

SQL Errors

SQL Books

Angular Tutorial

Free Angular Tutorial

Angular Interview Questions

Angular Practice Questions

Angular Tips & Tricks

Angular Errors

Angular Books

Node.js Tutorial

Free Node.js Tutorial

Node.js Interview Questions

Node.js Practice Questions

Node.js Tips & Tricks

Node.js Errors

Node.js Books

React.js Tutorial

Free React.js Tutorial

React.js Interview Questions

React.js Practice Questions

React.js Tips & Tricks

React.js Errors

React.js Books

SSIS Tutorial

Free SSIS Tutorial

SSIS Interview Questions

SSIS Practice Questions

SSIS Tips & Tricks

SSIS Errors

SSIS Books

SEO Tutorial

Free SEO Tutorial

SEO Interview Questions

SEO Practice Questions

SEO Tips & Tricks

SEO Errors

SEO Books

Javascript Tutorial

Free Javascript Tutorial

Javascript Interview Questions

Javascript Practice Questions

Javascript Tips & Tricks

Javascript Errors

Javascript Books

MongoDB Tutorial

Free MongoDB Tutorial

MongoDB Interview Questions

MongoDB Practice Questions

MongoDB Tips & Tricks

MongoDB Errors

MongoDB Books

Next.js Tutorial

Free Next.js Tutorial

Next.js Interview Questions

Next.js Practice Questions

Next.js Tips & Tricks

Next.js Errors

Next.js Books

How to make SPA Angular Application SEO or SMO friendly 

Pooja Goel  |   Sep 10, 2019  |  Views: 1093
pictures

Description:

Angular is a JavaScript framework which is used for making (SPA) single page applications. SPA has a lots of advantages over the others, but the first and most is its content rendering without page reload which saves loading time and memory. But there are some drawbacks also, like it is not  SEO or SMO friendly or say it does not helps in SEO or SMO.

When we share any url of SPA on any social media, we see that the meta tags are not updated accordingly to the current route.

Google or Facebook crawlers, when crawling looks for SEO keywords or meta tags on the page, but in the SPA using angular does not provides that much information by itself. So in that case our SPA doesn't get crawled and the traffic on the website doesn't grows as compared to others.


As angular SPA have other benefits, like AOT, Lazy loading etc., but it does not helps in getting page rank in google search also not be helpful in getting in top positions.

If you are making a website for eCommerce/ blogs/ tutorials/ real Estate you need a website which is a SEO and SMO friendly.

Then what is the solution, and how can we make our SPA SEO friendly? 

I am suggesting some steps that you should follow while making any eCommerce/ blogs/ tutorials/ real Estate applications. 


Update meta tags dynamically:

Angular exposes Meta and Title services, which helps in updating the meta properties. You can also add new meta properties on run. By doing this , when the child-component loads, it automatically updates the parent page meta tags.


Implementing SSR: 

What is SSR?   

 SSR is Server Side Rendering, a concept which renders the requested url and returns html as response to the browser, for that we need a service or proxy layer which will do the same for us.

There are two option to do same

1. By Installing Prerender.io on the hosting server
2. By creating a proxy service with the help of Angular Universal 


Install prerender.io on your hosting server

Prerender.io is a proxy service which internally render the SPA pages and serves their html dom to the browser. 

Why its necessary to do so? It helps the social media crawlers to get the expected meta tag values as per the route/URL shared.

Prerender.io are free up to for some pages, after that you have to pay for pages.



Implementing Angular universal - An Alternate to prerender.io: 

Its not easy to convert the existing angular SPA application to the angular universal or also not easy to host that service. My suggestion is to implement angular universal at the time of the starting of the project development, so that it will be easy to manage versions which angular universal supports.

But if you wants to implement angular Universal in the existing application , you have to install universal toolkit. (@ng-toolkit/universal - npm)

It automatically does all the changes in the existing file and add new files for creating a server layer.

It comes with some commands, which builds two dist folder one for dist-browser and another dist-server. Dist-server contains the server file, which should run on a port like a service. While Dist-browser contains the files which needs to be rendered by the server when any request arrived to the server.


Sample Application :

Sample application with angular universal's source code is available on github, which could be a great help. ( https://github.com/Angular-RU/angular-universal-starter )


Reference articles to follow:








Hope this article will help to get a basic idea about SSR and how to make SPA applications SEO / SMO friendly. 




About the author:  He is  a MEAN stack expert / SEO Expert / Solution Architect / ASP.NET full stack developer / JavaScript developer / Trainer / Blogger / Software Consultant, having working experience in eCommerce/ blogs/ tutorials/ real Estate domains. Anyone can reach to author on his personal email: prashant.kr.surya@gmail.com 


Comments:
Content Contributor
Pooja Goel

Pooja Goel

Sr. Software developer at Damco Solutions Pvt. Ltd.  |   Noida, Uttar Pradesh, India

I am a sr. software developer working on technologies like SQL, SSIS, SSRS, DB2,Tableau, ASP.NET having 7 years of experience.


Read related articles

how to convert html to image in angular

Prashant Surya  |   Feb 12, 2020  |  Views: 3123

Copy to clipboard in angular

Prashant Surya  |   Jan 14, 2020  |  Views: 993

How to use require() in angular typescript file

Prashant Surya  |   Jan 9, 2020  |  Views: 1358

Angular demo book - DritalConnect Suggestions

Prashant Surya  |   Dec 23, 2019  |  Views: 907

Angular 8 reactive Form with validation

Prashant Surya  |   Dec 23, 2019  |  Views: 1124

What's new feature in Angular 9

Prashant Surya  |   Dec 18, 2019  |  Views: 951

Home loan EMI calculator in Angular

Prashant Surya  |   Dec 17, 2019  |  Views: 2497

How to initialize an interface in typescript

Prashant Surya  |   Dec 13, 2019  |  Views: 1482

How to add google adsense in angular universal

Prashant Surya  |   Dec 2, 2019  |  Views: 2101

How to use localstorage in angular universal ssr

Prashant Surya  |   Nov 28, 2019  |  Views: 3008

How to manage multiple async calls in angular

Prashant Surya  |   Nov 27, 2019  |  Views: 1110

Angular tutorial - DritalConnect

Prashant Surya  |   Nov 20, 2019  |  Views: 896

How to import a javascript file in angular

Pooja Goel  |   Nov 15, 2019  |  Views: 1040

Topics to learn in Angular | Angular Tutorial

Prashant Surya  |   Sep 25, 2019  |  Views: 1144

Difference between Angular and React js

Abhishek Roy  |   Sep 25, 2019  |  Views: 1024

Want to sell your software ?-

If you want to sell your readymade software to the genuine clients or businessman, list your software with details and demo links.

  • Sell ERP
  • Sell Website Clones
  • Sell App Clones
  • Sell Readymade Portals
  • Sell Readymade Websites
  • Sell Mobile Apps
  • Sell Window Apps

Clients will find it using our advanced search filter and will contact you directly.

No any charge for the product lsiting.

Do you own a Company ?+

Property.sale

Buy or Sell Commercial Property+

Are you a freelancer ?+

Looking for a job ?+

Are you a Service Provider ?+

Are you a blogger ?+

Do you own an IT Institute ?+



Property.sale