diff --git a/CHANGELOG.md b/CHANGELOG.md index 8ab4b67..8642b9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ #Changelog +## [v3.0.1](https://github.com/vinaygopinath/ng2-meta/releases/tag/v3.0.1) + +* [WIP] [Server-side rendering] Remove dependency on window.document +* Set `property` attribute for opengraph tags (and `name` attribute for all others) + ## [v3.0.0](https://github.com/vinaygopinath/ng2-meta/releases/tag/v3.0.0) * Angular 5.x compatibility + AOT support diff --git a/package.json b/package.json index ad9b7a7..d560af7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ng2-meta", "description": "Dynamic meta tags and SEO in Angular2", - "version": "3.0.0", + "version": "3.0.1", "scripts": { "lint": "tslint src/**/*.ts -p tsconfig.json", "build": "ng-packagr -p package.json" diff --git a/src/meta.service.ts b/src/meta.service.ts index aeaed39..a80ed2f 100644 --- a/src/meta.service.ts +++ b/src/meta.service.ts @@ -1,5 +1,5 @@ import { Inject, Injectable, Optional } from '@angular/core'; -import { Title, DOCUMENT } from '@angular/platform-browser'; +import { Title, Meta } from '@angular/platform-browser'; import { Router, NavigationEnd, Event as NavigationEvent, ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; @@ -10,9 +10,9 @@ const isDefined = (val: any) => typeof val !== 'undefined'; @Injectable() export class MetaService { - constructor( + public constructor( private router: Router, - @Inject(DOCUMENT) private document: any, + private meta: Meta, private titleService: Title, private activatedRoute: ActivatedRoute, @Inject(META_CONFIG_TOKEN) private metaConfig: MetaConfig @@ -21,7 +21,7 @@ export class MetaService { .filter((event: NavigationEvent) => (event instanceof NavigationEnd)) .map(() => this._findLastChild(this.activatedRoute)) .subscribe((routeData: any) => { - this._updateMetaTags(routeData.meta); + this._processRouteMetaTags(routeData.meta); }); } @@ -36,20 +36,22 @@ export class MetaService { return child.data; } - private _getOrCreateMetaTag(name: string): HTMLElement { - let el: HTMLElement = this.document.querySelector(`meta[name='${name}']`); - if (!el) { - el = this.document.createElement('meta'); - el.setAttribute('name', name); - this.document.head.appendChild(el); + private _updateMetaTag(tag: string, value: string) { + let prop = 'name'; + if (tag.startsWith(`og:`)) { + prop = 'property'; } - return el; + + this.meta.updateTag({ + [prop]: tag, + content: value + }); } - private _updateMetaTags(meta: any = {}) { + private _processRouteMetaTags(meta: any = {}) { if (meta.disableUpdate) { - return false; + return; } this.setTitle(meta.title, meta.titleSuffix); @@ -69,32 +71,30 @@ export class MetaService { }); } - setTitle(title?: string, titleSuffix?: string): MetaService { - const titleElement = this._getOrCreateMetaTag('title'); - const ogTitleElement = this._getOrCreateMetaTag('og:title'); - let titleStr = isDefined(title) ? title : (this.metaConfig.defaults['title'] || ''); + public setTitle(title?: string, titleSuffix?: string): MetaService { + let titleContent = isDefined(title) ? title : (this.metaConfig.defaults['title'] || ''); if (this.metaConfig.useTitleSuffix) { - titleStr += isDefined(titleSuffix) ? titleSuffix : (this.metaConfig.defaults['titleSuffix'] || ''); + titleContent += isDefined(titleSuffix) ? titleSuffix : (this.metaConfig.defaults['titleSuffix'] || ''); } - titleElement.setAttribute('content', titleStr); - ogTitleElement.setAttribute('content', titleStr); - this.titleService.setTitle(titleStr); + this._updateMetaTag('title', titleContent); + this._updateMetaTag('og:title', titleContent); + this.titleService.setTitle(titleContent); + return this; } - setTag(tag: string, value: string): MetaService { + public setTag(tag: string, value: string): MetaService { if (tag === 'title' || tag === 'titleSuffix') { throw new Error(`Attempt to set ${tag} through 'setTag': 'title' and 'titleSuffix' are reserved tag names. Please use 'MetaService.setTitle' instead`); } - const tagElement = this._getOrCreateMetaTag(tag); - let tagStr = isDefined(value) ? value : (this.metaConfig.defaults[tag] || ''); - tagElement.setAttribute('content', tagStr); + let content = isDefined(value) ? value : (this.metaConfig.defaults[tag] || ''); + this._updateMetaTag(tag, content); if (tag === 'description') { - let ogDescElement = this._getOrCreateMetaTag('og:description'); - ogDescElement.setAttribute('content', tagStr); + this._updateMetaTag('og:description', content); } + return this; } }