Angular + 动态元标记

Question

我正在使用 Angular4，并且有一个可以显示图像的应用程序：

（假）网址示例：

• https://example.com/images/table
• https://example.com/images/chair等

加载其中一个 URL 时：

1. 网站被下载
2. 应用（角度）启动
3. 它向后端发出一些查询，1 或 2 秒后，angular 接收到有关图像的信息：
   • images/table 将显示 https://path/to/table123.jpg 或
   • images/chair 将显示 https://path/to/chairABC.png
4. 然后我通过调用头部中的setMetadata(...) 来更新元标记，并且正确显示为： <meta property="og:image" content="https://path/to/table123.jpg"> 所以元标签的更新工作

到目前为止，一切都很好。 问题是，当分享到 facebook 或 google plus 的链接时，例如https://example.com/images/table，预览图像不正确，它不会拾取更新的元标记。

使用https://search.google.com/structured-data/testing-tool/也会出现同样的问题：它不显示Angular更新的标签，只显示原始标签。

如何解决？

Answer 1

Facebook 和 Google 会在页面首次加载时查找数据，并且不会在您的应用查找信息并更新页面时等待。

您需要创建可以共享到的静态页面（这些页面中已经包含图像），这些页面将重定向回真实页面，或者您需要使用 Angular Universal 来实现服务器端渲染