ngx-metadata
Advanced tools
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
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.
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 } from 'ngx-meta';
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule.forRoot(routes),
MetaModule.forRoot()
],
bootstrap: [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.
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]
})
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);
}
}
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>
To generate all *.js, *.js.map and *.d.ts files:
$ npm run tsc
To lint all *.ts files:
$ npm run lint
MIT © Indra Gunawan forked from Vinay Gopinath
FAQs
Dynamic meta tags and SEO in Angular 2/4
The npm package ngx-metadata receives a total of 5 weekly downloads. As such, ngx-metadata popularity was classified as not popular.
We found that ngx-metadata demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
A survey of 500 cybersecurity pros reveals high pay isn't enough—lack of growth and flexibility is driving attrition and risking organizational security.
Product
Socket, the leader in open source security, is now available on Google Cloud Marketplace for simplified procurement and enhanced protection against supply chain attacks.
Security News
Corepack will be phased out from future Node.js releases following a TSC vote.