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

SEO friendly angular SPA application with angular universal SSR  

Prashant Surya  |   Nov 20, 2019  |  Views: 1013

Description:


A guide for implementing angular universal SSR in angular SPA application for making SEO friendly.

Angular is trending now a days for Single page applications (SPA). 

Application built in angular have fast loading performance, easy to maintain large application due to typescript and class based programming.

SPA application doesn't reloads page on routing change.

This has a drawback of not able to update meta tags and open graphs of the page as per current route.

If you are making a website for social sharing / article based or eCommerce then your first priority would be SEO friendly.

Angular comes with an option for Server Side Rendering technique, to overcome this issue called Angular Universal.


Angular Universal:

In this technique, we create a proxy layer for rendering the html content before rendering to the browser.

For this we need server side nodejs hosting which will help in SSR.


Benefits:

It will helps social media crawlers to get open graph tags.
It will help to show the real html contents to the crawlers, so that they can extract links or content from page.
It improves the performance on mobile as well as on web.


Its a little bit difficult to implement angular universal in the existing large size application, you may have to change the npm libraries.

For complete Implementation and deep information read Angular Universal Reference


SSR only does the pre rendering of the angular application before rendering on browser.

But the SEO will mainly work by defining the correct meta tags needs to be done for individual route/file.


What to do after implementing SSR (Angular Universal):


All should be different for each routes

Update title
Update Description
Update Keywords
Update og:title
Update og:type
Update og:url
Update og:image
Update og:site_name
Update twitter:title
Update twitter:card
Update twitter:image
Update twitter:description
Update twitter:site
Update twitter:image:alt


After doing these efforts , you application will become SEO friendely and highly scalable.









Comments:
Content Contributor
Prashant Surya

Prashant Surya

Software developer at Uniserve Data Technologies Pvt. Ltd.  |   Noida, Uttar Pradesh, India

I am a software developer, freelancer and trainer working on technologies likes. MEAN stack, MERN Stack, ASP.NET full stack, WebRTC, socket.io ,PWA, SQL, JavaScript, jQuery, HTML, CSS, SEO, responsive UI/UX designing... having 7 years of experience in development in multiple domains like, eCommerce, RTA, capital markets, education, real estate...


Read related articles

how to convert html to image in angular

Prashant Surya  |   Feb 12, 2020  |  Views: 3202

Copy to clipboard in angular

Prashant Surya  |   Jan 14, 2020  |  Views: 1035

How to use require() in angular typescript file

Prashant Surya  |   Jan 9, 2020  |  Views: 1419

Angular demo book - DritalConnect Suggestions

Prashant Surya  |   Dec 23, 2019  |  Views: 939

Angular 8 reactive Form with validation

Prashant Surya  |   Dec 23, 2019  |  Views: 1154

What's new feature in Angular 9

Prashant Surya  |   Dec 18, 2019  |  Views: 983

Home loan EMI calculator in Angular

Prashant Surya  |   Dec 17, 2019  |  Views: 2544

How to initialize an interface in typescript

Prashant Surya  |   Dec 13, 2019  |  Views: 1534

How to add google adsense in angular universal

Prashant Surya  |   Dec 2, 2019  |  Views: 2182

How to use localstorage in angular universal ssr

Prashant Surya  |   Nov 28, 2019  |  Views: 3084

How to manage multiple async calls in angular

Prashant Surya  |   Nov 27, 2019  |  Views: 1143

Angular tutorial - DritalConnect

Prashant Surya  |   Nov 20, 2019  |  Views: 928

How to import a javascript file in angular

Pooja Goel  |   Nov 15, 2019  |  Views: 1079

Topics to learn in Angular | Angular Tutorial

Prashant Surya  |   Sep 25, 2019  |  Views: 1179

Difference between Angular and React js

Abhishek Roy  |   Sep 25, 2019  |  Views: 1066

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