SEO炼金术（4）| Next.js SEO 全攻略

在上一篇文章 SEO炼金术（3）| 深入解析 SEO 关键要素 中，我们深入解析了 SEO 关键要素，包括 meta 标签、robots.txt、canonical、sitemap.xml 和 hreflang，并探讨了它们在搜索引擎优化（SEO）中的作用。然而，对于使用 Next.js 开发的网站，手动管理这些 SEO 相关的配置可能会非常繁琐。

幸运的是，Next.js 内置了丰富的 SEO 支持，能够自动化和简化这些优化过程。本文将全面介绍 Next.js 提供的 SEO 相关功能，并通过示例演示如何在 Next.js 项目中正确配置 metadata、canonical、robots.txt、sitemap.xml 和 hreflang，确保你的网站能够在搜索引擎中获得最佳表现。🚀

📌 1. Next.js 的 SEO 相关功能

Next.js 提供了多种 SEO 相关的工具，使开发者无需手动编写 HTML head 标签，而是通过 配置和 API 自动生成正确的 SEO 标记。

📌 Next.js SEO 主要功能概览

📌 2. 在 Next.js 中实现 SEO

2.1 内置 metadata API（元数据 API）

Next.js 13+ 引入了 metadata API，替代了 next/head，可以在 layout.tsx 或 page.tsx 中直接定义 SEO 相关的元数据。

示例

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js SEO Optimization',
  description: 'Learn how to optimize Next.js applications for SEO.',
  keywords: ['Next.js', 'SEO', 'optimization'],
  robots: {
    index: true, // 允许搜索引擎索引
    follow: true, // 允许搜索引擎跟踪链接
  },
  alternates: {
    canonical: 'https://example.com/seo',
  },
  openGraph: {
    title: 'Next.js SEO',
    description: 'A comprehensive guide to SEO in Next.js',
    url: 'https://example.com/seo',
    images: [
      {
        url: 'https://example.com/og-image.jpg',
        width: 1200,
        height: 630,
      },
    ],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js SEO',
    description: 'A comprehensive guide to SEO in Next.js',
    images: ['https://example.com/twitter-card.jpg'],
  },
}

2.1.1详细字段解析

1️⃣ 标题相关

示例：

export const metadata: Metadata = {
  title: {
    template: '%s | My Website',
    default: 'My Website',
  },
}

输出

<title>My Page | My Website</title>

2️⃣页面描述

示例：

export const metadata: Metadata = {
  description: 'Next.js SEO Best Practices',
}

输出

<meta name="description" content="Next.js SEO Best Practices" />

3️⃣关键词

示例：

export const metadata: Metadata = {
  keywords: ['Next.js', 'SEO', 'Optimization'],
}

输出

<meta name="keywords" content="Next.js, SEO, Optimization" />

4️⃣ 搜索引擎爬取策略

示例：

export const metadata: Metadata = {
  robots: {
    index: true,
    follow: true,
    noimageindex: false,
    googleBot: {
      index: true,
      follow: true,
      'max-image-preview': 'large',
    },
  },
}

输出

<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow, max-image-preview:large" />

5️⃣ 规范 URL（Canonical）

示例：

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/seo',
  },
}

输出

<link rel="canonical" href="https://example.com/seo" />

6️⃣ Open Graph & Twitter 预览

示例：

export const metadata: Metadata = {
  openGraph: {
    title: 'Next.js SEO',
    description: 'A guide to SEO in Next.js',
    url: 'https://example.com/seo',
    images: [
      { url: 'https://example.com/og-image.jpg', width: 1200, height: 630 },
    ],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js SEO',
    description: 'A guide to SEO in Next.js',
    images: ['https://example.com/twitter-card.jpg'],
  },
}

输出

<meta property="og:title" content="Next.js SEO" />
<meta property="og:description" content="A guide to SEO in Next.js" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Next.js SEO" />
<meta name="twitter:image" content="https://example.com/twitter-card.jpg" />

7️⃣ 其他 SEO 相关元数据

2.1.2 Metadata API 最佳实践

✅ 默认在 layout.tsx 中定义 metadata，以便所有子页面继承默认值。
✅ 子页面可以覆盖 title 和 description，确保每个页面唯一性。
✅ 使用 metadataBase 设定 URL 前缀，简化 canonical 和 og:image 配置。
✅ **openGraph 和 twitter 提升社交媒体分享体验，增加流量入口。
✅ **如果页面是动态的，使用 generateMetadata() 以根据 params 生成动态 title。

2.2 生成 robots.txt 文件

