Npm

Jul 2016

SEO in Angular with ng2-meta

Updating meta tags such as title and description as the route changes is essential for SEO in any single page application. While building Nomad Couple, an Angular2 site, I realized that there weren’t any Angular2 meta-tags libraries, so I decided to build one. I’ve released it as ng2-meta on npm.

ng2-meta listens to router changes and updates <meta> tags with the values provided in the route’s configuration.

To get started, install ng2-meta

npm install --save ng2-meta

Add a data object to each of your routes and define meta tags (title, description, url etc) relevant to the route.

const routes: RouterConfig = [
  {
    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'
      }
    }
  }
];

Inject Angular2’s Title service as well as ng2-meta’s MetaService into your app. ng2-meta uses the Title service internally to automatically change the page title when the title meta tag is updated.

import { Title } from '@angular/platform-browser';
import { MetaService } from 'ng2-meta';
...
bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ...
  Title,
  MetaService
]);

Add MetaService as a provider to your root component

import { MetaService } from 'ng2-meta';

@Component({
  ...
  providers: [MetaService]
})

If you’d like to update the page title and meta tags from a component or service, say, after receiving data from a HTTP call, you can use MetaService.

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);
  }
}

It’s a good idea to add some fallback meta tags for use by crawlers that don’t execute Javascript, like Facebook and Twitter.

<html>
 <head>
  <meta name="title" content="Website Name">
  <meta name="og:title" content="Website Name">
  <meta name="description" content="General site description">
  <meta name="og:description" content="General site description">
  <meta name="og:image" content="http://abc.com/general-image.png">
 </head>
</html>

The fallback meta tags are used to generate the rich snippet shown when your website is shared on Facebook (Just make sure to add Open graph meta tags). Nomad Couple - Facebook share rich snippet

Check out Nomad Couple as a demo of ng2-meta. Its source code is available here.

I’m currently investigating server-side rendering using angular/universal and plan to update ng2-meta to support it.