概念

发布于 2026-06-01更新于 2026-07-16

元数据

Next.js 中支持 meta 对象和 generateMetadata() 函数,用于配置页面元数据。

元数据 Metadata

官方给的 Metadata 类型很多,日常使用的如下:

基础 SEO

{
  title,
  description,
  keywords,
  authors,
  creator,
  publisher
}

Open Graph(社交分享)

用来分享到:微信、X/Twitter、Facebook。

{
  openGraph: {
    title,
    description,
    url,
    siteName,
    images,
    locale,
    type,
  }
}

Robots

{
  robots: {
    index: true,
    follow: true,
  }
}

Icons

{
  icons: {
    icon: "/favicon.ico",
    apple: "/apple-touch-icon.png",
  }
}

Canonical

{
  alternates: {
    canonical: "/articles/nextjs"
  }
}

Metadata 对象(静态)

页面元数据是固定的,不依赖任何数据时,直接导出一个对象即可。

import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: "About",
  description: "About us",
};

特点:

  • 构建阶段即可确定
  • 不需要执行任何逻辑
  • 最简单
  • 推荐优先使用

适合:

  • About
  • Contact
  • Privacy
  • Login
  • Dashboard(固定标题)

generateMetadata()(动态)

Metadata 需要计算,就使用函数。例如文章页面:

import type { Metadata } from "next";
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
 
  const { slug } = await params;
 
  const article = await getArticle(slug);
 
  return {
    title: article.title,
    description: article.description,
  };
}

Metadata 来自:

  • URL 参数
  • 数据库
  • CMS
  • API
  • 文件
  • locale

因为需要执行逻辑,所以必须写成函数。

使用原则

静态数据 → metadata 对象

动态数据 → generateMetadata() 函数