Angular动态meta标签在Facebook分享链接时预览不生效如何解决？

问题根因 #

你遇到的问题本质是Facebook的爬虫抓取页面时不会执行客户端JavaScript代码。你通过前端JS实现的动态meta标签更新逻辑，仅在普通用户访问页面、浏览器完成JS执行后才会生效；而Facebook爬虫拿到的是服务器直接返回的原始index.html文件，因此只会识别到你写死在静态文件里的默认标签内容，无法获取到路径对应的动态内容。

解决方案 #

• 服务端渲染(SSR)
  调整项目架构为服务端渲染，服务端接收请求时根据当前路径，直接把对应OG、title等meta标签写入返回的HTML内容中，爬虫拿到的就是已经填充好正确信息的页面，完美适配分享预览规则。
• 预渲染服务
  如果你当前是单页应用（SPA）不想重构为SSR，可以接入预渲染方案：识别到请求UA是Facebook等社交平台爬虫时，把请求转发到预渲染服务（比如基于Puppeteer实现的预渲染服务），预渲染服务会模拟浏览器执行完页面JS后，返回已经更新好meta标签的静态HTML给爬虫。
• 静态站点生成(SSG)
  如果你的站点内容是固定、更新频率低的，可以用SSG方案提前为所有路径生成独立的静态HTML文件，每个文件自带对应路径的meta标签，部署后所有请求直接返回对应静态文件即可。

小提示：测试前可以先在Facebook分享调试器中执行「再次抓取」操作，清除平台已有的缓存，避免旧缓存干扰测试结果。

对应参考截图 #

落地页meta标签效果：

/first路径更新后的meta标签效果：

内容的提问来源于stack exchange，提问作者The Grumpy Lion