I guess this question has been asked too many times because I have gone through almost every possible question that deals with this. My Need Simplified: I would like to create social share buttons for my website that uses Angular 7 and has universal properly setup. Detail: I am looking for a solution that allows me to dynamically update Meta Tags for Facebook, Twitter and other social media platforms in such a way that when I click the share button I should share content that is specific to the current article in view. Important: The data for these meta tags is obtained by making an API call thus the solution cannot include hard-coded data. Tried Solution: I tried the solution of using Meta from '@angular/platform-browser' but the result is that it updates the tags after the DOM has already been rendered. My component's ngOnInit has the following: this.musicService.getTrackInfo(track._id) .subscribe(track => { this.metaService.setTag('og:title', track.name); this.metaService.setTag('og:type', 'music.song'); }); Research Made: https://samvloeberghs.be/posts/better-sharing-on-social-media-platforms-with-angular-universal Similar Unresolved Issues: Angular universal Server Side Rendering, Meta tags angular universal update meta tags with dynamic content Updating meta tags for SEO using angular universal Dynamic update meta tags with facebook share - angular 6 Could someone please provide a full, step by step solution for this issue and also explanations to why the current way of using Meta is not working. Continue reading...
