SEO 优化：元数据 (Metadata) API 和站点地图 (Sitemap) 生成

作者：码力无边

我们已经构建了一个功能完备、性能卓越、支持多语言的 Next.js 应用。现在，是时候让它走向世界，被更多人发现了。在数字世界中，被发现的主要途径就是搜索引擎 ，如 Google, Bing, Baidu 等。搜索引擎优化 (SEO) 是一系列旨在提升网站在搜索引擎结果页 (SERP) 中自然排名的技术和策略。

一个良好 SEO 基础的网站，意味着更多的自然流量、更高的品牌曝光度和潜在的商业成功。Next.js 从诞生之初就将 SEO 放在了核心位置，其服务端渲染 (SSR) 和静态站点生成 (SSG) 的能力，确保了搜索引擎爬虫可以轻松地抓取和索引你网站的完整 HTML 内容。

在 App Router 时代，Next.js 进一步提供了一套强大而灵活的元数据 (Metadata) API，让你能够以一种声明式、可维护的方式，精细化地控制每个页面的 SEO 相关信息。

什么是元数据 (Metadata)？

元数据是"关于数据的数据"。在网页的上下文中，它指的是存放在 HTML <head> 标签中的信息，这些信息虽然不直接显示在页面上，但对浏览器、搜索引擎和社交媒体平台至关重要。

关键的元数据标签包括：

<title>: 页面标题，显示在浏览器标签页和搜索结果中，是 SEO 最重要的因素之一。
<meta name="description" ...>: 页面描述，通常会显示在搜索结果的标题下方，吸引用户点击。
<meta property="og:title" ...> (Open Graph): 专门为社交媒体（如 Facebook, Twitter）分享时准备的标题。
<meta property="og:image" ...>: 社交媒体分享时显示的预览图。
<link rel="canonical" ...>: 指定页面的"权威"版本，避免因 URL 参数等问题导致的内容重复。

Next.js 的元数据 API

App Router 提供了两种主要方式来定义元数据：

1. 静态元数据 (Static Metadata)

对于元数据内容是固定的页面（如"关于我们"、"联系我们"），你可以直接在 page.tsx 或 layout.tsx 文件中导出一个名为 metadata 的对象。

app/about/page.tsx

tsx 复制代码

import type { Metadata } from 'next';

// 导出一个 metadata 对象
export const metadata: Metadata = {
  title: '关于我们 - 我的博客',
  description: '了解我们的团队和使命，以及我们如何通过技术分享知识。',
  keywords: ['Next.js', '博客', 'Web开发', '关于我们'],
  openGraph: {
    title: '关于我们 - 我的博客',
    description: '了解我们的团队和使命。',
    images: [
      {
        url: 'https://www.myblog.com/images/about-og.png', // 必须是绝对路径
        width: 1200,
        height: 630,
      },
    ],
  },
};

export default function AboutPage() {
  return <h1>关于我们页面</h1>;
}

优势：简单、直观，Next.js 可以在构建时就分析这些元数据，并进行优化。Metadata 类型由 Next.js 提供，带来了极佳的类型安全和自动补全。

2. 动态元数据 (Dynamic Metadata)

对于内容动态生成的页面（如博客文章详情页、产品页），元数据（如标题、描述）也需要根据具体内容动态生成。为此，你可以导出一个名为 generateMetadata 的 async 函数。

这个函数接收与页面组件相同的 props（包含 params 和 searchParams），允许你根据路由参数获取数据并生成元数据。

app/posts/[slug]/page.tsx

tsx 复制代码

import type { Metadata, ResolvingMetadata } from 'next';
import { getPostBySlug } from '@/lib/api'; // 假设的 API 函数

type Props = {
  params: { slug: string };
};

// 导出一个 generateMetadata 函数
export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const slug = params.slug;
  const post = await getPostBySlug(slug);

  if (!post) {
    return {
      title: '文章未找到',
    };
  }

  // 可选地：可以访问父级布局中解析出的元数据
  // const previousImages = (await parent).openGraph?.images || [];

  return {
    title: `${post.title} | 我的博客`,
    description: post.excerpt, // 文章摘要
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.featuredImage.url, /* ...previousImages */],
    },
  };
}

export default async function PostPage({ params }: Props) {
  const post = await getPostBySlug(params.slug);
  // ... 页面渲染逻辑 ...
}

关键点：

数据获取复用 ：generateMetadata 和页面组件是独立运行的。Next.js 足够智能，会自动对相同的 fetch 请求进行去重 (deduping) ，所以你无需担心 getPostBySlug(slug) 会被调用两次。
元数据继承 ：元数据会从根布局开始，向下层页面和布局合并和覆盖 。generateMetadata 中的 parent 参数允许你访问并扩展上层定义的元数据。

生成站点地图 (Sitemap)

站点地图 (sitemap.xml) 是一个 XML 文件，它列出了你网站上所有希望搜索引擎索引的重要页面。这有助于搜索引擎更高效、更全面地发现你网站的内容，特别是对于结构复杂或内容更新频繁的网站。

Next.js App Router 使得生成站点地图变得异常简单。你只需在 app 目录下创建一个 sitemap.ts (或 .js) 文件。

app/sitemap.ts

ts 复制代码

import { MetadataRoute } from 'next';
import { getAllPosts } from '@/lib/api'; // API 函数：获取所有文章

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://www.myblog.com';

  // 获取所有动态路由，例如博客文章
  const posts = await getAllPosts();
  const postUrls = posts.map((post) => ({
    url: `${baseUrl}/posts/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }));

  // 添加静态路由
  const staticUrls = [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'yearly' as const,
      priority: 1,
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly' as const,
      priority: 0.5,
    },
  ];

  return [...staticUrls, ...postUrls];
}

工作原理：

导出一个默认的 async 函数，它必须返回一个 MetadataRoute.Sitemap 类型的数组。
在构建时 (npm run build)，Next.js 会执行这个函数，并根据其返回的数组在 .next/server 目录下自动生成一个 sitemap.xml 文件。
你需要提供 url (必需)，并可以选填 lastModified, changeFrequency, priority 等字段来为搜索引擎提供更多线索。

现在，你可以在 https://www.myblog.com/sitemap.xml 访问到你的站点地图，并将其提交到 Google Search Console 等站长工具中。

总结

SEO 是一个持续的过程，但拥有一个坚实的技术基础是成功的先决条件。Next.js App Router 通过其强大的元数据 API 和内置的站点地图生成功能，为你提供了世界级的 SEO 技术基础。

SEO 优化清单：

为每个页面定义有意义的 title 和 description ：使用静态 metadata 对象处理静态页面，使用动态 generateMetadata 函数处理动态页面。
配置 Open Graph 元数据 ：为社交媒体分享提供丰富的预览（og:title, og:description, og:image）。
创建并提交 sitemap.xml ：在 app/sitemap.ts 中列出你所有的重要页面，帮助搜索引擎发现你的内容。
善用语义化 HTML ：在你的组件中使用 <h1>, <article>, <nav> 等语义化标签，这有助于搜索引擎理解你的页面结构。
确保网站性能：利用我们之前学到的所有优化技巧（图片、字体、脚本优化），因为页面加载速度是 Google 排名的一个重要因素。

通过实施这些策略，你的 Next.js 应用将为在搜索引擎中获得良好表现打下坚实的基础。

在下一篇文章中，我们将讨论如何处理应用中不可避免的"意外"------错误。我们将学习如何创建自定义的错误页面（如 404 Not Found）以及如何使用错误边界来优雅地处理渲染错误。敬请期待！