ng2-ui-router-meta
Update HTML meta tags for title, description and others automatically based on the state in your Angular2 app width ui-router.
This is an Angular2 SEO/meta tags module. For the Angular 1.x module, check out ngMeta
Getting started
Install
To install this library, run:
$ npm install ng2-ui-router-meta --save
ng2-ui-router-meta works with angular 4.0.0 and ui-router 1.0.0 or higher.
Modify views
Add meta tags to states. By default, title
and description
values are duplicated for og:title
and og:description
, so there's no need to add them separately.
const forgotPassState = {
parent: 'app',
name: 'forgot-pass',
url: '/forgot-pass',
data:{
meta:{
title:'Password reset',
description:'Reset password via email.'
}
},
component: ForgotPassComponent
}
Import MetaModule
...
import { MetaModule } from 'ng2-ui-router-meta';
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(routes),
MetaModule.forRoot()
],
bootstrap: [AppComponent]
})
Update AppComponent
import { MetaService } from 'ng2-ui-router-meta';
@Component({
...
})
export class AppComponent {
constructor(private metaService: MetaService) {}
}
You're all set! ng2-ui-router-meta will update the meta tags whenever the route changes.
Options
Set defaults
Set default values for tags. These values are used when routes without meta: {}
information are encountered.
; ;
Change meta tags programmatically
;
Define fallback meta content in HTML
While Google executes Javascript and extracts meta tags set by ng2-meta, many bots (like Facebook and Twitter) do not execute Javascript. Consider defining fallback meta tags in your HTML for such bots. The fallback content is overridden by ng2-meta in Javascript-enabled environments.
Development
To generate all *.js
, *.js.map
and *.d.ts
files:
$ npm run build
To lint all *.ts
files:
$ npm run lint