2026 年 Next.js 站点的 SEO 优化指南

我正在开发 DocFlow，它是一个完整的 AI 全栈协同文档平台。该项目融合了多个技术栈，包括基于 Tiptap 的富文本编辑器、NestJs 后端服务、AI 集成功能和实时协作。在开发过程中，我积累了丰富的实战经验，涵盖了 Tiptap 的深度定制、性能优化和协作功能的实现等核心难点。

如果你对 AI 全栈开发、Tiptap 富文本编辑器定制或 DocFlow 项目的完整技术方案感兴趣，欢迎加我微信 yunmz777 进行私聊咨询，获取详细的技术分享和最佳实践。

如果你对 OpenClaw 也感兴趣，也欢迎添加我微信，我拉你进交流群

Next.js 是最流行的 React 框架，被广泛用来构建现代 Web 应用，自带不少开发者未必会用到的能力。搜索形态正在从传统搜索转向"零点击搜索"，背后是 Google AI Overview、ChatGPT 等 AI 搜索产品在推动。这些平台会持续抓取站点，用元数据和内容做索引，结构清晰、易于抓取的内容更容易被引用、出现在 AI 结果里。要想在这场变化里站稳，就需要同时为人和 AI 爬虫优化页面与内容。

下面按最佳实践，从页面和内容两方面说说如何做好 SEO 与 GEO。

1. 用 Metadata API 做 SEO

元数据一直负责告诉外界页面的标题和描述。Next.js 用新的 Metadata API 取代了过去的 Head 组件，可以在服务端组件里声明，由服务端渲染输出，爬虫和社交平台抓取时拿到的就是完整、准确的标题与描述，不会出现空白或占位文案。

在 app/layout.tsx 或单页的 layout.tsx 里导出 metadata 对象即可。下面这段示例覆盖了站点标题模板、默认描述、搜索引擎验证、Open Graph 与 Twitter 卡片、以及规范链接。

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    template: "%s",
    default:
      "Texavor - GEO & Content Optimization Platform for Writers, Marketers & Developers",
  },
  description:
    "Build your AI content workflow. Discover topics across ChatGPT and Perplexity, and generate data-backed briefs.",
  verification: {
    google: "R53D-JHFSD93JDhjhds_ei99JFADSF", // 示例用占位，替换为你在 Search Console 获得的验证码
  },
  openGraph: {
    title:
      "Texavor - GEO & Content Optimization Platform for Writers, Marketers & Developers",
    description:
      "Build your AI content workflow. Discover topics across ChatGPT and Perplexity, and generate data-backed briefs.",
    // images: "/easywriteOpenGraph.png",
  },
  twitter: {
    card: "summary_large_image",
    title:
      "Texavor - GEO & Content Optimization Platform for Writers, Marketers & Developers",
    description:
      "Build your AI content workflow. Discover topics across ChatGPT and Perplexity, and generate data-backed briefs.",
    // images: "/easywriteOpenGraph.png",
  },
  alternates: {
    canonical: "/",
  },
};

可以配置的内容包括：title 与 description（当前页的标题和描述）、openGraph（在 Facebook、LinkedIn 等社交平台分享时的预览信息）、twitter（Twitter 卡片类型、图片、标题、描述等）、canonical（规范地址，用于转载或重复内容时指向原始出处，也可以把当前页设为自己的 canonical）、verification（向搜索引擎提交的站长验证标签，会变成 head 里的 meta，可用来在 Google Search Console、Bing Webmaster、Yandex 等平台验证站点）。需要按请求动态生成元数据时，可在同页导出异步函数 generateMetadata，接收 params、searchParams 等参数，返回结构相同的 Metadata 对象即可。

2. 使用服务端渲染（SSR）

爬虫更希望拿到"已经渲染好的"完整 HTML，而不是先看到加载态。用服务端渲染就不会先出一屏 loading，首屏 HTML 里已经包含主要内容，对收录和 AI 抓取都更友好。

Next.js App Router 下有三种常见用法，可按页面特性选一种。

• SSR：每次请求在服务端渲染页面，把带数据的 HTML 直接返回，适合内容经常变的页面（例如带实时数据的仪表盘、个性化推荐）。
• SSG：构建时生成 HTML，之后每次请求都直接返回这份静态页，适合几乎不变的页面，例如法律声明、关于我们、联系我们。
• ISR：在构建时生成并缓存页面，请求时先返回缓存，再通过 revalidate 在指定时间后重新生成，适合博客这类更新有节奏的页面。

如下图所示。

图里把 SSR 每次请求渲染、SSG 构建时生成、ISR 先缓存再按时间重建的差异和适用场景都画出来了。看完可按页面类型选一种。

在页面文件顶部导出 revalidate，即可为该路由开启 ISR。下面的 3600 表示该页最多缓存 1 小时，超过后下次请求会触发重新生成。

export const revalidate = 3600;

除了 SEO，在 Vercel 等平台还能减轻服务器压力、控制成本。静态或 ISR 页面走 CDN，动态请求才回源。

3. 使用结构化数据（Schema 标记）

Schema 标记（结构化数据）是加在页面里的一段代码，用来帮助搜索引擎和问答引擎理解页面含义。它不仅能提升传统搜索表现，对 AI 搜索和 AI 回答的展示也很重要，因此是站点的重要一环。常见有两种形式：JSON-LD（用独立的 script type="application/ld+json" 注入，便于维护和扩展）、Microdata（用 itemscope、itemtype、itemprop 等属性写在 HTML 标签上，可读性和维护性较差）。当前更推荐 JSON-LD。

在页面组件里根据数据构建 JSON-LD 对象，用 dangerouslySetInnerHTML 写入 script 标签。注意把 < 转成 \u003c，避免被解析成 HTML 标签。

