Dynamic Meta Tags For Social Sharing Angular 6+ Universal

Question

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:

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.

user_6407937 · Answer

It does work for me using updateTag. In index.html I've added all tags without value i.e.

Also I'm adding the dynamic values like this:

this.meta.updateTag({
        name: 'twitter:description', content: *value from api*
      });

Dynamic Meta Tags For Social Sharing Angular 6+ Universal

1 Answers