Angular 6：使用 og:description 标记在 facebook 上共享页面时，动态元标记不起作用答案

【问题标题】：Angular 6 : Dynamic Meta tag is not working when sharing page on facebook using og:description tagAngular 6：使用 og:description 标记在 facebook 上共享页面时，动态元标记不起作用
【发布时间】：2019-07-08 10:55:16
【问题描述】：

我想使用 API 调用在元标记中设置动态信息。当我通过检查检查时，它会显示更新的数据，但当我在 Facebook 上分享链接时，它不会反映更新的数据。

索引.html

  <meta name="description" content="Create and share your biography">
  <meta name="og:url" content="window.location.href"> 
  <meta name="og:title" content="TEACHERLIFE -SPANISH LESSONS">
  <meta name="og:description" content="So I’m in my classroo...">

在 component.ts 中：

import { Meta, Title } from '@angular/platform-browser';
 constructor(private metaService: MetaService,
    private meta: Meta,) {}
  ngOnInit() {
this.meta.updateTag( {name: 'og:description', content:"testdescription"});
}

【问题讨论】：

您是否在 Angular 应用程序中使用 ssr ？
@FahimUddin 不，我们没有使用 ssr，我们使用的是客户端角度。
你必须使用ssr，没有ssr它不会工作。

标签： angular dynamic angular5 angular6 meta-tags

【解决方案1】：

import { Meta } from '@angular/platform-browser';

constructor(private meta: Meta) {}

ngOnInit() {
  this.meta.updateTag(
     {name: 'twitter:title', content:'Front-end Web Development'},
     `name='twitter:title'`
   );
}

【讨论】：

这不起作用！！请参阅第一个答案以了解原因。 Facebook 和其他网站调用您的页面，只看到 index.html 中定义的标签，并且以某种方式使用 updateTag 更新的元标签被忽略。

【解决方案2】：

Facebook Share 不解析 javascript，所以它只截取 index.html 页面上的静态元数据。

请参考github社区的完整讨论。

https://github.com/jvandemo/angular-update-meta/issues/13

【讨论】：

如果你使用服务器端渲染，你的问题将得到解决，SSR允许你生成服务器解析的每个页面。因此，爬虫将在渲染时捕获元标记，而不是 javascript 即时更新您的元标记。

【解决方案3】：

默认情况下，Angular 不使用服务器端渲染。出于 SEO 的目的，您需要在项目中添加 Angular Universal，以便启用服务器端渲染。然后 SEO 元标记将起作用。

https://angular.io/guide/universal

下面是我遇到的 YouTube 教程，它解释了这个概念。 https://www.youtube.com/watch?v=lncsmB5yfzE

【讨论】：