用于社交共享的动态元标签 Angular 6+ 通用

Question

我想这个问题已经被问了太多次了，因为我已经浏览了几乎所有与此相关的可能问题。

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

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

尝试过的解决方案：我尝试了使用“@angular/platform-browser”中的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 通用服务器端渲染、元标签

• 具有动态内容的角度通用更新元标签

• 使用 Angular Universal 更新 SEO 的元标签

• 通过 Facebook 共享动态更新元标签 - 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*
      });

Answer 2

第 1 步：在主 index.html 页面中设置默认标签

<meta name="og:title" content="Website Title" />
<meta name="og:site_name" content="Website Name" />
<meta name="og:description" content="Your default website description goes here" />
<meta name="og:image" content="https://www.example.com/images/social/default.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://www.example.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Website Title" />
<meta name="twitter:description" content="Your default website description goes here" />
<meta name="twitter:image" content="https://www.example.com/images/social/default.jpg" />

第 2 步：将以下代码添加到要更改元标记的页面的组件中

//Add this to your imports in your component
import {Meta, Title} from '@angular/platform-browser';

//Angular component add a constructor
pageTitle = "About Us";
pageDesc = "This is a page about us";
pageSocialImage = "https://www.example.com/images/social/aboutus.jpg";

constructor(private titleService:Title, private meta: Meta) {
  this.titleService.setTitle(this.pageTitle);

  this.meta.updateTag({ name: 'description', content: this.pageDesc },`name='description'`); //The second parameter IS NECESSARY to do the update
  this.meta.updateTag({ name: 'og:title', content: this.pageTitle },`name='og:title'`);
  this.meta.updateTag({ name: 'og:description', content: this.pageDesc },`name='og:description'`);
  this.meta.updateTag({ name: 'og:image', content: this.pageSocialImage },`name='og:image'`);
  this.meta.updateTag({ name: 'og:url', content: "https://www.example.org/about-us" },`name='og:url'`);
  this.meta.updateTag({ name: 'twitter:title', content: this.pageTitle },`name='twitter:title'`);
  this.meta.updateTag({ name: 'twitter:description', content: this.pageDesc },`name='twitter:description'`);
  this.meta.updateTag({ name: 'twitter:image', content: this.pageSocialImage },`name='twitter:image'`);
}

不要运行代码片段。我没有把一切都连接起来。只需尝试一下，然后使用浏览器开发工具检查 DOM，即可在更改路由时查看元标记的切换。

这是我获得帮助的地方：https://www.digitalocean.com/community/tutorials/angular-meta-tags