node.js - Angular2 SEO - How to make an angular 2 app crawlable

Question

I am building an Angular 2 app using the Angular-Meteor framework.

I would like to achieve fast and consistent indexing by google and other search engines, and allow Facebook sharer and other scrapers to generate previews of my JS-generated content.

Usually SPAs use the PhantomJS to render the page server-side and send the static HTML to the client.

Of course I can spawn PhantomJS myself when I intercept an _escaped_fragment_ or when I see the google or scraper user agent, but I always experienced memory leaks and orphan Phantom instances when spawning PhantomJS directly on websites with a big traffic (I used NodeJS and this module ).

For Angular 1 apps, I used to solve this with angular modules like Angular-SEO, but it seems hard to convert such module to angular 2.

I did not find any appropriate Angular 2 module for this yet. Should I build it myself, or is there any other good way to achieve this as of today ?

Answer 1

The great thing about Angular2 is that when fired up, all content inside your root app-element goes away. This means that you can put whatever you want in there from the server which you want to be picked up by crawlers.

You can generate this content by using a server-rendered version of the content in your app, or have custom logic.

You can find some more information here: https://angularu.com/VideoSession/2015sf/angular-2-server-rendering and here: https://github.com/angular/universal