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 主要功能概览

SEO 需求	Next.js 提供的解决方案	作用
标题 <title>和 meta标签	metadata API	设置页面标题、描述等
避免重复 URL（canonical）	metadata API (canonical 字段)	规范化 URL，防止 SEO 权重分散
控制爬取与索引（robots.txt和 meta robots）	robots.ts	设定爬虫访问规则
**自动生成 sitemap.xml	`sitemap.(xml	js
多语言 SEO（hreflang）	metadataAPI (alternates)	多语言优化，确保用户访问正确版本
Open Graph / Twitter Meta	metadataAPI (openGraph / twitter)	提高社交媒体分享效果

---

📌 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️⃣ 标题相关

字段	作用	是否影响 SEO
title	设置页面 <title> 标签	✅ 影响排名
title.default	作为子路由的默认标题	✅ 影响排名
title.template	用于拼接标题（如 `%s	网站名`）
title.absolute	设定不受 title.template 影响的标题	✅ 影响排名

示例：

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

输出

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

---

2️⃣页面描述

字段	作用	是否影响 SEO
description	设置 <meta name="description">，用于搜索引擎结果页摘要	✅ 影响搜索结果 CTR

示例：

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

输出

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

---

3️⃣关键词

字段	作用	是否影响 SEO
keywords	设置 <meta name="keywords">，定义页面的关键词（部分搜索引擎已忽略）	❌ 影响极小

示例：

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

输出

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

---

4️⃣ 搜索引擎爬取策略

字段	作用	是否影响 SEO
robots	控制搜索引擎的索引策略	✅ 影响网页是否被收录

示例：

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）

字段	作用	是否影响 SEO
alternates.canonical	设置 <link rel="canonical">，避免重复内容问题	✅ 影响页面权重

示例：

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

输出

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

---

6️⃣ Open Graph & Twitter 预览

字段	作用	是否影响 SEO
openGraph	定义 Facebook、LinkedIn 等社交媒体的 Open Graph 数据	✅ 增强分享体验
twitter	定义 Twitter/X 分享预览	✅ 增强分享体验

示例：

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 相关元数据

字段	作用	是否影响 SEO
metadataBase	设定 URL 前缀，方便定义绝对路径的 metadata	✅ 影响 URL 结构
icons	网站图标（favicon、Apple Touch Icon 等）	✅ 影响分享体验
manifest	设置 Web App Manifest 文件	❌ 仅影响 PWA
appleWebApp	定义 Apple Web App 相关设置	❌ 仅影响 iOS 设备
appLinks	定义 Android/iOS App 关联链接	❌ 仅影响 App 跳转
facebook	设置 Facebook App ID 或管理员 ID	❌ 仅影响 Facebook
verification	用于 Google、Yandex、Yahoo 站点验证	❌ 仅影响站点所有权认证

---

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', // 仅针对 Googlebotallow: ['/'], // 允许访问所有页面disallow: ['/private/'], // 禁止访问 /private/},{userAgent: ['Applebot', 'Bingbot'], // 适用于 Applebot 和 Bingbotdisallow: ['/'], // 禁止访问所有页面},],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
}

📌可选参数

参数	作用
userAgent	指定爬虫（如 Googlebot、Bingbot），*代表所有爬虫
allow	允许爬取的路径（如 /表示所有路径）
disallow	禁止爬取的路径（如 /private/）
sitemap	指定站点地图的 URL
crawlDelay	设置爬取延迟（秒）
host	指定主机（如 https://example.com）

📌示例：完整 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: 10Sitemap: 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 * 50000const end = start + 50000const 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.txtsitemapSize: 5000, // 拆分 sitemap.xmlchangefreq: '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 对比

特性	**Next.js sitemap.ts	**next-sitemap
是否需要安装依赖	❌ 不需要	✅ 需要 (next-sitemap)
是否自动更新	✅ 实时生成	❌ 需要 npx运行
是否支持 robots.txt	❌ 需手动写 robots.ts	✅ 自动生成
是否支持 hreflang	✅ 支持	✅ 支持
是否适合大站点	✅ 可拆分多个 sitemap	✅ 更适合，自动拆分
是否支持 next export	❌ 仅支持 app/目录	✅ 适用于 pages/目录
是否支持 sitemap index	✅ 通过 generateSitemaps	✅ 自动拆分

✅ 推荐选择

• 如果你的网站规模较小（小于 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，提升网站在搜索引擎中的可见度！🚀