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.(xmljs多语言 SEO（hreflang）metadataAPI (alternates)多语言优化，确保用户访问正确版本Open Graph / Twitter MetametadataAPI (openGraph
/ twitter)进步交际媒体分享效果

---

📌 2. 在 Next.js 中实现 SEO

2.1 内置 metadata API（元数据 API）

Next.js 13+ 引入了 metadata API，更换了 next/head，可以在 layout.tsx 或 page.tsx 中直接界说 SEO 相干的元数据。
示例

1. import type { Metadata } from 'next'
3. export const metadata: Metadata = {
4.   title: 'Next.js SEO Optimization',
5.   description: 'Learn how to optimize Next.js applications for SEO.',
6.   keywords: ['Next.js', 'SEO', 'optimization'],
7.   robots: {
8.     index: true, // 允许搜索引擎索引
9.     follow: true, // 允许搜索引擎跟踪链接
10.   },
11.   alternates: {
12.     canonical: 'https://example.com/seo',
13.   },
14.   openGraph: {
15.     title: 'Next.js SEO',
16.     description: 'A comprehensive guide to SEO in Next.js',
17.     url: 'https://example.com/seo',
18.     images: [
19.       {
20.         url: 'https://example.com/og-image.jpg',
21.         width: 1200,
22.         height: 630,
23.       },
24.     ],
25.     type: 'website',
26.   },
27.   twitter: {
28.     card: 'summary_large_image',
29.     title: 'Next.js SEO',
30.     description: 'A comprehensive guide to SEO in Next.js',
31.     images: ['https://example.com/twitter-card.jpg'],
32.   },
33. }

复制代码

2.1.1详细字段剖析

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

1. export const metadata: Metadata = {
2.   title: {
3.     template: '%s | My Website',
4.     default: 'My Website',
5.   },
6. }

复制代码

输出

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

复制代码

---

2️⃣页面形貌
字段作用是否影响 SEOdescription设置 <meta name="description">，用于搜刮引擎效果页择要✅ 影响搜刮效果 CTR示例：

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

复制代码

输出

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

复制代码

---

3️⃣关键词
字段作用是否影响 SEOkeywords设置 <meta name="keywords">，界说页面的关键词（部门搜刮引擎已忽略）❌ 影响极小示例：

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

复制代码

输出

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

复制代码

---

4️⃣ 搜刮引擎爬取战略
字段作用是否影响 SEOrobots控制搜刮引擎的索引战略✅ 影响网页是否被收录示例：

1. export const metadata: Metadata = {
2.   robots: {
3.     index: true,
4.     follow: true,
5.     noimageindex: false,
6.     googleBot: {
7.       index: true,
8.       follow: true,
9.       'max-image-preview': 'large',
10.     },
11.   },
12. }

复制代码

输出

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

复制代码

---

5️⃣ 规范 URL（Canonical）
字段作用是否影响 SEOalternates.canonical设置 <link rel="canonical">，克制重复内容标题✅ 影响页面权重示例：

1. export const metadata: Metadata = {
2.   alternates: {
3.     canonical: 'https://example.com/seo',
4.   },
5. }

复制代码

输出

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

复制代码

---

6️⃣ Open Graph & Twitter 预览
字段作用是否影响 SEOopenGraph界说 Facebook、LinkedIn 等交际媒体的 Open Graph 数据✅ 增强分享体验twitter界说 Twitter/X 分享预览✅ 增强分享体验示例：

1. export const metadata: Metadata = {
2.   openGraph: {
3.     title: 'Next.js SEO',
4.     description: 'A guide to SEO in Next.js',
5.     url: 'https://example.com/seo',
6.     images: [
7.       { url: 'https://example.com/og-image.jpg', width: 1200, height: 630 },
8.     ],
9.     type: 'website',
10.   },
11.   twitter: {
12.     card: 'summary_large_image',
13.     title: 'Next.js SEO',
14.     description: 'A guide to SEO in Next.js',
15.     images: ['https://example.com/twitter-card.jpg'],
16.   },
17. }

复制代码

输出

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

复制代码

---

7️⃣ 其他 SEO 相干元数据
字段作用是否影响 SEOmetadataBase设定 URL 前缀，方便界说绝对路径的 metadata✅ 影响 URL 布局icons网站图标（favicon、Apple Touch Icon 等）✅ 影响分享体验manifest设置 Web App Manifest 文件❌ 仅影响 PWAappleWebApp界说 Apple Web App 相干设置❌ 仅影响 iOS 装备appLinks界说 Android/iOS App 关联链接❌ 仅影响 App 跳转facebook设置 Facebook App ID 或管理员 ID❌ 仅影响 Facebookverification用于 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

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

复制代码

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

1. User-Agent: *
2. Allow: /
3. Disallow: /private/
4. 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

1. import type { MetadataRoute } from 'next'
3. export default function robots(): MetadataRoute.Robots {
4.   return {
5.     rules: [
6.       { userAgent: '*', allow: '/' }, // 允许所有爬虫访问整个网站
7.       { userAgent: 'Googlebot', disallow: '/private/' }, // Googlebot 不能访问 /private/
8.     ],
9.     sitemap: 'https://example.com/sitemap.xml', // 指定 sitemap 位置
10.   }
11. }

复制代码

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

1. User-Agent: *
2. Allow: /
3. User-Agent: Googlebot
4. Disallow: /private/
5. 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 高级用法

如果你须要 对差异搜刮引擎设置差异规则，可以 通报数组 让多个爬虫遵照差异的规则。
📌 示例：针对差异搜刮引擎设置差异的爬取规则

1. import type { MetadataRoute } from 'next'
3. export default function robots(): MetadataRoute.Robots {
4.   return {
5.     rules: [
6.       {
7.         userAgent: 'Googlebot', // 仅针对 Googlebot
8.         allow: ['/'], // 允许访问所有页面
9.         disallow: ['/private/'], // 禁止访问 /private/
10.       },
11.       {
12.         userAgent: ['Applebot', 'Bingbot'], // 适用于 Applebot 和 Bingbot
13.         disallow: ['/'], // 禁止访问所有页面
14.       },
15.     ],
16.     sitemap: 'https://example.com/sitemap.xml',
17.   }
18. }

复制代码

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

1. User-Agent: Googlebot
2. Allow: /
3. Disallow: /private/
5. User-Agent: Applebot
6. Disallow: /
8. User-Agent: Bingbot
9. Disallow: /
11. Sitemap: https://example.com/sitemap.xml

复制代码

✅ 实用场景

• 你渴望 差异搜刮引擎有差异的爬取规则。
  
• 你想 屏蔽某些爬虫（如 Applebot、Bingbot）。
  
• 你渴望 Googlebot 访问全部内容，但屏蔽 /private/ 目次。
  

---

2.2.5 robots.ts 的完备规则

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

1. type Robots = {
2.   rules:
3.   | {
4.     userAgent?: string | string[]
5.     allow?: string | string[]
6.     disallow?: string | string[]
7.     crawlDelay?: number
8.   }
9.   | Array<{
10.     userAgent: string | string[]
11.     allow?: string | string[]
12.     disallow?: string | string[]
13.     crawlDelay?: number
14.   }>
15.   sitemap?: string | string[]
16.   host?: string
17. }

复制代码

📌可选参数
参数作用userAgent指定爬虫（如 Googlebot、Bingbot），*代表全部爬虫allow允许爬取的路径（如 /表现全部路径）disallow克制爬取的路径（如 /private/）sitemap指定站点舆图的 URLcrawlDelay设置爬取延长（秒）host指定主机（如 https://example.com）📌示例：完备 robots.ts

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

复制代码

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

1. User-Agent: *
2. Allow: /
4. User-Agent: Googlebot
5. Disallow: /private/
6. Crawl-Delay: 10
8. Sitemap: https://example.com/sitemap.xml
9. 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

1. <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
2.   <url>
3.     <loc>https://example.com</loc>
4.     <lastmod>2023-01-01</lastmod>
5.     <changefreq>weekly</changefreq>
6.     <priority>1.0</priority>
7.   </url>
8.   <url>
9.     <loc>https://example.com/blog</loc>
10.     <lastmod>2023-01-01</lastmod>
11.     <changefreq>daily</changefreq>
12.     <priority>0.8</priority>
13.   </url>
14. </urlset>

复制代码

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

1. <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
2.   <url>
3.     <loc>https://example.com</loc>
4.     <lastmod>2023-01-01</lastmod>
5.     <changefreq>weekly</changefreq>
6.     <priority>1.0</priority>
7.   </url>
8.   <url>
9.     <loc>https://example.com/blog</loc>
10.     <lastmod>2023-01-01</lastmod>
11.     <changefreq>daily</changefreq>
12.     <priority>0.8</priority>
13.   </url>
14. </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

1. import type { MetadataRoute } from 'next'
3. export default function sitemap(): MetadataRoute.Sitemap {
4.   return [
5.     {
6.       url: 'https://example.com',
7.       lastModified: new Date(),
8.       changeFrequency: 'weekly',
9.       priority: 1.0,
10.     },
11.     {
12.       url: 'https://example.com/blog',
13.       lastModified: new Date(),
14.       changeFrequency: 'daily',
15.       priority: 0.8,
16.     },
17.   ]
18. }

复制代码

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

1. <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
2.   <url>
3.     <loc>https://example.com</loc>
4.     <lastmod>2023-01-01</lastmod>
5.     <changefreq>weekly</changefreq>
6.     <priority>1.0</priority>
7.   </url>
8.   <url>
9.     <loc>https://example.com/blog</loc>
10.     <lastmod>2023-01-01</lastmod>
11.     <changefreq>daily</changefreq>
12.     <priority>0.8</priority>
13.   </url>
14. </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

1. import type { MetadataRoute } from 'next'
3. export default function sitemap(): MetadataRoute.Sitemap {
4.   return [
5.     {
6.       url: 'https://example.com',
7.       lastModified: new Date(),
8.       alternates: {
9.         languages: {
10.           'en': 'https://example.com/en',
11.           'de': 'https://example.com/de',
12.         },
13.       },
14.     },
15.     {
16.       url: 'https://example.com/about',
17.       lastModified: new Date(),
18.       alternates: {
19.         languages: {
20.           'en': 'https://example.com/en/about',
21.           'de': 'https://example.com/de/about',
22.         },
23.       },
24.     },
25.   ]
26. }

复制代码

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

1. <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
2.   <url>
3.     <loc>https://example.com</loc>
4.     <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en"/>
5.     <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de"/>
6.     <lastmod>2023-01-01</lastmod>
7.   </url>
8.   <url>
9.     <loc>https://example.com/about</loc>
10.     <xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/about"/>
11.     <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/about"/>
12.     <lastmod>2023-01-01</lastmod>
13.   </url>
14. </urlset>

复制代码

✅ 作用

• 资助搜刮引擎正确索引差异语言版本的 URL。
  
• 克制重复内容标题（canonical + hreflang）。
  
• 自动维护多语言站点舆图，无需手动管理。
  

---

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

如果你的网站包罗 大量页面（比方电商、博客、论坛等），发起 拆分 sitemap.xml，利用 generateSitemaps 方法。
📌示例：为大规模站点天生多个 sitemap.xml

1. import type { MetadataRoute } from 'next'
2. import { BASE_URL } from '@/app/lib/constants'
4. export async function generateSitemaps() {
5.   return [{ id: 0 }, { id: 1 }, { id: 2 }]
6. }
8. export default async function sitemap({ id }: { id: number }): Promise<MetadataRoute.Sitemap> {
9.   const start = id * 50000
10.   const end = start + 50000
11.   const products = await getProducts(`SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`)
13.   return products.map((product) => ({
14.     url: `${BASE_URL}/product/${product.id}`,
15.     lastModified: product.date,
16.   }))
17. }

复制代码

📌 访问 /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

1. npm install next-sitemap

复制代码

📌 设置 next-sitemap.config.js

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

复制代码

📌 运行下令，天生 sitemap.xml

1. npx next-sitemap

复制代码

📌 天生的 sitemap.xml

1. <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
2.   <sitemap>
3.     <loc>https://example.com/sitemap-0.xml</loc>
4.   </sitemap>
5.   <sitemap>
6.     <loc>https://example.com/sitemap-1.xml</loc>
7.   </sitemap>
8. </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，提升网站在搜刮引擎中的可见度！🚀

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告