ngx-metadatadeprecated

Dynamic meta tags and SEO in Angular 2/4

Usage no npm install needed!

<script type="module">
  import ngxMetadata from 'https://cdn.skypack.dev/ngx-metadata';
</script>

README

ngx-meta

Join the chat at https://gitter.im/ngx-meta/Lobby

Update HTML meta tags for title, description and others automatically based on the route in your Angular 2/4 app.

This is an Angular 2/4 SEO/meta tags module. For the Angular 1.x module, check out ngMeta

Getting started

Install

To install this library, run:

$ npm install ngx-metadata --save

Note: If you're seeing errors about "duplicate identifiers", please install ngx-meta directly from GitHub until #13 is resolved.

npm install --save feedsbrain/ngx-metadata

ngx-metadata works with angular 2 4.0.0 and @angular/router 4.0.0 or higher.

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.


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'
      }
    }
  }
];

Import MetaModule


...
import { MetaModule } from 'ngx-meta';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(routes),
    MetaModule.forRoot()
  ],
  bootstrap: [AppComponent]
})

Update AppComponent


import { MetaService } from 'ngx-meta';

@Component({
  ...
})
export class AppComponent {
  constructor(private metaService: MetaService) {}
}

You're all set! ngx-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.

import { MetaConfig, MetaService } from 'ngx-meta';

const metaConfig: 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': 'http://example.com/default-image.png',
    'any other': 'arbitrary tag can be used'
  }
};

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    ...,
    MetaModule.forRoot(metaConfig)
  ],
  bootstrap: [AppComponent]
})

Change meta tags programmatically

import { Component, OnInit } from '@angular/core';

class ProductComponent implements OnInit {
  ...
  constructor(private metaService: MetaService) {}
  
  ngOnInit() {
    this.product = //HTTP GET for product in catalogue
    this.metaService.setTitle('Product page for '+this.product.name);
    this.metaService.setTag('og:image',this.product.imageURL);
  }
}

Define fallback meta content in HTML

While Google executes Javascript and extracts meta tags set by ngx-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 ngx-meta in Javascript-enabled environments.

<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="http://example.com/fallback-image.png">
  </head>
</html>

Development

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

$ npm run tsc

To lint all *.ts files:

$ npm run lint

Licence

MIT © Indra Gunawan forked from Vinay Gopinath