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.

Did you look at this? stackoverflow.com/questions/35842315/… — AJT82
The solution provided here is like most solutions. If you inspect, the tags are updated, but is you view source, they are not updated and hence crawlers are not seeing the tags — Tatenda
Sounds like you have a problem with your universal setup, because you can change meta data with SSR. Give it a try with a new project. — Reactgular
I will try with a new project. But how can I have a problem with my SSR when the DOM is rendering okay? — Tatenda
Maybe your async requests are not finishing properly on the server-side. You said that you make API requests before the update. I think that's the issue. — Reactgular

Jon Jansson Jon Jansson · Accepted Answer · 2019-06-19T09:47:02

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

<meta name="description" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

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