Angular应用配置的OG标签分享到Facebook不生效如何解决

• Facebook等社交平台的爬虫不会执行客户端JavaScript代码，Angular是客户端渲染的单页应用，你在ngOnInit中通过Meta服务动态更新的标签，只有在用户浏览器加载完所有JS代码之后才会生效，爬虫抓取页面时只会读取初始返回的HTML（也就是你写在index.html里的默认标签内容），自然无法识别你动态更新的内容。
• 你现有配置存在两处不符合规范的问题：
  • 初始og:url写的是不带协议的www.google.com，不符合OG标签规范，必须带上完整的http/https协议头
  • 你用的og:image是Google图片搜索的跳转链接，不是图片资源的直链，爬虫无法抓取到对应的图片资源

方案1：使用Angular Universal做服务端渲染（推荐） #

这是适配爬虫场景最稳妥的方案，服务端会直接返回渲染完成、带完整对应页面OG标签的HTML内容，爬虫可以直接读取：

• 给现有项目添加Angular Universal支持，执行命令：ng add @nguniversal/express-engine
• 你现有的Meta服务更新标签的逻辑不需要大幅修改，Angular Universal兼容Meta服务的API，只需要确保你生成OG标签用到的动态数据（比如页面标题、专属图片、页面地址）可以在服务端环境正常获取即可
• 部署SSR服务后，所有页面请求都会返回对应OG标签已填充完成的完整HTML

方案2：预渲染静态页面 #

如果你的应用路由数量不多，且路由规则固定，可以选择预渲染方案，打包阶段就生成每个路由对应的静态HTML文件，每个文件里已经填充好对应页面的OG标签：

• 执行命令添加预渲染支持：ng add @nguniversal/common
• 在angular.json中配置需要预渲染的路由列表，执行打包命令时就会自动生成所有路由对应的静态HTML
• 直接托管生成的静态文件即可，爬虫访问对应路由时会直接拿到带正确OG标签的静态内容

方案3：爬虫请求定向返回静态标签页 #

如果不想改动现有项目的渲染逻辑，可以做一层代理判断：当识别到请求UA是Facebook爬虫时，返回预先生成好的、带对应页面OG标签的静态HTML内容，普通用户访问还是正常返回Angular单页应用代码。

• 所有OG标签的url、image属性必须填写完整带http/https协议的绝对路径
• og:image必须使用图片资源的直接链接，不要使用跳转页、搜索结果页地址
• 每次修改标签内容后，需要清除Facebook平台的分享缓存，避免平台读取旧的缓存内容无法展示新配置的标签

内容的提问来源于stack exchange，提问作者Smitha Chandra