在 Next.js 中，你可以 **手动添加robots.txt静态文件，或者 **动态生成robots.txt 以控制爬虫的抓取行为。Next.js 提供了一种 更智能 的方式，允许我们通过 robots.ts 文件 动态生成 规则，使 SEO 维护更加灵活。

2.2.1 使用静态 robots.txt

如果你的网站 不需要动态调整爬虫规则，可以直接在 app/ 目录下创建 robots.txt静态文件，这样 Next.js 会自动提供该文件，不需要额外的代码。

📌 创建 app/robots.txt

User-Agent: *
Allow: /
Disallow: /private/
Sitemap: https://example.com/sitemap.xml

📌 访问 https://example.com/robots.txt，你会看到：

User-Agent: *
Allow: /
Disallow: /private/
Sitemap: https://example.com/sitemap.xml

✅ 适用场景：

• 规则固定，不会根据环境或内容变化。
• 适用于小型网站，规则简单且不会变动。

🚨 但如果你需要动态管理爬虫规则，比如针对不同环境（开发/生产），或者对特定 URL 进行调整，就需要使用动态生成的方法。

2.2.2 通过 robots.ts 动态生成 robots.txt

Next.js 支持动态生成robots.txt，通过 app/robots.ts 让 robots.txt 自动适配不同环境。

📌步骤：在 app/robots.ts 中创建动态 robots.txt

import type { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      { userAgent: '*', allow: '/' }, // 允许所有爬虫访问整个网站
      { userAgent: 'Googlebot', disallow: '/private/' }, // Googlebot 不能访问 /private/
    ],
    sitemap: 'https://example.com/sitemap.xml', // 指定 sitemap 位置
  }
}

📌 访问 https://example.com/robots.txt，你会看到：

User-Agent: *
Allow: /
User-Agent: Googlebot
Disallow: /private/
Sitemap: https://example.com/sitemap.xml

✅ robots.ts 作用

• 动态生成 robots.txt，自动适配不同环境。
• 支持不同爬虫设置不同规则（如 Googlebot、Bingbot）。
• 无需手动维护 robots.txt 文件，防止因修改错误导致 SEO 受损。
• 自动缓存，提高性能。

2.2.3 robots.ts 的存放位置

• 需要 **手动创建app/robots.ts，它不会默认存在。
• robots.ts 必须放在 app/ 目录下的根路径**，保证 https://example.com/robots.txt 能够正确访问。
• ⚠️ 注意：如果 robots.txt 和 robots.ts 同时存在，Next.js 只会使用 robots.txt（静态文件优先）。

2.2.4 robots.ts 高级用法

如果你需要 对不同搜索引擎设置不同规则，可以 传递数组 让多个爬虫遵循不同的规则。

📌 示例：针对不同搜索引擎设置不同的爬取规则

import type { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: 'Googlebot', // 仅针对 Googlebot
        allow: ['/'], // 允许访问所有页面
        disallow: ['/private/'], // 禁止访问 /private/
      },
      {
        userAgent: ['Applebot', 'Bingbot'], // 适用于 Applebot 和 Bingbot
        disallow: ['/'], // 禁止访问所有页面
      },
    ],
    sitemap: 'https://example.com/sitemap.xml',
  }
}

📌访问 https://example.com/robots.txt，你会看到：

User-Agent: Googlebot
Allow: /
Disallow: /private/

User-Agent: Applebot
Disallow: /

User-Agent: Bingbot
Disallow: /

Sitemap: https://example.com/sitemap.xml

✅ 适用场景

• 你希望 不同搜索引擎有不同的爬取规则。
• 你想 屏蔽某些爬虫（如 Applebot、Bingbot）。
• 你希望 Googlebot 访问全部内容，但屏蔽 /private/ 目录。

2.2.5 robots.ts 的完整规则

Next.js 的 robots.ts 支持以下参数：

type Robots = {
  rules:
  | {
    userAgent?: string | string[]
    allow?: string | string[]
    disallow?: string | string[]
    crawlDelay?: number
  }
  | Array<{
    userAgent: string | string[]
    allow?: string | string[]
    disallow?: string | string[]
    crawlDelay?: number
  }>
  sitemap?: string | string[]
  host?: string
}

📌可选参数

📌示例：完整 robots.ts

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      { userAgent: '*', allow: '/' }, // 允许所有爬虫访问整个网站
      { userAgent: 'Googlebot', disallow: ['/private/'], crawlDelay: 10 }, // Googlebot 禁止访问 /private/，并设置爬取间隔 10 秒
    ],
    sitemap: ['https://example.com/sitemap.xml'],
    host: 'https://example.com',
  }
}

📌 访问 https://example.com/robots.txt，你会看到：

