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