Angular2 SeoService Metatags SIMPLE & EASY

Huge problem in angular2 – how to create good seo service.

Simple solution, maybe not 100% professional Рbut works, without any not trusted npm modules

  1. Create SeoService (and register it in module.ts)
    1. dedicated for your project
    2. this service will manage tags
  2. Create SeoBaseService
    1. based on basic js
    2. it will create and update tags

For google  Рit enought, for facebok like/share Рyou prerender.

<!doctype html>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
import {Injectable} from "@angular/core";
import {Media} from "../../models/media";
import {SeoCoreService} from "./seo-core.service";
import {TranslateService} from "./translate.service";

export class SeoService {

        private seoCoreService:SeoCoreService) {

import {Injectable} from "@angular/core";

export class SeoCoreService {
    private _document: any;

    private headElement: any;//HTMLElement;

    private ogTitle: HTMLElement;

    private ogType: HTMLElement;

    private ogUrl: HTMLElement;

    private ogImage: HTMLElement;

    private ogDescription: HTMLElement;

    constructor() {
        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;
        return this;

    public setOgTitle(value: string) {
        this.ogTitle.setAttribute('content', value);
        return this;

    public setOgType(value: string) {
        this.ogType.setAttribute('content', value);
        return this;

    public setOgUrl(value: string) {
        this.ogUrl.setAttribute('content', value);
        return this;

    public setOgImage(value: string) {
        this.ogImage.setAttribute('content', value);
        return this;

    public setOgDescription(value: string) {
        this.ogDescription.setAttribute('content', value);
        return this;

    private getOrCreateMetaElement(name: string, attr: string) {

        let ogmetatag = this._document.createElement('meta');
        ogmetatag.setAttribute(attr, name);
        return ogmetatag

    clear() {
        return this;
  • nerdcombr

    But this result render on the DOM.