Angular + Dynamic元标记

Question

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

（假）网址的例子：

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

加载其中一个网址时：

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">所以meta标签的更新工作

到目前为止，这么好。 问题是，当共享指向facebook或google plus的链接时，例如https://example.com/images/table，预览图片不正确，它不会获取更新的元标记。

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

如何解决？

Answer 1

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

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