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.
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.