Dynamic update meta tags with facebook share - angular 6

Question

I've requirement to update meta tags like og:title,og:description and og:image dynamically and share the same on facebook, I've tried everything but nothing works.

So first of all I've tried to set meta tag with javascript like below:

var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);

then I've tried to use angular meta tag like below:

To add:-

this.meta.addTag({ name: 'og:description', content: 'How to use Angular 6 meta service' });

To update:-

this.meta.updateTag({ name: 'og:description', content: 'Angular 6 meta service' });

but that all fails and finally I've tried below meta package,

https://github.com/vinaygopinath/ng2-meta

but still I'm having issue with dynamic fields while sharing my site url to facebook, it should show dynamic contents if someone post url on post.

if anyone have idea please let me know!

No we have fully angular based application with rest api(s). — Nimesh khatri

Mukesh Patil Mukesh Patil · Accepted Answer · 2018-12-21T11:40:25

All the approaches you have tried are happening at client-side. You need to understand one thing here: When you share a URL on Facebook, it makes a request to your server, reads the meta tags, then updates the card in facebook.com. Javascript comes later. So whatever approaches you try, if it is executing in the browser, will not work here. I suggest you try one of the following:

Use the Angular universal's server-side rendering, which is built just for this. The documentation can be found at: https://angular.io/guide/universal. The down-side of this solution is that your HTML pages must be served from a node server.

Dynamic update meta tags with facebook share - angular 6

1 Answers