ng2-meta-defaultoverriden

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng2-meta-defaultoverriden

Dynamic meta tags and SEO in Angular2 - Forked from https://github.com/vinaygopinath/ng2-meta

2.0.6

latest

source

npm

Version published: 7 years ago

Weekly downloads: 9; increased by80%

Maintainers: 1

Created: 7 years ago

Weekly downloads

Readme

Source

ng2-meta

This is fork of vinaygopinath/ng2-meta

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

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-meta --save

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

npm install --save ng2-meta-defaultoverriden

ng2-meta works with angular2 2.0.0 and @angular/router 3.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 'ng2-meta';

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

Update AppComponent


import { MetaService } from 'ng2-meta';

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

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

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 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>
  <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 ng2-meta-defaultoverriden?

Is ng2-meta-defaultoverriden popular?

Is ng2-meta-defaultoverriden well maintained?

Last updated on 10 Nov 2016

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