Next.js Sitemap 与 robots.txt 配置指南：让搜索引擎快速收录网站

网站开发完上线了，兴冲冲地在 Google 搜自己的网站名，结果…什么都没有。

刷新了几次，换了几个关键词，还是空空如也。打开 Google Search Console 一看，提交的 Sitemap 显示”无法获取”，心里一紧——这不就等于白干了吗？没有搜索流量，再好的内容也只能自己欣赏。

说实话，这个问题我之前也遇到过。第一次做 Next.js 项目的时候，按照某个教程配置了 Sitemap，结果 Google 根本抓不到。折腾了一个星期，试了各种方法，最后发现是 robots.txt 配置有问题——直接把整个网站都屏蔽了。我还记得当时的无力感，感觉自己犯了个低级错误。

阿里云 - 开发者上云首选，轻量服务器专享 8.5 折优惠，助力项目快速上线

领取 8.5 折优惠 →推广

这篇文章就是把我踩过的坑、查过的文档、试过的配置都整理出来。我会用最直白的方式讲清楚这两个文件的作用，给你三种 Sitemap 生成方案，告诉你常见的错误在哪，最后还会分享一个真实的失败案例和怎么从中恢复的过程。如果你也遇到网站不被收录、Sitemap 报错、或者不知道怎么配置动态页面的问题，这篇应该能帮你少走不少弯路。

为什么需要 Sitemap 和 robots.txt？

Sitemap 的作用

Sitemap 就像是给搜索引擎的一份”地图”，告诉它你网站上有哪些页面、多久更新一次、哪些页面更重要。没有 Sitemap，搜索引擎只能靠爬虫自己慢慢发现你的页面，尤其是那些深层页面或者动态生成的内容，可能几个月都爬不到。

根据行业数据，有 Sitemap 的网站收录速度能提升 40% 左右。对于新网站来说，这个差别更明显——可能是一周内被收录和一个月后才被收录的区别。

robots.txt 的作用

robots.txt 是告诉搜索引擎”哪些可以抓，哪些不能抓”。比如你的管理后台、API 接口、构建文件这些，根本不需要被收录，配置 robots.txt 可以让爬虫跳过这些内容，把抓取配额用在真正重要的页面上。

但这里有个很重要的点：不配置 robots.txt 比配置错了要好。我见过太多情况，开发者本想屏蔽某个目录，结果一不小心把整个网站都屏蔽了，导致网站从 Google 消失。所以配置的时候一定要测试，测试，再测试。

Next.js 生成 Sitemap 的三种方法

Next.js 13+ 引入了 App Router 之后，生成 Sitemap 的方式也有了变化。下面我按照从简单到复杂，介绍三种方法。

方法1：App Router 原生 sitemap.ts

适用场景：Next.js 13+ 项目，页面数量不多（几十到几百个）

这是官方推荐的方式，最大的好处是不需要额外安装任何依赖。在 app 目录下创建 sitemap.ts 文件：

// app/sitemap.ts
import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://yourdomain.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://yourdomain.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://yourdomain.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}

部署后，访问 https://yourdomain.com/sitemap.xml 就能看到生成的 Sitemap。

优点：

• 官方支持，稳定可靠
• 无需额外依赖
• 可以用 TypeScript 类型检查

缺点：

• 静态页面需要手动维护
• 动态页面需要在代码里获取数据

方法2：next-sitemap 包

适用场景：需要自动化、多环境支持、或者页面数量很大的项目

next-sitemap 是社区最流行的 Sitemap 生成工具，功能非常强大。

安装：

npm install next-sitemap

配置文件 next-sitemap.config.js：

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://yourdomain.com',
  generateRobotsTxt: true, // 自动生成 robots.txt
  sitemapSize: 50000, // 单个 Sitemap 最多 50000 条 URL
  exclude: ['/admin/*', '/api/*', '/secret'], // 排除某些路径
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/admin', '/api'],
      },
    ],
    additionalSitemaps: [
      'https://yourdomain.com/server-sitemap.xml', // 动态 Sitemap
    ],
  },
}

