Angular动态生成Meta标签后，LinkedIn分享不显示标题与图片

问题根源 #

LinkedIn的链接爬虫是静态抓取机制，只会读取页面初始加载时的HTML源码，不会执行页面中的JavaScript代码。你在index.html里用JS动态生成Meta标签，属于客户端渲染生成的内容，爬虫请求页面时还没执行到这部分逻辑，所以抓不到这些标签，导致分享时不显示标题和图片。

可行解决方法 #

• 服务器端渲染（SSR）：使用Angular Universal实现SSR，让页面在服务器端完成渲染，包括Meta标签的生成。爬虫请求时直接拿到包含完整Meta信息的HTML，就能正确识别标题和图片。配置步骤大致为：安装@nguniversal/express-engine依赖，修改angular.json和server.ts配置，构建时同时生成客户端和服务端包，部署时运行服务端代码。

• 预渲染（Prerendering）：如果你的网站是静态路由（无动态参数的页面），可以用Angular的预渲染功能，在构建阶段提前生成每个路由对应的静态HTML文件，包含正确的Meta标签。执行命令：

  ng run [你的项目名]:prerender
  

  生成的静态文件部署后，爬虫就能直接读取到完整的Meta信息。

• 静态写入Meta标签（仅限内容固定页面）：如果页面的Meta信息不需要动态变化，直接在index.html的<head>中手动添加Open Graph标签，示例格式：

  <meta property="og:title" content="你的页面标题">
  <meta property="og:image" content="https://你的域名/图片路径.jpg">
  <meta property="og:url" content="https://你的域名/当前页面路径">
  <meta property="og:type" content="website">
  

  注意：LinkedIn要求图片尺寸至少1200x627像素，格式为JPG/PNG，文件大小不超过5MB。

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