interface Product {
  id: string;
  name: string;
  image: string;
  description: string;
}

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await getProduct(id);

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    image: product.image,
    description: product.description,
  };

  return (
    <section>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd).replace(/</g, "\u003c"),
        }}
      />
      {/* 页面其余内容 */}
    </section>
  );
}

Schema 类型可以有很多种。FAQ Schema 适合页面相关常见问题的问答结构。HowTo Schema 适合分步骤教程类页面。Article 与 Author Schema 把内容和作者关联起来，能强化 E-E-A-T（经验、专业、权威、可信）信号，对长文和博客尤其有用。延伸阅读可参考：How to Build Schema Markup for AEO、Common FAQ Schema Mistakes That Hurt Answer Engine Optimization、How to implement JSON-LD in your Next.js application。

4. 优化 Core Web Vitals

Core Web Vitals 是 Google 用来衡量页面体验的指标，主要看加载速度、视觉稳定性和可交互性。常见几个指标是：LCP（Largest Contentful Paint）即最大可见内容（卡片、图片或大段文字）加载完成的时间、CLS（Cumulative Layout Shift）即加载过程中布局发生意外偏移的程度、INP（Interaction to Next Paint）即用户操作（点击、触摸、按键）到页面给出反馈的时间。用 Next.js 的 Image 组件可以自动优化大图，有利于 LCP。

在需要展示图片的组件里引入 next/image，用 src、alt 和 fill（或 width/height）即可。alt 务必填写，对无障碍和图片搜索都有帮助。

import Image from "next/image";

export function ArticleCover({
  image,
  title,
}: {
  image: string;
  title: string;
}) {
  return (
    <div style={{ position: "relative", width: "100%", aspectRatio: "16/9" }}>
      <Image src={image} alt={title} fill />
    </div>
  );
}

使用 next/image 的好处包括：自动压缩图片、懒加载（不可见时不加载，减轻首屏压力）、配合 fill 等属性可适配父容器，方便做响应式布局。在 Vercel 上部署时，next/image 会走 Vercel 的图片优化服务，免费 Hobby 计划每月有 5,000 次优化额度，超出后可能需要升级付费计划。

5. 动态生成 Sitemap

Sitemap 帮助爬虫发现所有可抓取页面，Google Search Console、Bing Webmaster 等都会用它来识别公开页面。在 app 下放一个 sitemap.ts 或 sitemap.js，Next.js 会自动把它当作 sitemap 的路由。这是特殊的 Route Handler，默认会被缓存，除非用了动态 API 或动态配置。

下面示例从 getAllPosts 拉取博客列表，把静态首页、博客索引页和每篇文章的 URL 拼成 sitemap 数组。lastModified、changeFrequency、priority 可按实际更新频率调整。

import type { MetadataRoute } from "next";
import { getAllPosts } from "@/lib/posts";

interface Post {
  slug: string;
  updated_at: string;
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const staticPages: MetadataRoute.Sitemap = [
    {
      url: "https://www.texavor.com",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1.0,
    },
    {
      url: "https://www.texavor.com/blog",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 0.8,
    },
  ];

  const posts = await getAllPosts();
  const postPages: MetadataRoute.Sitemap = posts.map((post: Post) => ({
    url: `https://www.texavor.com/blog/${post.slug}`,
    lastModified: new Date(post.updated_at),
    changeFrequency: "weekly",
    priority: 0.8,
  }));

  return [...staticPages, ...postPages];
}

可以把首页、关于我们等静态页和博客等动态页拼在一起，实现整站 sitemap 的动态生成。上线后可在 Search Console 中提交 sitemap URL，便于搜索引擎更快发现新页面。

常见问题

Next.js 对 SEO 的主要好处是什么？

通过 SSR、SSG、ISR 等渲染方式提升首屏 HTML 完整度和加载性能，并内置动态 sitemap、metadata、generateMetadata 等能力，减少手写 head 和 sitemap 的重复劳动。

如何在 Next.js 里做自定义 sitemap？

在 app 下新增 sitemap.ts 或 sitemap.js，默认导出一个返回 MetadataRoute.Sitemap 数组的异步函数即可。如需使用项目根路径以外的 base URL，可在返回的每条记录里写完整绝对 URL。

Next.js 的 Metadata API 对 SEO 有什么帮助？

可以集中配置 title、meta description、canonical、Open Graph、Twitter 卡片、验证标签等，全部由服务端输出，爬虫和社交爬虫拿到的都是最终 HTML，不会因为客户端才注入而漏抓。

为什么结构化数据对 SEO 和 AI 搜索很重要？

JSON-LD 等结构化数据能把"这是一篇教程、作者是谁、步骤有哪些"等信息显式告诉搜索引擎和 ChatGPT 等 AI 问答平台，它们更准确理解页面内容后，更容易在摘要或回答中引用你的页面。

Core Web Vitals 如何影响 Next.js 站点的 SEO？

它们衡量加载速度、视觉稳定性和交互响应。用 next/image、SSR 或 ISR、以及合理的资源加载策略把 Core Web Vitals 做好，既能提升体验，也有利于排名和 AI 抓取时的"可读性"评估。

小结

在 Next.js 里做好 SEO，需要技术实现和内容结构一起抓。Metadata API、SSR 与 SSG 及 ISR、JSON-LD 结构化数据以及基于 Core Web Vitals 的性能优化，都能让应用更容易被搜索到、体验更好，并适应下一代搜索与 AI 检索。建议从元数据与 sitemap 先做齐，再按页面类型选好渲染策略，最后补上结构化数据和图片优化，逐步迭代即可。