Dynamic Update Meta Tags With Facebook Share - Angular 6

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

Solution 1:

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.