User-Agent: *
Allow: /

User-Agent: Googlebot
Disallow: /private/
Crawl-Delay: 10

Sitemap: https://example.com/sitemap.xml
Host: https://example.com

✅ 适用场景

• 你希望 Googlebot 爬取速度较慢，防止服务器压力过大。
• 你有 多个 sitemap.xml 文件，希望统一管理。
• 你希望 为网站设置主机 URL，提高 SEO 规范性。

2.3 生成 sitemap.xml

在 SEO 优化中，sitemap.xml 站点地图能够帮助搜索引擎更快地发现并索引网站上的重要页面。Next.js 允许 **手动添加sitemap.xml 文件，或者通过 sitemap.ts自动生成 站点地图，从而大大简化维护工作。

2.3.1 使用静态 sitemap.xml

如果你的网站页面较少，并且 URL 结构比较稳定，可以 手动创建 sitemap.xml 文件，然后放置在 app/ 目录下，Next.js 会直接提供该文件。

📌 **创建 app/sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

📌 访问 https://example.com/sitemap.xml，你会看到：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

✅ 适用场景

• 小型网站，页面数量少，URL 结构不会经常变化。
• 你希望**手动控制 sitemap.xml，无需额外代码逻辑。
• 你不需要自动更新 lastmod（页面最后更新时间）。

🚨 但如果你的网站页面较多、结构复杂，或者经常有新页面上线，建议使用动态生成 sitemap.xml 的方式。

2.3.2 通过 sitemap.ts 动态生成 sitemap.xml

Next.js 允许 自动生成 sitemap.xml，只需创建 sitemap.ts 文件，即可根据动态路由生成站点地图。这种方法更加灵活，适用于 大型站点或频繁更新的内容。

📌步骤：在 app/sitemap.ts 中创建 sitemap.xml

import type { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1.0,
    },
    {
      url: 'https://example.com/blog',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.8,
    },
  ]
}

📌 访问 https://example.com/sitemap.xml，你会看到：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/blog</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>daily</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

✅ sitemap.ts 作用

• 自动更新 lastmod，确保搜索引擎知道页面最新更新时间。
• 支持动态 URL（如博客文章、商品页等）。
• 搜索引擎可以更快发现新页面，加快索引速度。
• 无需手动维护 sitemap.xml 文件，降低出错风险。

2.3.3 sitemap.ts 的存放位置

• 需要 手动创建app/sitemap.ts，默认不会自动生成。
• sitemap.ts必须放在 app/ 目录下，确保可以通过 https://example.com/sitemap.xml 访问到。
• ⚠️ 注意：如果 sitemap.xml 和 sitemap.ts 同时存在，Next.js 只会使用 sitemap.xml（静态文件优先）。

2.3.4 生成多语言 sitemap.xml

如果你的网站有 多个语言版本，可以在 sitemap.ts 中 添加 alternates.languages 选项，告诉搜索引擎哪些 URL 代表不同语言版本。

📌示例：支持多语言的 sitemap.ts

import type { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://example.com',
      lastModified: new Date(),
      alternates: {
        languages: {
          'en': 'https://example.com/en',
          'de': 'https://example.com/de',
        },
      },
    },
    {
      url: 'https://example.com/about',
      lastModified: new Date(),
      alternates: {
        languages: {
          'en': 'https://example.com/en/about',
          'de': 'https://example.com/de/about',
        },
      },
    },
  ]
}

📌 访问 https://example.com/sitemap.xml，你会看到：

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en"/>
    <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de"/>
    <lastmod>2023-01-01</lastmod>
  </url>
  <url>
    <loc>https://example.com/about</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about"/>
    <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/about"/>
    <lastmod>2023-01-01</lastmod>
  </url>
</urlset>

✅ 作用

• 帮助搜索引擎正确索引不同语言版本的 URL。
• 避免重复内容问题（canonical + hreflang）。
• 自动维护多语言站点地图，无需手动管理。

2.3.5 生成大规模网站的 sitemap.xml

如果你的网站包含 大量页面（例如电商、博客、论坛等），建议 拆分 sitemap.xml，使用 generateSitemaps 方法。

📌示例：为大规模站点生成多个 sitemap.xml

import type { MetadataRoute } from 'next'
import { BASE_URL } from '@/app/lib/constants'

export async function generateSitemaps() {
  return [{ id: 0 }, { id: 1 }, { id: 2 }]
}

export default async function sitemap({ id }: { id: number }): Promise<MetadataRoute.Sitemap> {
  const start = id * 50000
  const end = start + 50000
  const products = await getProducts(`SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`)

  return products.map((product) => ({
    url: `${BASE_URL}/product/${product.id}`,
    lastModified: product.date,
  }))
}

