使用react-helmet时社交媒体分享链接不显示标题图片描述如何解决

LinkedIn、Slack等社交平台的分享爬虫不会执行页面内的JavaScript代码，只会抓取服务端首次返回的静态HTML内容。纯客户端渲染（CSR）的React项目中，react-helmet是在客户端JS加载完成后才会把meta标签注入到页面head里，爬虫抓取时这些标签还不存在，自然无法识别标题、描述、封面信息。另外你当前的配置也缺失了爬虫必需的核心OG字段。

你现有配置缺少OG封面、页面类型、页面地址等必填字段，且要注意所有资源地址必须使用公网可访问的绝对路径，不能用相对路径，否则爬虫无法加载资源。参考配置如下：

<Helmet>
  {/* 基础页面元信息 */}
  <title>The Decision Making</title>
  <meta name="description" content="The Decision Making is the virtual library, additionally referred to as an internet library, a web library, a virtual repository" />

  {/* Open Graph 协议标签（主流社交平台通用识别规则） */}
  <meta property="og:type" content="website" />
  <meta property="og:title" content="The Decision Making" />
  <meta property="og:description" content="The Decision Making is the virtual library, additionally referred to as an internet library, a web library, a virtual repository" />
  {/* og:image 建议尺寸1200*630px，必须是公网可直接访问的https绝对路径，不要加访问鉴权 */}
  <meta property="og:image" content="https://你的站点域名/分享封面图.jpg" />
  <meta property="og:url" content="https://你的站点域名/当前页面访问地址" />
  <meta property="og:site_name" content="The Decision Making" />

  {/* Twitter 兼容标签，部分平台会 fallback 读取该组配置 */}
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="The Decision Making" />
  <meta name="twitter:description" content="The Decision Making is the virtual library, additionally referred to as an internet library, a web library, a virtual repository" />
  <meta name="twitter:image" content="https://你的站点域名/分享封面图.jpg" />
</Helmet>

注意：meta标签的content属性不要加多余换行，部分低版本爬虫解析带换行的内容会出现截断错误。

补全标签后还需要让爬虫首次请求就能拿到带meta的HTML内容，选择以下任意一种方案即可：

• 服务端渲染（SSR）：使用Next.js等自带SSR能力的React框架，或给原生React项目接入ReactDOMServer服务端渲染能力，通过react-helmet提供的Helmet.renderStatic()方法，在服务端生成HTML时就把所有meta标签注入到页面head中，爬虫请求时直接返回完整的带meta的HTML内容。
• 构建期预渲染：如果是静态部署的站点，可以使用react-snap、prerender-spa-plugin这类预渲染工具，在项目构建阶段就把每个路由对应的页面内容（包括meta标签）提前生成独立的静态HTML文件，访问时直接返回生成好的静态文件，不需要客户端执行JS渲染。
• 动态渲染兜底：在服务端配置UA识别规则，当检测到访问者是社交平台爬虫时，直接返回提前准备好的带完整meta标签的静态HTML片段，普通用户访问时仍正常返回客户端渲染的页面资源。

• 所有OG配置中用到的图片、页面地址必须是公网可直接访问的HTTPS路径，不要使用相对路径，不要给对应资源设置反爬、登录鉴权拦截
• 社交平台抓取分享信息会有缓存，配置修改后不会立即生效，需要等平台缓存过期后才能看到最新效果
• 不要在meta标签的content里插入特殊字符、多余换行，避免爬虫解析失败

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