SEO炼金术4-Next.js-SEO-全攻略

2025-02-26 约 4841 字预计阅读 10 分钟

https://bing.ee123.net/img/rand?artid=145887038

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` ）	`metadata` API ( `alternates` )	多语言优化，确保用户访问正确版本
Open Graph / Twitter Meta	`metadata` API ( `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', // 仅针对 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
}

📌可选参数

参数	作用
`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: 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` 对比

特性	**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，提升网站在搜索引擎中的可见度 ！🚀

目录

SEO炼金术4-Next.js-SEO-全攻略

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

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

📌 2. 在 Next.js 中实现 SEO

2.1 内置 metadata API（元数据 API）

2.1.1详细字段解析

2.1.2 Metadata API 最佳实践

2.2 生成 robots.txt 文件

2.2.1 使用静态 robots.txt

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

2.2.3 robots.ts 的存放位置

2.2.4 robots.ts 高级用法

2.2.5 robots.ts 的完整规则

2.3 生成 sitemap.xml

2.3.1 使用静态 sitemap.xml

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

2.3.3 sitemap.ts 的存放位置

2.3.4 生成多语言 sitemap.xml

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

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

3.1 Next.js 内置 sitemap.ts

3.2 next-sitemap

3.3 sitemap.ts vs. next-sitemap 对比

📌 4. 总结

2.1 内置 `metadata` API（元数据 API）

2.2 生成 `robots.txt` 文件

2.2.1 使用静态 `robots.txt`

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

2.2.3 `robots.ts` 的存放位置

2.2.4 `robots.ts` 高级用法

2.2.5 `robots.ts` 的完整规则

2.3 生成 `sitemap.xml`

2.3.1 使用静态 `sitemap.xml`

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

2.3.3 `sitemap.ts` 的存放位置

2.3.4 生成多语言 `sitemap.xml`

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

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

3.1 Next.js 内置 `sitemap.ts`

3.2 `next-sitemap`

3.3 `sitemap.ts` vs. `next-sitemap` 对比