Next.js 搜索引擎优化（SEO）——元数据配置详解

发表于 2025-08-11

路由元数据（Metadata API）

Next.js 中的 元数据 API 是一个非常强大的功能，它允许我们为每个页面定义元数据，从而在被 搜索引擎索引 或 社交平台分享 时，有更好的展示效果。

在 Next.js 中使用元数据的两种方式

你可以在 layout.tsx 或 page.tsx 中定义元数据，方式有两种：

静态元数据对象
动态的 generateMetadata 函数

元数据规则

layout.tsx 和 page.tsx 都可以导出元数据：
- 布局元数据（layout）会应用到该布局下的所有页面
- 页面元数据（page）只应用于该页面
元数据遵循 自上而下 的顺序，从根布局开始
当多个层级都定义了相同字段时，会合并元数据：
- 页面元数据 的优先级高于 布局元数据

静态元数据对象示例

// page.tsx
export const metadata = {
  title: '首页',
  description: '这是网站的首页描述',
};

动态生成元数据示例

// page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const id = params.productId;

  return {
    title: `产品 ${id}`,
    description: `这是产品 ${id} 的详情页`,
  };
}

注意：

同一路由不能同时导出 metadata 对象和 generateMetadata 函数
客户端组件（带 “use client”）无法使用元数据 API

元数据合并规则

假设：

根布局 app/layout.tsx：
- export const metadata = { title: ‘网站’ };
页面 app/about/page.tsx：
- export const metadata = { title: ‘关于我们’ };

最终页面标题为 “关于我们”，因为页面元数据优先级更高。

元数据 title 字段的高级用法

title 可以是字符串或对象：


import { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: '默认标题',         // 没有设置时使用
    template: '%s | 安全生产',   // 模板格式：页面标题 | 安全生产
    absolute: '',               // 绝对覆盖，优先级最高
  },
  description: '页面描述内容',
};

总结

静态或动态二选一
页面元数据优先级最高
元数据从根到叶子合并

0%