Angular 2+ 社交分享链接预览

Question

我正在开发一个 Angular 4 应用程序，它具有根据不同标准生成不同反馈表单链接的功能。 因此，它每天可以生成数百或数千个链接。

我想做的是使所有这些链接在社交共享方面变得丰富，即每个链接如果粘贴在 facebook 等社交媒体上，它应该能够具有特定于该表单的元数据，即所有链接都将具有不同的表单名称和描述. 当链接粘贴到 facebook、twitter 等时，应获取每个链接特定数据。

如何接近这个要求。 如何实施？ 提前致谢。

Answer 1

您需要实施两件事来解决问题：

1. 在 index.html 页面上实现 Open Graph Tags。 您需要根据通过 angular 中的元服务将用户路由到的 URL 更改这些元标记。 有关详细信息，请参阅 URL https://alligator.io/angular/meta-tags/
2. 使用 Angular Universal 发布此使用服务器端渲染。
3. 使用 Facebook 调试器验证生成的内容。

如果您的项目无法实现 SSR（由于 static 服务器），那么上述几点将不适用于 facebook、twitter、linkedin、whatsapp。

您需要 go 解决方案，例如： Angular 4 - 为 Facebook 动态更新元标记（打开图表）

1. 代理渲染。 预渲染.io
2. .htaccess 与 PHP。