I am trying to share a certain web page of my angular 9 project on Facebook by using this share url:
<a target="_blank" href='{{ "https://www.facebook.com/sharer/sharer.php?u="+recipeDetails?.web_link }}'>
I am also updating the meta tags in the component using Meta:
this.metaService.updateTag({ property: "og:title", content: "Title goes here"});
this.metaService.updateTag({ property: "og:description", content: "Description goes here"});
this.metaService.updateTag({ property: "og:url", content: "Url goes here"});
this.metaService.updateTag({ property: "og:image", content: "Image url goes here"});
The web page is showing me the meta tags when I inspect elements in the browser. But as angular is single page application the browser is showing me the initial metadata assigned from index.html while I view page source from the browser. As a result, when I am sharing a certain web page on Facebook, Facebook share preview is showing me the initial metadata which is assigned from index.html other than the updated metadata.
My question is: How can I show my updated metadata in Facebook share preview?
You have to enable server side rendering to solve this problem. Facebook does not run your JavaScript code, they use their scraper to collect the data of your shared link. And if you do not have server side rendering they can not scrape the data and will always show your homepage meta data. So enable ssr and give it a try.