I am creating an HTML word game app using Angular 17 and SSR. Which game is loaded is determined by an ID passed in via the URL. When the game is over, there is a share link, so that the player can share the game and their score on social media. The meta-tags exist in the index.html file, and then I am updating the Open Graph (OG) tags on the game page(s) by using Angular's metaTagService (in the constructor of the game component):
this.metaTagService.updateTag({ property: 'og:url', content: "https://www.example.com/game/" + this.documentID });
this.metaTagService.updateTag({ property: 'og:image', content: "<path to image>" });
...
It is important to note that the game ID, image, etc. are coming from a database (Firebase).
I am using a routes.txt file in order to pass in a list of the game pages that should be pre-rendered.
The problem I am having is that the pre-rendered pages DO NOT have the updated meta-tags in place.
When I view the page in the browser, two things happen. If I right-click and choose "inspect" and then look at the header data, the correct meta-tags are there. However, if I choose "View page source", you can see that the original meta-tags are there, not the updated ones.
Can anyone please help me to understand what I am doing wrong, or what I'm missing? I'm running out of things to try. Thank you.