Angular 4 - 为 Facebook 动态更新元标签(打开图)

Question

我们如何动态添加/更新元标记，以便它们被 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 调用加载所有数据，因此在页面加载和脚本执行之前无法获取任何类型的数据。

Answer 1

Open Graph OG 标签必须在源代码中!

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

有几种方法可以提供包含开放图的 html标记 ans 解决您的问题:

• 使用 Angular 通用的服务器端渲染
• 使用代理呈现您的页面
• 动态覆盖 index.html 替换 og 标签
• 提供静态 html 页面(不确定 Angular 是否支持)

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

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

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

• Angular Universal
• Angular Universal Starter Boilerplate
• Angular Universal PWA with serverside rendering serverless with aws lambda boilerplate

构建时的 Angular 通用预渲染

您还可以在构建过程中预呈现特定路由，并将 Angular 作为具有多个预呈现 index.html 文件的静态应用程序提供服务。如果您只有很少的静态路由，那么这非常好。考虑带有动态部分的更通用的路由，这不是解决方案。去服务器端渲染。 angular universal boilerplate还包含一个示例。参见 prerender.ts

替代解决方案

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

如果你想避免在构建过程中实现服务器端/预渲染(设置 Angular 通用有时对于结构化不好的应用程序来说是一种痛苦。)你可以尝试使用代理服务预渲染你的页面。看看例如。 prerender.io .

覆盖index.html

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

Facebook 缓存和 Open Graph 调试

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

使用Facebook Debugger调试开放图缓存和清除 facebook 开放图缓存