New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

ngx-metadata

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-metadata

Dynamic meta tags and SEO in Angular 2/4

4.0.3
latest
Source
npm

Version published: 7 years ago

Weekly downloads: 5; decreased by-50%

Maintainers: 1

Weekly downloads

Created: 7 years ago

Source

ngx-meta

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

Keywords

FAQs

What is ngx-metadata?

Is ngx-metadata popular?

Is ngx-metadata well maintained?

Package last updated on 09 Oct 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install