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 e

Answer 1

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.

    
    
    
    ...

Support for server-side rendering is in progress.