元数据和 SEO

搜索引擎优化（SEO）对于 Web 应用的成功至关重要，那么我们该怎么提升我们的搜索引擎排名呢？这将是我们这节课的内容。Next.js 提供了强大的 metadata API，让我们可以轻松地为每个页面设置元数据，包括标题、描述、Open Graph 标签等。

元数据和 SEO

Metadata API

Next.js 的 metadata API 允许我们通过导出 metadata 对象或 generateMetadata 函数来设置页面的元数据。这些元数据会被自动添加到页面的 <head> 标签中。让我们从一个简单的例子开始：

|
// app/about/page.tsx
export const metadata = {
  title: '关于我们',
  description: '了解我们的团队和使命',
};
 
export default function AboutPage() {
  return <div>关于页面</div>;
}

这个例子设置了页面的标题和描述。Next.js 会自动将这些信息添加到页面的 <head> 中。

基本元数据字段

metadata 对象支持非常多的字段，可以帮助你更全面地描述页面的信息，从而提升 SEO 和社交平台的展示效果。下面我们详细介绍其中一些常见和有用的字段：

|
// app/products/page.tsx
export const metadata = {
  title: '产品列表',
  description: '浏览我们的所有产品',
  keywords: ['产品', '购物', '电商'],
  authors: [{ name: 'John Doe' }],
  creator: 'John Doe',
  publisher: 'My Company',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  metadataBase:

这个例子展示了各种元数据字段。title 和 description 是最常用的，keywords 用于 SEO，authors 和 creator 用于标识内容创建者，metadataBase 用于设置基础 URL，alternates 用于设置规范 URL 和多语言版本。

动态元数据

对于需要根据数据动态生成的元数据，我们可以使用 generateMetadata 函数：

|
// app/products/[id]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const product = await fetchProduct(id);
  
  return

generateMetadata 函数接收 params 和 searchParams 作为参数，可以访问路由参数和查询参数。这个函数必须是异步的，因为它可能需要从数据库或 API 获取数据。

Open Graph 元数据

Open Graph 元数据用于在社交媒体上分享链接时显示预览。Next.js 支持完整的 Open Graph 配置：

|
// app/blog/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await fetchPost(slug);
  
  return

这个例子设置了完整的 Open Graph 元数据，包括标题、描述、图片、URL 等。当用户在社交媒体上分享这个链接时，会显示一个包含这些信息的预览卡片。

Twitter Card 元数据

除了 Open Graph，Next.js 也支持 Twitter Card 元数据：

|
// app/blog/[slug]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const post = await fetchPost(id);
  
  return

Twitter Card 支持多种类型：summary、summary_large_image、app、player。选择合适的类型可以让链接在 Twitter 上显示得更好。

结构化数据

结构化数据（Schema.org）是一种用来向搜索引擎（如 Google、Bing 等）传递结构化信息的标准格式。通过在页面中嵌入结构化数据，搜索引擎可以更好地理解页面的具体内容，比如页面是否为产品、文章、事件或组织介绍等，从而提升展示效果，例如在搜索结果中显示富摘要（Rich Snippets）。

在 Next.js 里，虽然 metadata API 没有内置专门的方法直接配置结构化数据，但我们依然可以通过两种方式实现：

通过 metadata.other 字段注入结构化数据：
在 generateMetadata 函数中，可以返回一个 other 字段，并设置 'application/ld+json' 键，值为序列化后的结构化数据字符串。Next.js 会自动将其渲染为 <script type="application/ld+json"> 脚本标签。
在 React 组件中使用 <script type="application/ld+json"> 手动注入：
如果需要动态或者更灵活地处理结构化数据，也可以直接在页面组件的 JSX 中渲染 <script type="application/ld+json">，内容为结构化数据的 JSON 字符串。

这两种方式都可以将 Schema.org 数据添加到页面中，帮助搜索引擎理解页面语义，通常用于产品、文章、组织、FAQ 等场景。

|
// app/products/[id]/page.tsx
export async function generateMetadata({
  params,
}: {
  params: Promise<{ id: string }>;
}): Promise<Metadata> {
  const { id } = await params;
  const product = await fetchProduct(id);
  
  return

这个例子添加了 Product 类型的结构化数据，帮助搜索引擎理解这是一个产品页面。

布局中的元数据

在 Next.js 的根布局文件（如 app/layout.tsx）中，我们可以通过导出一个名为 metadata 的对象来设置整个应用的默认元数据信息。这些默认元数据包括网站标题模板、描述、Open Graph 配置等，会自动应用到所有子页面上。如果某个子页面需要自定义元数据，可以在该页面单独导出一个 metadata 对象来覆盖默认设置，从而实现每个页面的元数据信息灵活控制。

|
// app/layout.tsx
export const metadata = {
  title: {
    template: '%s | 我的网站',
    default: '我的网站',
  },
  description: '这是我的网站',
  openGraph: {
    type: 'website',
    locale: 'zh_CN',
    url: 'https://example.com',
    siteName: '我的网站',
  },
};
 
export default function RootLayout

在这个例子中，我们设置了标题模板，子页面的标题会自动添加 | 我的网站 后缀。子页面可以通过导出自己的 metadata 来覆盖这些值。

图标和清单

Next.js 提供了强大的 metadata API，用于在应用中灵活配置各种图标（如网站 favicon、快捷方式图标、Apple Touch 图标等）以及 Web App Manifest 文件。通过在根布局的 metadata 对象中设置 icons 字段，可以为不同平台和用途分别指定不同类型的图标文件。此外，还可以通过 manifest 字段为应用指定 Web App Manifest 的路径，以支持渐进式 Web 应用（PWA）功能。下面是如何配置这些元数据的详细例子：

|
// app/layout.tsx
export const metadata = {
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
  },
  manifest: '/manifest.json',
  appleWebApp: {
    capable: true,
    statusBarStyle: 'default',
    title: '我的应用',
  },
};

这个例子设置了各种图标和 Apple Web App 配置。manifest.json 文件用于定义 PWA 应用的配置。

小节回顾

在这一部分，我们深入探索了 Next.js 的 metadata API 和 SEO 优化。我们学习了如何设置基本元数据，如何生成动态元数据，如何实现 Open Graph 和 Twitter Card，如何添加结构化数据，以及如何优化 SEO。良好的 SEO 对于 Web 应用的排名十分重要。通过合理使用 Next.js 的 metadata API，我们可以轻松地为每个页面设置完整的元数据，提升搜索引擎排名和社交媒体分享效果。

在下一个节课，我们将学习对于next.js项目的性能优化，了解如何优化缓存策略，如何实现代码分割和懒加载，以及如何监控应用性能。