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).
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.
