编辑“︁Next.js元数据管理”︁（章节）

= Next.js元数据管理 =

== 介绍 ==
'''元数据管理'''是Next.js中用于控制网页标题、描述、Open Graph标签等SEO相关属性的核心功能。在Next.js 13及以上版本中，提供了两种主要方式管理元数据：
* 基于配置对象的静态元数据（<code>metadata</code>对象）
* 基于动态函数的动态元数据（<code>generateMetadata</code>函数）

元数据直接影响搜索引擎优化(SEO)和社交媒体分享时的内容展示效果。

== 基础用法 ==
=== 静态元数据 ===
在<code>layout.tsx</code>或<code>page.tsx</code>中导出<code>metadata</code>对象：

<syntaxhighlight lang="javascript">
// app/page.tsx
export const metadata = {
  title: '首页 | 我的网站',
  description: '欢迎访问我的Next.js网站',
  openGraph: {
    title: '首页',
    description: 'Open Graph描述',
    images: '/og-image.png',
  },
  twitter: {
    card: 'summary_large_image',
  }
}
</syntaxhighlight>

=== 动态元数据 ===
当需要基于异步数据生成元数据时，使用<code>generateMetadata</code>：

<syntaxhighlight lang="javascript">
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.featuredImage],
    },
  };
}
</syntaxhighlight>

== 元数据类型详解 ==
Next.js支持以下元数据类型：

{| class="wikitable"
|+ 主要元数据字段
! 字段 !! 类型 !! 描述
|-
| <code>title</code> || string / object || 页面标题
|-
| <code>description</code> || string || 页面描述
|-
| <code>keywords</code> || string[] || 关键词数组
|-
| <code>openGraph</code> || object || Open Graph协议数据
|-
| <code>twitter</code> || object || Twitter卡片数据
|-
| <code>robots</code> || object || 搜索引擎爬虫指令
|}

=== 标题模板 ===
可在布局文件中定义全局标题模板：

<syntaxhighlight lang="javascript">
// app/layout.tsx
export const metadata = {
  title: {
    default: '默认标题',
    template: '%s | 我的网站'
  }
}
</syntaxhighlight>

子页面只需提供<code>title</code>部分，会自动拼接模板：
<syntaxhighlight lang="javascript">
// app/about/page.tsx
export const metadata = {
  title: '关于我们' 
  // 最终标题: "关于我们 | 我的网站"
}
</syntaxhighlight>

== 实际案例 ==
=== 电商产品页 ===
产品页面需要动态生成元数据：

<syntaxhighlight lang="javascript">
// app/products/[id]/page.tsx
export async function generateMetadata({ params }) {
  const product = await fetchProduct(params.id);
  
  return {
    title: `${product.name} - 购买优惠`,
    description: product.shortDescription,
    openGraph: {
      images: product.images,
      price: {
        amount: product.price,
        currency: 'CNY'
      }
    },
    alternates: {
      canonical: `/products/${product.id}`
    }
  };
}
</syntaxhighlight>

=== 博客系统 ===
博客文章页面的元数据管理：

<syntaxhighlight lang="javascript">
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params, searchParams }) {
  const article = await getArticle(params.slug);
  const author = await getAuthor(article.authorId);
  
  return {
    title: article.title,
    description: article.metaDescription,
    authors: [{ name: author.name }],
    keywords: article.tags,
    openGraph: {
      publishedTime: article.publishedAt,
      authors: [author.profileUrl]
    }
  };
}
</syntaxhighlight>

== 高级主题 ==
=== 元数据继承 ===
Next.js的元数据继承遵循组件树结构：

<mermaid>
graph TD
    RootLayout[根布局 metadata] -->|继承| NestedLayout[嵌套布局 metadata]
    NestedLayout -->|合并| Page[页面 metadata]
</mermaid>

=== 动态Open Graph图片 ===
使用<code>opengraph-image.js</code>和<code>twitter-image.js</code>文件生成动态社交图片：

<syntaxhighlight lang="javascript">
// app/blog/[slug]/opengraph-image.js
export default function Image({ params }) {
  const post = await getPost(params.slug);
  
  return new ImageResponse(
    (
      <div style={{ fontSize: 48, background: 'white' }}>
        {post.title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}
</syntaxhighlight>

== 最佳实践 ==
1. 始终为关键页面提供唯一的标题和描述
2. 对动态内容使用<code>generateMetadata</code>
3. 为SEO关键页面设置<code>canonical</code>URL
4. 使用结构化数据增强搜索引擎理解
5. 定期使用[第三方工具]验证元数据

== 常见问题 ==
'''Q: 如何覆盖父布局的元数据？'''
A: 在子布局或页面中定义同名属性会自动覆盖

'''Q: 动态元数据会影响性能吗？'''
A: Next.js会智能缓存，但建议对数据层进行优化

'''Q: 可以完全禁用默认元数据吗？'''
A: 可以，但不推荐，至少应保留基本标题和描述

== 数学表示 ==
元数据合并过程可以用以下公式表示：
<math>
Metadata_{final} = Merge(Metadata_{layout}, Metadata_{page})
</math>

其中<math>Merge</math>函数执行深度合并操作，数组类型的字段会进行拼接而非覆盖。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js基础]]