I have been working on dynamically modifying a meta tag based on custom URL parameters that I process. In my index.html file, I have identified the meta tag like this:
<meta name="og:image" content="http://example.com/someurl.jpg" id="ogImage"/>
The code snippet in my home.ts file seems to be functioning properly:
document.getElementById('ogImage').setAttribute("content", Media.ImageURL) ;
I have confirmed this through the browser developer console/elements.
However, when viewing it from Facebook using their object graph debugger at https://developers.facebook.com/tools/debug/og/object/, it still shows the default URL as if the index.html was loaded before the update from my home.ts file took place.
Maybe my approach is not correct and there could be a better way to achieve this. Thank you for your assistance.
Note1: Initially, I thought of establishing an Angular binding between the index.html and one of my services. However, I couldn't find any relevant sample code. The closest reference I found was in this post How can I update meta tags in AngularJS?. Since I wasn't sure how to implement it in my Ionic 2/3 code, I chose the document.get approach instead.
Note2: The main objective here is to share a link on social media platforms such as Facebook, messenger apps like Viber/Skype, etc., and have it display meaningful images, titles, and descriptions to drive traffic back to the website through browsers or mobile apps where the user already has my app version installed.
Note3: If you recommend looking into Ionic deep linking, please provide specific code examples matching the scenario described above. I struggled to understand how to apply it in my situation.