动态元数据生成：让机器读懂你的页面

元数据决定可见性

你建了一个网站。内容很好，功能完善。但在搜索结果里，它显示为"无标题"。在社交平台分享时，没有预览图，只有一个干瘪的链接。

问题不在内容本身，而在机器看不懂你在说什么。

搜索引擎爬虫、社交平台的爬虫、AI 系统，它们都需要结构化的元数据来理解页面。标题是什么？描述是什么？这个页面有其他语言版本吗？作者是谁？

在 Next.js 中，generateMetadata 函数就是你和这些机器对话的接口。

动态生成的必要性

元数据可以写死在 HTML 里。但当你有多语言支持、动态路由、个性化内容时，写死就不够了。

一个博客有几十篇文章，每篇文章的标题、描述、作者都不同。一个国际化网站有五种语言，每种语言的元数据都要单独配置。一个电商网站有成千上万个商品页，每个商品的 OpenGraph 图片都不一样。

动态生成元数据让你在服务端根据请求参数（路由、语言、用户状态）生成对应的元数据。

export async function generateMetadata({
  params: { locale }
}: {
  params: { locale: string }
}): Promise<Metadata> {
  const localeMetadata = metadata[locale];

  return {
    title: localeMetadata.title,
    description: localeMetadata.description,
    keywords: localeMetadata.keywords,
    metadataBase: new URL('https://example.com'),
    alternates: {
      canonical: `/${locale}`,
      languages: {
        'en': '/en',
        'zh-CN': '/zh-CN',
        'ja': '/ja',
      }
    },
    openGraph: {
      title: localeMetadata.title,
      description: localeMetadata.description,
      url: `https://example.com/${locale}`,
      images: ['/og-image.jpg'],
      locale: locale,
      type: 'website',
    },
    twitter: {
      card: 'summary_large_image',
      images: ['/twitter-card.jpg'],
    },
  };
}

这段代码在每次请求时执行，根据当前语言环境生成对应的元数据。用户访问 /en，看到英文标题。访问 /zh-CN，看到中文标题。搜索引擎抓取不同路径，索引不同语言版本。

关键字段的作用

title 和 description 是最基础的。它们出现在搜索结果的标题和摘要里，也是用户决定是否点击的第一印象。

metadataBase 定义了基础 URL。当你在 openGraph.images 里写 ['/og-image.jpg'] 时，Next.js 会把它解析成 https://example.com/og-image.jpg。没有 metadataBase，相对路径无法正确解析。

alternates 告诉搜索引擎这个页面有其他语言版本。canonical 指向标准 URL，避免重复内容问题。languages 列出所有语言及其路径，让 Google 为不同地区的用户显示对应语言的版本。

openGraph 和 twitter 决定了社交分享时的预览效果。当有人把你的页面链接分享到 Facebook、LinkedIn、Twitter 时，平台会抓取这些元数据，生成带图片、标题、描述的预览卡片。没有这些字段，分享链接只会显示为纯文本 URL。

robots 控制搜索引擎行为。index: true 表示允许索引，follow: true 表示允许跟踪页面内的链接。如果你有后台管理页面、隐私内容、重复页面，可以设置 index: false 来避免被搜索引擎收录。

元数据是承诺

元数据不只是技术配置。它是你对外界的承诺。

你在 description 里写什么，就告诉搜索引擎这个页面是关于什么的。你在 openGraph.image 里放什么图，就决定了别人分享你的链接时会看到什么。

这些信息会被复制、转发、索引、引用。它们的生命周期远远超过页面本身。

所以动态生成元数据时，不只是填写字段。而是要问：这个页面的本质是什么？我想让机器怎么理解它？我想让看到分享链接的人得到什么印象？

元数据是你和机器的对话，也是你和未来读者的第一次见面。