Angular 2+ 社交分享链接预览

Question

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

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

如何满足这一要求。如何实施？提前致谢。

Answer 1

你需要实现两件事来解决这个问题：

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

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

您需要寻求解决方案，例如：Angular 4 - Update Meta tags dynamically for Facebook (Open graph)

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