'Angular 8 - Update Meta tags dynamically for Facebook (Open graph) with Prerender.IO
I am trying to change meta tags dynamically in my Angular 8 application for sharing in Facebook and other social media by using AddThis tool.
I am using Prerender.IO.
The angular application is hosted in IIS, so I have written rewrite rules in web.config file for Prerender.IO.
I have put window.prerenderReady = false; at the beginning of the <head> tag in index.html.
After that I have put some static <meta> tags in the index.html like follows:
<meta property="og:url" content="Your website page URL" />
<meta property="og:type" content="website" />
<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 name="twitter:card" content="summary" />
<meta name="twitter:title" content="Your Website Page Title" />
<meta name="twitter:description" content="Your Website Page Description" />
<meta name="twitter:image" content="Your Website image" />
Then I am changing Meta tags values dynamically in app.component.ts.
After that I have set window.prerenderReady = true there.
I have checked with this command curl -H "X-Prerender-Token: My_Token_Value" https://service.prerender.io/https://My_Test_Site.com and it's showing updated meta tags values.
But when I am sharing the page in Facebook or other social media tools from AddThis button, it's showing values from those static OG graph values, not the updated OG graph values.
Please help me.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|