React SPA部署在Vercel后无法生成链接预览求助

问题描述 #

我开发的React单页应用（SPA）部署在Vercel平台后，分享链接时无法生成预览卡片，也不显示标题和描述。已使用metatags.io生成的meta标签配置到index.html中，但未生效，配置代码如下：

<title>My website</title>
<meta name="title" content="My website" />
<meta name="description" content="Lorem ipsum dolor sit" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.mywebsite.io/" />
<meta property="og:title" content="My website" />
<meta property="og:description" content="Lorem ipsum dolor sit" />
<meta property="og:image" content="./favicon.png" />

解决步骤 #

1. 修正OG图片的绝对路径 #

社交平台的爬虫无法像浏览器一样解析相对路径，必须使用完整的绝对URL指向图片资源。把og:image的内容改成你的图片完整地址，比如：

<meta property="og:image" content="https://www.mywebsite.io/favicon.png" />

2. 确认初始index.html的meta标签有效 #

React纯客户端渲染的SPA中，爬虫只会抓取初始返回的index.html，所以必须确保你添加的meta标签直接写在public/index.html的<head>里，不能依赖React组件在客户端动态插入。部署后可以通过浏览器开发者工具查看页面的<head>部分，确认这些标签存在。

3. 清除Vercel缓存并重新部署 #

Vercel可能缓存了旧的页面内容，导致新配置的meta标签未生效。操作步骤：

• 登录Vercel控制台，找到对应项目
• 进入Deployments页面，选择最新的部署记录
• 点击Purge Cache清除缓存，然后重新触发一次部署

4. 添加Vercel SPA路由配置（可选） #

如果你的应用有多个路由，需要确保Vercel正确处理所有路由的请求，返回index.html。在项目根目录创建vercel.json文件，添加以下配置：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

这个配置会让所有路径的请求都返回主页面，避免爬虫访问子路由时获取不到正确的meta信息。

5. 验证预览效果 #

部署完成后，可以用社交平台自带的调试工具检查链接的预览信息，确认meta标签是否被正确识别。

内容的提问来源于stack exchange，提问作者Syed Anas Raza Bukhari