在 package.json 添加脚本：

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

这样每次 npm run build 后会自动生成 Sitemap。

优点：

• 功能强大，支持多 Sitemap 拆分
• 自动生成 robots.txt
• 支持动态路由
• 可以配置多环境

缺点：

• 需要额外依赖
• 配置相对复杂一些

方法3：API 路由手动生成

适用场景：需要极致自定义、或者 Sitemap 需要实时更新

在 App Router 中使用 Route Handler：

// app/sitemap.xml/route.ts
import { NextResponse } from 'next/server'

export async function GET() {
  // 从数据库或 CMS 获取数据
  const posts = await fetchAllPosts()

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com</loc>
    <lastmod>${new Date().toISOString()}</lastmod>
    <priority>1.0</priority>
  </url>
  ${posts.map(post => `
  <url>
    <loc>https://yourdomain.com/blog/${post.slug}</loc>
    <lastmod>${post.updatedAt}</lastmod>
    <priority>0.7</priority>
  </url>
  `).join('')}
</urlset>`

  return new NextResponse(sitemap, {
    status: 200,
    headers: {
      'Content-Type': 'application/xml',
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate',
    },
  })
}

优点：

• 完全可控
• 可以实时生成
• 可以添加复杂的逻辑

缺点：

• 需要自己写 XML 格式
• 性能需要自己优化
• 需要手动处理缓存

三种方法对比

我自己的项目大多数用 next-sitemap，因为配置一次就不用管了，而且功能够用。

动态路由实战：博客文章 Sitemap

这是最常见的场景——博客、产品页、用户主页等动态内容如何加入 Sitemap？

使用 App Router 原生方式

// app/sitemap.ts
import { MetadataRoute } from 'next'
import { getAllPosts } from '@/lib/posts'

export default async function sitemap(): MetadataRoute.Sitemap {
  // 静态页面
  const staticPages = [
    {
      url: 'https://yourdomain.com',
      lastModified: new Date(),
      changeFrequency: 'yearly' as const,
      priority: 1,
    },
    {
      url: 'https://yourdomain.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly' as const,
      priority: 0.8,
    },
  ]

  // 动态获取所有文章
  const posts = await getAllPosts()
  const postPages = posts.map(post => ({
    url: `https://yourdomain.com/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.7,
  }))

  return [...staticPages, ...postPages]
}

// 设置重新验证时间（ISR）
export const revalidate = 3600 // 每小时重新生成一次

关键点：

1. changeFrequency 和 priority 需要 as const 类型断言
2. 使用 export const revalidate 启用增量静态再生（ISR）
3. lastModified 最好用文章实际更新时间

大型网站：超过 50,000 条 URL 怎么办？

Google 规定单个 Sitemap 最多 50,000 条 URL。如果超过，需要拆分成多个 Sitemap。

使用 generateSitemaps 函数：

Vultr - 高性能 NVMe 云服务器，32 个全球节点可选，支持一键部署 Docker

查看定价 →推广

// app/sitemap.ts
import { MetadataRoute } from 'next'

// 生成多个 Sitemap
export async function generateSitemaps() {
  const totalPosts = await getTotalPostsCount()
  const sitemapsCount = Math.ceil(totalPosts / 50000)

  return Array.from({ length: sitemapsCount }, (_, i) => ({
    id: i,
  }))
}

