我们如何动态添加/更新元标记，以便 Facebook/Whatsapp 共享对话框选择它们？

我将 Angular 2 应用程序升级到 Angular 4，以便在我们从 API 获取组件中的数据后，使用元服务动态添加/更新元标记。

到目前为止，在我的组件中，我已经

this.metaService.updateTag({ property: 'og:title', content: pageTitle });
this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' });
this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });

我使用 updateTag 是因为我已经添加了具有默认值的静态标签。当我检查元标记值时，此代码成功更新了它们。

我知道 Facebook/Whatsapp 调试器工具不执行任何 javascript，因此它可能永远不会在其环境中执行，这是有道理的。

我在用着https://developers.facebook.com/tools/debug/它总是选择有意义的默认标签值。

我的问题是，如何让 Facebook/Whatsapp 动态获取更新的标签值？我正在使用 Angular 4 并通过 API 调用加载所有数据，因此在页面加载和脚本执行之前不可能获取任何类型的数据。

Open Graph OG 标签必须位于源代码内！

您需要提供一个静态 html 页面，其中包含 html 源代码中的 og:image og:title 和 og:description 等开放图形标签，因为 facebook、twitter 和 co 只是抓取纯 html，而不通过 javascript 渲染它。 Angular通过js动态更新dom，因此爬虫只获取初始的index.html。

有多种方法可以提供包含开放图的 html 标签并解决您的问题：

• 具有角度通用的服务器端渲染
• 使用代理渲染您的页面
• 动态覆盖 index.html 替换 og 标签
• 提供静态 html 页面（不确定 Angular 是否支持）

我猜你已经使用过类似的东西ngx-meta添加og标签？

Angular Universal - 在 Angular 2/3/4/5 中使用元标记进行服务器端渲染

我认为服务器端渲染是解决您的问题的最合适方法。为此，您可以托管节点服务器或使用例如。 AWS Lambda。这样做的缺点是，您的应用程序必须主动托管，并且不能再静态提供服务。无论如何，这似乎是最好的方法，因为它也改善了搜索引擎优化。 Angular Universal 是要搜索的术语：

• 角度通用
• Angular 通用入门样板
• Angular Universal PWA，具有服务器端渲染无服务器和 aws lambda 样板

构建时的 Angular 通用预渲染

您还可以在构建过程中预渲染特定的路由，并将 Angular 作为具有多个预渲染的 index.html 文件的静态应用程序提供服务。如果您只有很少的静态路由，则效果非常好。考虑具有动态部分的更通用的路线，这不是解决方案。进行服务器端渲染。这角度通用样板还包含一个示例。看预渲染.ts

替代解决方案

使用代理预渲染 Angular 以提供 OG 标签

如果您想避免在构建过程中实现服务器端/预渲染（对于结构不佳的应用程序来说，设置角度通用有时会很痛苦。）您可以尝试使用代理服务预渲染页面。看看例如。预渲染io.

覆盖index.html

将所有请求重定向到覆盖 og:tags 的脚本。例如。使用PHP和.htaccess覆盖og标签这在现代环境中也是可能的。例如。您可以使用 cloudfront / api 网关和 lambda 函数。不过还没有看到这方面的例子。

Facebook 缓存和开放图调试

请注意，缓存可能仍然缓存了第一次抓取的开放图信息。确保您的源代码是最新的，并且清除所有缓存、反向代理（例如 nginxx、cloudfront）。

Use Facebook 调试器调试开放图缓存并清除 facebook 打开图缓存