Update Meta tags dynamically for Facebook (Open graph)

In this post, I am going to share you step by step guide about how to implement the open graph HTML meta tags. So let’s start to integrate.

First, define the meta tag in index.html file under the head section.

<meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:site_name" content="Your Website Name" />
  <meta property="og:url" content="Your website page URL" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Your Website Page Title" />
  <meta property="og:description" content="Your Website Page Description" />
  <meta property="og:image" content="Your Website image" />
  <meta property="og:image:secure_url" content="Your Website image" />

You may like: Angular — Static Page setup

Now let’s create a model class to assign meta-name & its value so we can use these in our services that will update the meta tag values.

To create a model file via angular CLI type ng g class model and it will generate 2 files (model.ts & model.spec.ts)

I am generating my file under a model folder with below command

ng g class /model/MetaTag

Open meta-tag.ts file pastes the below code.

export class MetaTag {
    name: string;
    value: string;

    constructor(name: string, value: string) {
        this.name = name;
        this.value = value;
    }
}

Next, let’s create share.service.ts file under service folder for this run

ng g s /services/share

Now open share.service.ts file and paste the below codes.

import { Injectable } from '@angular/core';
import { Title, Meta } from '@angular/platform-browser';
import {MetaTag} from '../model/meta-tag'

@Injectable({
  providedIn: 'root'
})
export class ShareService {

  private urlMeta: string = "og:url";
  private titleMeta: string = "og:title";
  private descriptionMeta: string = "og:description";
  private imageMeta: string = "og:image";
  private secureImageMeta: string = "og:image:secure_url";

  constructor(private metaService: Meta) { } 

  public setFacebookTags(url: string, title: string, description: string, image: string): void {
    var imageUrl = `https://images.codinghub.net/${image}`;
    var tags = [
      new MetaTag(this.urlMeta, url),
      new MetaTag(this.titleMeta, title),
      new MetaTag(this.descriptionMeta, description),
      new MetaTag(this.imageMeta, imageUrl),
      new MetaTag(this.secureImageMeta, imageUrl)
    ];
    this.setTags(tags);
  }

  private setTags(tags: MetaTag[]): void {
    tags.forEach(siteTag => {
      this.metaService.updateTag({ property: siteTag.name, content: siteTag.value });
    });
  }
}

Service creation has done now we only need to call this service form component where these meta tags values changes for that inject the ShareService in you component constructor & call the setFacebookTags to update the Facebook meta tags. Code snippets are below

//Import service file to comonent
import { ShareService } from '../services/share.service';

//Inject to constructor
constructor(private shareService:ShareService)

//call the setFacebookTags to update the metatags

ngOnInit() {
    this.shareService.setSocialMediaTags(
                    "Your Page URL",
                    "Your page titile",
                    "Your Page Description",
                    "Your Page Image URL");
}

That’s it. Thanks for reading the article, I hope this will help you to integrate the Facebook open graph.

You may like: Angular — Recenter Angular Google Maps ( AGM )

Originally published at https://codinghub.net.