// 为每个 Sitemap 生成内容
export default async function sitemap({
  id,
}: {
  id: number
}): Promise<MetadataRoute.Sitemap> {
  const start = id * 50000
  const end = start + 50000

  const posts = await getPosts(start, end)

  return posts.map(post => ({
    url: `https://yourdomain.com/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    priority: 0.7,
  }))
}

这会生成多个 Sitemap：

• sitemap/0.xml
• sitemap/1.xml
• sitemap/2.xml
• …

Next.js 会自动生成一个 sitemap.xml 索引文件，包含所有子 Sitemap 的链接。

robots.txt 完整配置

基础配置示例

最简单的 robots.txt：

# 允许所有爬虫抓取所有内容
User-agent: *
Allow: /

# 指定 Sitemap 位置
Sitemap: https://yourdomain.com/sitemap.xml

但实际项目中，我们需要更细致的配置：

User-agent: *
Allow: /

# 禁止抓取这些目录
Disallow: /_next/
Disallow: /api/
Disallow: /admin/
Disallow: /dashboard/

# 禁止抓取某些文件类型
Disallow: /*.json$
Disallow: /*.xml$
Disallow: /*?*  # 带查询参数的 URL

# 指定 Sitemap
Sitemap: https://yourdomain.com/sitemap.xml

重点说明：

1. /_next/：Next.js 构建文件，没必要让搜索引擎抓取
2. /api/：API 接口不需要收录
3. /admin/ 和 /dashboard/：管理后台当然不能被收录
4. /*.json$：JSON 文件不需要收录
5. Sitemap 这行很重要：别忘了加，这样搜索引擎知道去哪找你的 Sitemap

Next.js 动态生成 robots.txt

在 App Router 中使用 robots.ts：

// app/robots.ts
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  const baseUrl = 'https://yourdomain.com'

  // 开发环境禁止所有爬虫
  if (process.env.NODE_ENV === 'development') {
    return {
      rules: {
        userAgent: '*',
        disallow: '/',
      },
    }
  }

  // 生产环境配置
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: [
          '/_next/',
          '/api/',
          '/admin/',
          '/dashboard/',
        ],
      },
      {
        userAgent: 'GPTBot', // 禁止 OpenAI 爬虫
        disallow: ['/'],
      },
    ],
    sitemap: `${baseUrl}/sitemap.xml`,
  }
}

多环境配置的好处：

开发环境和预览环境不应该被搜索引擎收录，通过环境变量控制，可以避免测试内容被收录。

这里我特别想强调的是：很多人在生产环境和开发环境用同一份配置文件，这是个严重的风险。我建议这样做：

// app/robots.ts
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || 'https://yourdomain.com'
  const isProduction = process.env.NODE_ENV === 'production'
  const isDeployPreview = process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'

  // 非生产环境：完全禁止爬虫
  if (!isProduction || isDeployPreview) {
    return {
      rules: {
        userAgent: '*',
        disallow: '/',
      },
    }
  }

  // 只在生产环境允许爬虫
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: [
          '/_next/',
          '/api/',
          '/admin/',
          '/dashboard/',
          '/*.json$',
        ],
      },
      {
        userAgent: 'GPTBot',
        disallow: ['/'],
      },
    ],
    sitemap: `${baseUrl}/sitemap.xml`,
  }
}

这样就不会出现”不小心让搜索引擎爬了测试内容”或”生产环境被意外屏蔽”的情况。

常见错误避坑指南

错误1：误屏蔽了整个网站

# ❌ 错误写法
User-agent: *
Disallow: /

这样写会把整个网站都屏蔽掉！正确写法：

# ✅ 正确写法
User-agent: *
Allow: /
Disallow: /admin/

错误2：忘记添加 Sitemap 引用

很多人配置了 Sitemap，但忘记在 robots.txt 里声明，导致搜索引擎不知道去哪找 Sitemap。

# ❌ 缺少这一行
Sitemap: https://yourdomain.com/sitemap.xml

错误3：路径格式错误

# ❌ 错误：路径不以 / 开头
Disallow: _next/

# ✅ 正确：路径必须以 / 开头
Disallow: /_next/

错误4：过度限制

# ❌ 过度限制：把图片都屏蔽了
Disallow: /*.jpg$
Disallow: /*.png$

图片也是内容的一部分，应该让搜索引擎抓取，除非你有特殊理由。

测试方法：

1. 访问 https://yourdomain.com/robots.txt，检查内容是否正确
2. 使用 Google Search Console 的 robots.txt 测试工具
3. 测试某个 URL 是否被允许抓取

Google Search Console 集成与验证

配置好 Sitemap 和 robots.txt 后，需要在 Google Search Console 提交，这样 Google 才能更快地发现和收录你的网站。

添加网站到 Search Console

1. 访问 Google Search Console
2. 点击”添加资源”
3. 选择”域名”或”网址前缀”验证方式

推荐用 DNS 验证：

• 在域名提供商那里添加一条 TXT 记录
• 等待几分钟让 DNS 生效
• 回到 Search Console 点击验证

或者用 HTML 文件验证：

在 public 目录下放一个 Google 给你的验证文件，比如 google1234567890abcdef.html。

Railway - 现代化的部署平台，告别繁琐运维，让代码分钟级上线

立即开始 →推广

提交 Sitemap

验证通过后：

1. 左侧菜单点击”Sitemaps”
2. 输入 Sitemap URL：sitemap.xml
3. 点击”提交”

等待时间：

• 提交后 Google 不会立即处理
• 通常 1-7 天内开始抓取
• 可以在 Search Console 看到抓取状态

常见错误排查

错误1：“无法获取 Sitemap”

这是最常见的问题。可能原因：

原因1：Middleware 拦截了 Googlebot

如果你用了 Next.js Middleware 做认证，可能会把 Googlebot 也拦截了。

解决方案：

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl
  const userAgent = request.headers.get('user-agent') || ''

  // 识别是否是搜索引擎爬虫
  const isBot = /googlebot|bingbot|slurp|duckduckbot|baiduspider|yandexbot/i.test(
    userAgent
  )

  // Sitemap 和 robots.txt 必须让所有人访问，包括爬虫
  if (
    pathname === '/robots.txt' ||
    pathname === '/sitemap.xml' ||
    pathname.startsWith('/sitemap-')
  ) {
    return NextResponse.next()
  }

  // 如果是爬虫，整体放行
  if (isBot) {
    return NextResponse.next()
  }

  // 普通用户的认证逻辑
  const token = request.cookies.get('session-token')
  if (!token && pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}

这样的配置确保爬虫能正常访问 Sitemap 和 robots.txt，同时你的认证逻辑对普通用户继续生效。

原因2：缓存问题

Google Search Console 会缓存失败的抓取尝试。即使你修复了问题，可能还会显示”无法获取”。

解决方案：

1. 在 Sitemap URL 后加上时间戳参数：sitemap.xml?v=20231220
2. 等待几天让 Google 重新抓取
3. 或者删除旧的 Sitemap 提交，重新提交新的

原因3：XML 格式错误

检查你的 Sitemap XML 格式是否正确：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com</loc>
    <lastmod>2024-12-20</lastmod>
  </url>
</urlset>

注意：

• 第一行的 XML 声明要用 <?xml 开头（不是 <xml）
• lastmod 格式必须是 ISO 8601（YYYY-MM-DD 或完整时间戳）

你可以用在线 XML 验证工具检查格式。

错误2：“已提交但未收录”

Sitemap 提交成功了，但页面就是不收录。可能原因：

1. robots.txt 屏蔽了页面：检查 robots.txt 是否误配置
2. 页面质量问题：内容太少、重复内容、或者被认为是低质量页面
3. 网站太新：新网站需要时间建立信誉
4. 没有外链：完全没有外部链接的网站很难被收录

解决方案：

1. 用 Google Search Console 的”网址检查”工具，看看 Google 怎么看你的页面
2. 检查页面是否有 noindex meta 标签
3. 确保页面内容有实质价值，至少 300 字以上
4. 尝试获取一些外链

监控收录情况

提交后，定期检查收录状态：

1. Coverage 报告：看哪些页面被收录，哪些有问题
2. 索引状态：看总共收录了多少页面
3. Sitemap 状态：看 Sitemap 是否正常被读取

如果发现有页面没被收录，用”网址检查”工具请求 Google 重新抓取。

阿里云 - 开发者上云首选，轻量服务器专享 8.5 折优惠，助力项目快速上线

领取 8.5 折优惠 →推广

实战案例：我的踩坑经历

说到这儿，我想分享一个真实的故事。去年我接手了一个电商网站，已经上线 3 个月了，但 Google 搜索里一直搜不到任何页面。

我第一反应是检查 robots.txt，结果发现：

User-agent: *
Disallow: /

整个网站都被屏蔽了。更扎心的是，这个配置已经有 3 个月了。问了负责部署的同事，他说”这不是我改的啊”，最后查出来是临时开发人员为了防止搜索引擎抓取测试环境，在生产环境也用了同一份配置。

之后的一个月特别难熬。我删除了错误的 robots.txt，生成了正确的 Sitemap，提交到 Google Search Console，然后就是等。等了一个星期网站才开始出现在搜索结果。

从那以后，我养成了一个习惯：每次部署前都会检查一遍 Sitemap 和 robots.txt，而且会区分环境。开发环境用一套，生产环境用另一套。

还有一次是 Middleware 的问题。我给网站加了一层 JWT 认证中间件，结果 Googlebot 被拦截了。当时 Search Console 一直报”无法获取 Sitemap”，我还以为是 Sitemap 格式有问题，折腾了好半天才发现是 Middleware 搞的鬼。

所以说，SEO 看似简单，但细节真的很关键。一个小配置错误可能就会让你的网站从搜索结果消失。

问题排查与优化

测试 Checklist

部署前，按这个清单检查一遍：

• Sitemap 可以正常访问（https://yourdomain.com/sitemap.xml）
• Sitemap XML 格式正确
• robots.txt 可以正常访问（https://yourdomain.com/robots.txt）
• robots.txt 不屏蔽重要页面
• robots.txt 包含 Sitemap 引用
• Sitemap 包含所有重要页面
• 动态页面能自动更新到 Sitemap
• Search Console 已成功验证网站
• Sitemap 已提交到 Search Console
• Middleware 不拦截搜索引擎爬虫

性能优化

Sitemap 缓存策略

如果你用 API 路由生成 Sitemap，记得加缓存：

// app/sitemap.xml/route.ts
export const revalidate = 3600 // 1 小时缓存

export async function GET() {
  // ...生成 Sitemap
  return new NextResponse(sitemap, {
    headers: {
      'Content-Type': 'application/xml',
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate',
    },
  })
}

增量更新 vs 全量重建

• 小型网站（< 1000 页）：每次都全量重建，简单省事
• 中型网站（1000-10000 页）：使用 ISR，按小时或按天重新验证
• 大型网站（> 10000 页）：拆分多个 Sitemap，增量更新变化的部分

CDN 配置

如果你用了 Cloudflare 等 CDN，确保 Sitemap 和 robots.txt 也被缓存：

1. 设置合适的 Cache-Control 头
2. 允许 CDN 缓存 XML 和 TXT 文件
3. 内容更新后记得清除 CDN 缓存

总结

回顾一下整个配置流程：

1. 选择 Sitemap 生成方法：

   • 小型项目用 App Router 原生方式
   • 中大型项目用 next-sitemap
   • 需要极致自定义用 API 路由

2. 配置 robots.txt：

   • 屏蔽不需要收录的目录
   • 添加 Sitemap 引用
   • 开发环境禁止抓取

3. 提交到 Google Search Console：

   • 验证网站所有权
   • 提交 Sitemap
   • 监控收录状态

4. 常见问题排查：

   • Middleware 不要拦截爬虫
   • XML 格式要正确
   • 缓存问题用时间戳参数解决

说实话，配置 Sitemap 和 robots.txt 不是什么高深技术，但细节很多，稍不注意就会出问题。我自己第一次配置的时候也踩了不少坑，整个网站被 robots.txt 屏蔽了一个月才发现。

现在每次新项目上线，我都会按照这个 Checklist 检查一遍，基本不会出问题了。希望这篇文章能帮你少走弯路，让你的网站快速被搜索引擎收录。

如果你遇到了其他问题，或者有什么经验想分享，欢迎在评论区留言！

14 分钟阅读 · 发布于: 2025年12月20日 · 修改于: 2026年1月22日

Easton

技术开发