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.

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

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

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

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

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

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.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store