-
-
Save Gamblt/f25377d1ef0ab000daba6d1abb104f51 to your computer and use it in GitHub Desktop.
Example working service for adding meta tags to <head/> for angular2-universal. Based on http://blog.devcross.net/2016/04/17/angular-2-universal-seo-friendly-website/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {Injectable,Inject,ElementRef, Renderer} from '@angular/core'; | |
| //import { DOCUMENT } from '@angular/platform/common_dom'; | |
| import {DOCUMENT} from '@angular/platform-browser'; | |
| @Injectable() | |
| export class SeoService { | |
| private _r: Renderer; | |
| private _el: ElementRef; | |
| private _document: any; | |
| /** | |
| * Angular 2 Title Service | |
| */ | |
| //private titleService: Title; | |
| /** | |
| * <head> Element of the HTML document | |
| */ | |
| private headElement: any;//HTMLElement; | |
| /** | |
| <meta property="og:title" content="Title Here" /> | |
| */ | |
| private ogTitle: HTMLElement; | |
| /** | |
| <meta property="og:type" content="article" /> | |
| */ | |
| private ogType: HTMLElement; | |
| /** | |
| <meta property="og:url" content="http://www.example.com/" /> | |
| */ | |
| private ogUrl: HTMLElement; | |
| /** | |
| <meta property="og:image" content="http://example.com/image.jpg" /> | |
| */ | |
| private ogImage: HTMLElement; | |
| /** | |
| <meta property="og:description" content="Description Here" /> | |
| */ | |
| private ogDescription: HTMLElement; | |
| /** | |
| * Inject the Angular 2 Title Service | |
| * @param titleService | |
| */ | |
| constructor(@Inject(DOCUMENT) private document, element: ElementRef, renderer: Renderer) { | |
| this._el = element; | |
| this._r = renderer; | |
| //super(); | |
| this._document = document; | |
| this.headElement = this._document.head; | |
| this.ogTitle = this.getOrCreateMetaElement('og:title','property'); | |
| this.ogType = this.getOrCreateMetaElement('og:type','property'); | |
| this.ogUrl = this.getOrCreateMetaElement('og:url','property'); | |
| this.ogImage = this.getOrCreateMetaElement('og:image','property'); | |
| this.ogDescription = this.getOrCreateMetaElement('og:description','property'); | |
| } | |
| public setTitle(siteTitle = '',pageTitle ='',separator = ' / '){ | |
| let title = siteTitle; | |
| if(pageTitle != '') title += separator + pageTitle; | |
| this._document.title = title; | |
| } | |
| /* | |
| * Open graph | |
| */ | |
| public setOgTitle(value: string) { | |
| this._r.setElementAttribute(this.ogTitle,'content',value); | |
| } | |
| public setOgType(value: string) { | |
| this._r.setElementAttribute(this.ogType,'content',value); | |
| } | |
| public setOgUrl(value: string) { | |
| this._r.setElementAttribute(this.ogUrl,'content',value); | |
| } | |
| public setOgImage(value: string) { | |
| this._r.setElementAttribute(this.ogImage,'content',value); | |
| } | |
| public setOgDescription(value: string) { | |
| this._r.setElementAttribute(this.ogDescription,'content',value); | |
| } | |
| /** | |
| * get the HTML Element when it is in the markup, or create it. | |
| * @param name | |
| * @returns {HTMLElement} | |
| */ | |
| private getOrCreateMetaElement(name: string,attr: string): HTMLElement { | |
| let el: HTMLElement; | |
| var prop = ((attr != null)? attr : 'name'); | |
| el = this._r.createElement(this.headElement,'meta',null); | |
| this._r.setElementAttribute(el,prop,name); | |
| return el; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment