ng2-meta-defaultoverriden

v2.0.6

Published

2 years ago

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

Downloads

0High
0Medium
0Low

michaelmarriott

angular angular2 seo meta tags open graph

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.

Import MetaModule

Update AppComponent

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme