SEO with Angular – Angular Universal

Due to Structure of Angular framework, crawlers can not read meta tags in HTML. For this problems, developers have came across a new kind of angular called “Universal Angular”.

A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions.

Angular Universal generates static application pages on the server through a process called server-side rendering (SSR).

It can generate and serve those pages in response to requests from browsers. It can also pre-generate pages as HTML files that you serve later.

<b>Why Universal </b>

There are three main reasons to create a Universal version of your app.
<ol>
<li>Facilitate web crawlers (SEO)</li>
<li>Improve performance on mobile and low-powered devices</li>
<li>Show the first page quickly</li>
</ol>

<b>How it works</b>

To make a Universal app, you install the platform-server package. The platform-server package has server implementations of the DOM, XMLHttpRequest, and other low-level features that do not rely on a browser.

You compile the client application with the platform-server module instead of the platform-browser module. and run the resulting Universal app on a web server.

The server (a Node Express server in this guide’s example) passes client requests for application pages to Universal’s renderModuleFactory function.

The renderModuleFactory function takes as inputs a template HTML page (usually index.html), an Angular module containing components, and a route that determines which components to display.

The route comes from the client’s request to the server. Each request results in the appropriate view for the requested route.

The renderModuleFactory renders that view within the <app> tag of the template, creating a finished HTML page for the client.

Finally, the server returns the rendered page to the client.

For further details and code, visit : https://universal.angular.io/