如何为React网站创建XML sitemap并解决Google Search Console无法抓取问题

GSC无法抓取的核心排查方向 #

普通SEO检测工具仅校验sitemap格式合法性，不会模拟Google爬虫的真实访问环境，出现抓取失败优先检查以下项：

• 检查robots.txt规则，确认没有屏蔽sitemap路径和Googlebot的访问权限，规则示例：

  User-agent: *
  Allow: /
  Sitemap: https://你的域名.com/sitemap.xml
  

• 检查服务器、WAF、CDN的拦截规则，确认没有误封Googlebot的请求IP，可将Google官方爬虫标识加入访问白名单
• 确认sitemap的访问路径为公网可访问的完整路径，协议头和站点实际部署的协议（HTTP/HTTPS）完全一致，不能使用本地测试路径、内网路径
• 检查sitemap内的所有URL均为当前站点下真实存在的路径，没有死链、跨域链接、无效参数链接

不同React项目的正确sitemap生成方案 #

1. Next.js等支持SSG/SSR的框架项目 #

Next.js 13+已内置sitemap生成能力，无需安装第三方插件：

• 在app目录下新建sitemap.ts文件，按实际路由配置填写内容即可：

import { MetadataRoute } from 'next'
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://你的实际域名.com',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1,
    },
    {
      url: 'https://你的实际域名.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    // 补充其余所有页面的路由信息
  ]
}

• 项目构建后会自动生成根目录可访问的sitemap.xml文件

2. 普通CSR React项目（create-react-app/Vite搭建） #

手动生成方案

• 整理所有页面路由，按照标准XML sitemap格式编写内容：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://你的实际域名.com</loc>
    <lastmod>2024-05-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <!-- 依次添加其余所有页面的url条目 -->
</urlset>

• 将编写完成的sitemap.xml文件放入项目的public目录，构建后文件会自动输出到产物根目录，可直接通过根路径访问

自动生成方案

• 安装sitemap-generator-cli等工具，在package.json的构建脚本中新增sitemap生成指令，自动遍历项目路由生成文件后存入public目录即可

GSC提交注意事项 #

• 提交前使用GSC自带的URL检查工具，输入sitemap的完整路径，测试Googlebot是否可正常抓取
• 确认站点在GSC内的验证版本和实际部署的站点版本完全一致（带www/不带www、HTTP/HTTPS需完全匹配）
• 提交时直接填写sitemap的相对路径sitemap.xml即可，无需填写完整域名

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