Angular2 SEO - How to make an angular 2 app crawlable

node.js seo phantomjs angular angular2-meteor

25,350

Solution 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

Solution 2

I just created ng2-meta, an Angular2 module that can change meta tags based on the current route.


const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    data: {
      meta: {
        title: 'Home page',
        description: 'Description of the home page'
      }
    }
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {
      meta: {
        title: 'Dashboard',
        description: 'Description of the dashboard page',
        'og:image': 'http://example.com/dashboard-image.png'
      }
    }
  }
];

You can update meta tags from components, services etc as well.


class ProductComponent {
  ...
  constructor(private metaService: MetaService) {}

  ngOnInit() {
    this.product = //HTTP GET for product in catalogue
    metaService.setTitle('Product page for '+this.product.name);
    metaService.setTag('og:image',this.product.imageURL);
  }
}

While this caters to Javascript-enabled crawlers (like Google), you can set fallback meta tags for non-Javascript crawlers like Facebook and Twitter.

<head>
    <meta name="title" content="Website Name">
    <meta name="og:title" content="Website Name">
    <meta name="og:image" content="http://example.com/fallback-image.png">
    ...
</head>

Support for server-side rendering is in progress.

25,350

Author by

Rayjax

Updated on January 04, 2020

Comments

Rayjax over 4 years

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 ?