Next.js SEO：渲染方式、元数据、站点地图与能获得排名的博客

Next.js SEO 的核心在于为每条路由做出正确选择：哪些内容在服务器端渲染，哪些内容被缓存，哪些内容在任何脚本运行之前就出现在 HTML 中。Google 在 JavaScript SEO 基础知识中说明，它分三个阶段处理 JavaScript 应用（抓取、渲染、编入索引），并指出服务器端渲染或预渲染"仍然是个好主意"。Next.js 默认就是这样做的。本指南介绍 App Router（Next.js 13 及以上版本），并附有旧版 Pages Router 的说明。

Next.js 对 SEO 友好吗？

是的。传统的客户端渲染 React 应用会发送一个几乎为空的 HTML 文件，在浏览器中构建页面；搜索引擎必须渲染它，而许多机器人从不渲染。Next.js 在服务器端渲染 React，因此 HTML 响应中已经包含标题、正文、链接和元数据。我们的 JavaScript SEO 指南解释了这一差异为何对索引至关重要。

在 App Router 中，组件默认是 Server Components。即使标记了 'use client' 的组件，也会在服务器端预渲染为 HTML。薄弱环节在于数据：凡是在 useEffect 中获取、或点击之后才加载的内容，都不会出现在初始 HTML 中。请在 Server Components 中获取内容，把客户端组件留给交互功能。

SSG、SSR、ISR 还是 CSR：应该选择哪种渲染方式？

Next.js 允许按路由混用不同模式。这一选择会影响内容新鲜度、速度以及爬虫接收到的内容。

Next.js 的 ISR 文档列出了它的优势："无需重新构建整个网站"即可更新静态内容，并能处理大量页面而不必忍受漫长的构建时间。带有 export const revalidate = 3600 的路由最多每小时重新生成一次；如需精确控制，可在内容变化时调用 revalidatePath 或 revalidateTag。ISR 不支持静态导出（output: 'export'）。对于必须保持客户端渲染的应用，我们的单页应用 SEO 指南介绍了替代方案。

如何用 Metadata API 设置标题、描述和规范链接？

在 App Router 中，Metadata API 取代了 next/head。根据 Next.js 元数据文档，你可以从 layout 或 page 导出一个静态 metadata 对象；当值取决于数据时，则导出 generateMetadata 函数，Next.js 会自动生成 head 标签。两者都只能在 Server Components 中使用。

export async function generateMetadata({ params }) {
  const { slug } = await params
  const post = await getPost(slug)
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `/blog/${slug}` },
    openGraph: { images: [post.cover] },
  }
}

五条规则可以避免大多数问题：

• 设置 metadataBase：在根 layout 中填写生产域名，让相对规范链接和 Open Graph 网址变为绝对地址。
• 使用标题模板：在根 layout 中设置如 '%s | 品牌' 的模板，让每个页面拥有唯一标题，品牌名只出现一次。
• 为每个可索引页面设置指向自身的规范链接：通过 alternates.canonical 设置，可防止网址参数和末尾斜杠造成的重复。我们关于规范标签的词条总结了相关规则。
• 为每个页面撰写描述：在 generateMetadata 中根据内容生成，绝不使用全站统一的默认值。
• 添加 Open Graph 图片：在路由目录中放置 opengraph-image 文件，并用 Open Graph 预览工具检查效果。

在动态页面上，Next.js 会在首批字节之后以流式方式发送元数据，以加快渲染。文档说明，对于期望在 head 中读取元数据的机器人（通过 user agent 识别，示例包括 Bingbot、Twitterbot 和 Slackbot），流式传输会被禁用，并可通过 htmlLimitedBots 选项自定义名单。如果你关心的爬虫不在其中，请自行添加。在 Pages Router 中，对应的是 next/head 的 Head 组件，并用 key 属性避免重复标签。

如何在 Next.js 中生成 sitemap.xml 和 robots.txt？

两者都是 app 目录中的特殊文件。导出一个返回网址列表的函数的 sitemap.ts 文件会变成 /sitemap.xml；robots.ts 文件会变成 /robots.txt。sitemap 参考文档指出，该文件默认会被缓存，而 Google 的上限是每个站点地图 50,000 个网址；超过这个数量时，generateSitemaps 会把它拆分成多个文件。

import type { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getPosts()
  return posts.map((p) => ({
    url: `https://example.com/blog/${p.slug}`,
    lastModified: p.updatedAt,
  }))
}

只收录规范的、可索引且返回 200 的网址，并在 lastModified 中填写真实的更新日期。对于多语言网站，站点地图还支持 alternates.languages。在 robots.ts 中指向站点地图，并决定允许哪些 AI 机器人抓取网站；我们关于 AI 爬虫的 robots.txt 的文章列出了这些机器人。格式详情请见我们关于 XML 站点地图的词条。

哪些技术细节最常破坏 Next.js 网站的 SEO？

这些问题都会降低可抓取性：爬虫必须能通过链接发现每个网址，并获得干净的状态码。

如何在 Next.js 中添加结构化数据？

Next.js 文档建议直接在页面或 layout 组件中，用类型为 application/ld+json 的 script 标签渲染 JSON-LD，数据来源与页面相同，并在序列化后的 JSON 中转义 < 字符以防止注入。由于它在服务器端渲染，Google 和 AI 爬虫都能在原始 HTML 中看到它。文章使用 Article（或 BlogPosting），根 layout 使用 Organization，深层页面使用 BreadcrumbList，电商页面使用 Product。Schema 生成器可以提供一个有效的起始代码块，然后用 Google 的富媒体搜索结果测试验证页面。

如何让 Next.js 网站的速度满足 Core Web Vitals？

Next.js 自带的组件可以解决导致 Core Web Vitals 不佳的常见原因：

• next/image：调整图片尺寸，提供现代格式，默认延迟加载，并要求指定尺寸，从而避免布局偏移。把首屏主图标记为优先加载，避免它被延迟（它通常就是 Largest Contentful Paint 元素）。
• next/font：在你自己的域名上托管字体，避免字体延迟替换造成的偏移。
• next/script：按策略（afterInteractive、lazyOnload）加载第三方脚本，而不是阻塞页面。
• 减少客户端 JavaScript：每个 'use client' 边界都会增加需要下载和水合的代码，拖累移动端的 Interaction to Next Paint。

要衡量真实用户数据，而不只看实验室分数：我们的 PageSpeed Insights 指南介绍了如何解读两者。

如何运营一个能获得排名的 Next.js 博客？

Next.js 博客通常有三种形式：代码仓库中的 MDX 或 Markdown 文件（简单，但每篇文章都需要一次提交和部署）、在 Server Components 中查询的无头 CMS（Sanity、Contentful、Strapi、Payload），或从外部工具接收文章的发布 webhook。三种方式的 SEO 模式相同：一个动态路由 app/blog/[slug]，配合 generateStaticParams、generateMetadata 和 ISR，用同一数据源生成站点地图，并有一个链接到所有文章的索引页。

webhook 让发布脱离部署流程。Route Handler 接收文章、保存，然后重新验证受影响的页面：

// app/api/publish/route.ts
import { revalidatePath } from 'next/cache'

export async function POST(request) {
  if (request.headers.get('authorization') !== `Bearer ${process.env.PUBLISH_SECRET}`) {
    return new Response('Unauthorized', { status: 401 })
  }
  const article = await request.json()
  await savePost(article)
  revalidatePath('/blog')
  revalidatePath(`/blog/${article.slug}`)
  return Response.json({ ok: true })
}

Next.js SEO 如何帮助你被 AI 助手引用？

服务器端渲染是 GEO（生成式引擎优化）的第一个前提。Vercel 于 2024 年 12 月发布的分析 The rise of the AI crawler 发现，"目前没有任何主要 AI 爬虫会渲染 JavaScript"，点名了 GPTBot、ChatGPT-User、OAI-SearchBot、ClaudeBot 和 PerplexityBot，并统计到一个月内其网络上有 5.69 亿次 GPTBot 请求和 3.7 亿次 Claude 请求。预渲染了正文、标题和 JSON-LD 的 Next.js 页面对它们全部可读；客户端渲染的页面则不然。

第二个前提是值得引用的内容：每个章节回答一个问题，附带来源、数据和清晰定义，并定期发布。这正是我们的产品 Sorank 自动完成的部分。Sorank 是一款 autopilot 模式的 SEO 与 GEO 软件：它会找到你的关键词，其博客文章生成器每月撰写 20、60 或 120 篇文章，附带来源、内部链接和图片。在 Next.js 网站上，它通过安装页面所述的自定义 webhook 接入：你的 Route Handler 接收每篇文章、保存并重新验证博客。之后，AI 提及追踪每周检查 ChatGPT、Claude 和 Gemini 是否引用你的品牌。

一句话总结：预渲染每个希望被找到的页面，在服务器端定义元数据，并用与内容相同的数据源生成站点地图。Next.js 提供工具，排名和 AI 引用则取决于你用它发布的内容。如需持续为 Next.js 博客提供文章，请查看 Sorank 的方案，每月 49 美元起，可免费试用 3 天。