如何解决ReactJS网站Google缓存显示404的问题

以下是针对代码及相关配置的排查方向：

• 检查SPA路由的服务器 fallback 配置
  React单页应用依赖服务器将所有非API请求转发到index.html，如果这个配置缺失，Googlebot抓取时可能触发404。

  • 若用Cloudflare Pages，确保项目根目录有_redirects文件，内容为：

    /* /index.html 200
    

  • 若用Express等自定义服务器，添加路由 fallback：

    const path = require('path');
    app.get('*', (req, res) => {
      // 排除API路径，避免影响接口请求
      if (!req.path.startsWith('/api')) {
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
      }
    });
    

• 验证页面HTTP状态码与Google抓取记录
  用Google Search Console的「URL检查工具」模拟Googlebot抓取主页，查看返回的状态码。如果实际访问是200但缓存显示404，大概率是Google首次抓取时遇到了404，后续缓存未更新，可在工具内提交重新索引请求。
  同时检查React应用是否在路由加载前错误返回404状态码，比如使用react-router-dom时，不要在服务器端错误设置状态码。

• 排查Cloudflare爬虫相关配置
  即使服务器人员确认无异常，仍需核对：

  • 是否开启「Bot Fight Mode」或类似反爬功能，导致Googlebot被误拦截？可临时关闭测试。
  • 检查Cloudflare Page Rules，是否有针对主页的缓存规则导致返回404。
  • 确认Cloudflare对Googlebot的请求没有设置特殊的缓存策略，比如强制返回旧的错误缓存。

• SSR/SSG框架的生成配置检查（若使用）
  如果你用Next.js、Gatsby等框架：

  • Next.js：检查app/page.js或pages/index.js是否正常构建，next.config.js的output配置是否符合部署要求，确保SSR渲染主页时返回200状态码。
  • Gatsby：确认gatsby-config.js的站点配置正确，主页的生成逻辑无错误，避免构建时生成异常页面。

• 检查robots.txt与爬虫指令
  确认robots.txt没有禁止Googlebot抓取主页：

  User-agent: Googlebot
  Allow: /
  

  同时检查主页是否存在<meta name="robots" content="noindex">标签，或服务器返回X-Robots-Tag头部，这类指令虽不会直接导致404，但可能影响Google的缓存逻辑。

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