Angular 2中的开放图谱

Question

我正在处理一个使用Angular 2构建的SPA，遇到了一些困难。

我有一个项目列表。当我点击某个项目时，应用程序会显示详细信息，包括标题、描述和图片。

在我的details.component.ts文件中，我在ngOnInit方法中从API异步获取详情。详情加载完成后，我通过操作DOM添加/更新Open Graph元标签。

问题在于：如果有人复制URL并将其粘贴到Facebook上，则详情（通过API按JSON格式传输）将在html之后加载，并且Facebook将无法获取更新的开放图形标签。

是否有人遇到过这种问题？有什么想法可以解决它吗？

- Eduardo Spaki

Answer 1

许多消费者可能不会渲染您的javascript以获取您的opengraph标签。我所知道的唯一两个解决方法是：

• 静态地呈现您的内容（使用Angular-Universal或类似工具），并将机器人和爬虫重定向到预渲染的内容
• 如果无法实现上述方法，则在您的index.html中备份opengraph标签，以便至少在页面上有“某些东西”，即使它不是当前文章的opengraph数据。

- bmelton