React多页面WhatsApp分享预览自定义标题/图片/描述求助

问题核心在于：WhatsApp的爬虫只会请求页面的初始HTML文件，不会执行任何JavaScript代码。你用useEffect或react-helmet在客户端动态修改的标题、Meta标签，爬虫根本看不到，它只会读取index.html里的原始内容，所以分享预览始终是首页的信息。

下面是几种可行的解决办法：

1. 改用服务端渲染（SSR）框架 #

比如用Next.js这类支持SSR的React框架，在每个页面的服务端逻辑里直接注入对应页面的Meta标签。服务器返回给爬虫的HTML已经包含了正确的标题、描述和预览图，WhatsApp就能正常抓取。

示例（Next.js中使用next/head）：

import Head from 'next/head';

export default function AboutMe() {
  return (
    <>
      <Head>
        <title>个人介绍 - 我的网站</title>
        <meta property="og:title" content="个人介绍 - 我的网站" />
        <meta property="og:description" content="这里是我的详细个人信息，包括兴趣、经历..." />
        <meta property="og:image" content="https://your-domain.com/about-me-preview.jpg" />
        <meta property="og:url" content="https://your-domain.com/aboutMe" />
      </Head>
      {/* 页面内容 */}
    </>
  );
}

2. 静态站点生成（SSG） #

如果你的子页面内容不常变动，可以用SSG方式构建，比如Next.js的getStaticProps或Gatsby。构建时会为每个子页面生成独立的HTML文件，每个文件里都包含对应页面的Meta标签，爬虫请求时直接获取到正确的内容。

3. 启用预渲染服务 #

如果不想重构整个项目为SSR/SSG，可以用预渲染工具，配置服务器在检测到爬虫请求时，返回预渲染好的、包含正确Meta的HTML页面，普通用户访问时依然加载SPA的初始文件。

很多静态托管平台（比如Netlify、Vercel）自带预渲染功能，开启后平台会自动处理爬虫的预渲染请求，无需额外开发。

关键注意事项 #

• og:url标签必须设置为当前子页面的完整绝对路径，WhatsApp会依据这个URL抓取对应内容。
• og:image要用绝对路径，且图片尺寸建议至少1200x630像素（符合WhatsApp预览的最佳比例），格式为JPG或PNG。
• 配置完成后，可以用官方的链接预览调试工具验证Meta标签是否被正确抓取。

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