用于社交分享的动态元标签 Angular 6+ Universal

Question

我想这个问题已经被问过太多次了，因为我已经回答了几乎所有可能涉及到这个问题的问题。

简化我的需求：我想为我的网站创建社交分享按钮，该按钮使用 Angular 7 并具有通用的正确设置。

详细信息：我正在寻找一种解决方案，允许我动态更新 Facebook、Twitter 和其他社交媒体平台的元标记，这样当我点击分享按钮时，我应该分享内容这是特定于当前文章的观点。 重要提示：这些元标记的数据是通过API调用获得的，因此解决方案不能包含硬编码数据。

尝试过的解决方案：我尝试了使用“@angular/platform-b​​rowser”中的 Meta 的解决方案，但结果是它在 DOM 已经渲染后更新了标签。

我的组件的 ngOnInit 有以下内容：

this.musicService.getTrackInfo(track._id)
                .subscribe(track => {  
            this.metaService.setTag('og:title', track.name);
            this.metaService.setTag('og:type', 'music.song'); });

研究：

• https://samvloeberghs.be/posts/better-sharing-on-social-media-platforms-with-angular-universal

类似的未解决问题：

• 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

有人可以为这个问题提供完整的分步解决方案，并解释为什么当前使用 Meta 的方式不起作用。

Answer 1

使用 updateTag 确实对我有用。 在 index.html 中，我添加了所有没有价值的标签，即

<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="">

我还添加了这样的动态值：

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