Dynamic meta tags and SEO in Angular2
0 people use it


Update HTML meta tags for title, description and others automatically based on the route in your Angular2 app.

Getting started


To install this library, run:

Modify routes

Add meta tags to routes. By default, title and description values are duplicated for og:title and og:description, so there's no need to add them separately. import { MetaService } from 'ng2-meta'; 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': '' } } } ];

Inject MetaService

Update AppComponent

You're all set! ng2-meta will update the meta tags whenever the route changes.


Set defaults

Set default values for tags. These values are used when routes without meta: {} information are encountered. ```typescript import { MetaConfig, MetaService } from 'ng2-meta';

let metaConfig = new MetaConfig({ //Append a title suffix such as a site name to all titles //Defaults to false useTitleSuffix: true, defaults: { title: 'Default title for pages without meta in their route', titleSuffix: ' | Site Name', 'og:image': '', 'any other': 'arbitrary tag can be used' } });

bootstrap(AppComponent, [ HTTP_PROVIDERS, ..., Title, provide('meta.config', {useValue: metaConfig}), MetaService ]);

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. html <html> <head> <meta name="title" content="Website Name"> <meta name="og:title" content="Website Name"> <meta name="description" content="General description of your site"> <meta name="og:description" content="General description of your site"> <meta name="og:image" content=""> </head> </html>


I'm using angular-cli. How can I add ng2-meta?

After installing ng2-meta from npm, modify your angular-cli-build.js javascript vendorNpmFiles: [ .... 'ng2-meta/dist/meta.service.js' ]

Modify system-config.ts ```typescript const map: any = { 'ng2-meta': 'vendor/ng2-meta/dist/meta.service.js' }

/** User packages configuration. */ const packages: any = { 'ng2-meta': { format: 'cjs' } } ```


To generate all *.js, * and *.d.ts files:

To lint all *.ts files:


MIT © Vinay Gopinath

comments powered by Disqus
This page was last updated about 2 years ago.