📌 访问 /product/sitemap/1.xml，你会看到部分站点地图。 ✅ 适用场景

• 站点超过 50,000 个 URL（Google 单个 sitemap.xml 限制）。
• 电商、博客、新闻类站点 需要拆分站点地图。

📌 3. Next.js 内置 sitemap.ts vs. next-sitemap

Next.js 提供了 内置 sitemap.ts 生成 sitemap.xml 的功能，但社区中也有专门的 next-sitemap 库用于生成站点地图。那么，这两者有什么区别？应该选择哪种方式呢？本文将深入对比它们的特点、适用场景和优缺点**。

3.1 Next.js 内置 sitemap.ts

📌 Next.js 13+ 提供的 sitemap.ts 是一种原生支持**的方式，可以在 app/sitemap.ts 文件中定义站点地图，并自动生成 sitemap.xml。

✅ 特点

• 基于 app/sitemap.ts：无需额外安装依赖，Next.js 原生支持。
• 动态生成：支持 **lastModified 自动更新时间。
• 支持多语言 (hreflang) 和多 sitemap 结构。
• 不需要手动执行命令，访问 /sitemap.xml 即可获取站点地图。

✅ 优点

• 内置支持：不需要安装 next-sitemap，减少外部依赖。
• 自动化：无需手动运行 npx 命令，每次访问 /sitemap.xml 都是最新的。
• 支持 hreflang：适用于多语言网站。

🚨 缺点

• 功能较基础：不支持自动解析 next 的 pages 目录结构，需要手动添加 URL。
• 不适用于大型网站：sitemap.ts 适用于小型/中型站点，但对于有 10w+ URL 的大站，性能可能有限。

3.2 next-sitemap

📌 next-sitemap 是 Next.js 官方推荐的 sitemap.xml 生成工具，适用于大型项目，可自动爬取 pages/ 目录，批量生成 sitemap.xml。

✅ 特点

• 支持 SSR/SSG：可自动抓取 next.config.js 中的 pages/ 目录。
• 支持 robots.txt 生成，无需手写。
• 支持 sitemap index（多个 sitemap.xml 文件）。
• 提供 next-sitemap.js 配置文件，可以批量管理 URL，无需手动维护 sitemap.ts。

📌 安装 next-sitemap

npm install next-sitemap

📌 配置 next-sitemap.config.js

module.exports = {
  siteUrl: 'https://example.com', // 站点根路径
  generateRobotsTxt: true, // 自动生成 robots.txt
  sitemapSize: 5000, // 拆分 sitemap.xml
  changefreq: 'daily', // 默认所有页面更新时间
  priority: 0.8, // 默认优先级
  exclude: ['/admin', '/private'], // 排除不想被索引的页面
}

📌 运行命令，生成 sitemap.xml

npx next-sitemap

📌 生成的 sitemap.xml

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://example.com/sitemap-0.xml</loc>
  </sitemap>
  <sitemap>
    <loc>https://example.com/sitemap-1.xml</loc>
  </sitemap>
</sitemapindex>

✅ 优点

• 自动解析 pages 目录，无需手动维护 URL。
• 支持 robots.txt，可自动生成并配置。
• 适用于大规模网站，可以拆分多个 sitemap.xml，每个最多 50,000 个 URL。
• 支持 next export，可用于静态站点。

🚨 缺点

• 需要手动执行 npx next-sitemap 以生成 sitemap.xml，不像 sitemap.ts 那样是实时的。
• 需要额外安装依赖，增加项目体积。

3.3 sitemap.ts vs. next-sitemap 对比

✅ 推荐选择

• 如果你的网站规模较小（小于 50,000 个 URL），并且在 app/ 目录下开发，建议使用 sitemap.ts。
• 如果你的网站是一个大型站点（超过 50,000 个 URL），或者使用 pages/ 目录，建议使用 next-sitemap，可以自动解析目录并生成多个 sitemap.xml。
• 如果你还需要 robots.txt 自动生成，next-sitemap 是更好的选择。

📌 4. 总结

Next.js 提供了 强大的内置 SEO 工具，简化了 SEO 配置：

• ✅ metadata API** 轻松设置 <title>、meta、canonical
• ✅ robots.ts 自动生成 robots.txt，控制爬虫行为
• ✅ sitemap.ts 生成 sitemap.xml，加快搜索引擎索引
• ✅ 多语言 hreflang 轻松管理，提高全球搜索排名

利用 Next.js，你可以 更轻松地管理 SEO，提升网站在搜索引擎中的可见度！🚀