应用路由 (App Router): 添加元数据

元数据对于 SEO 和内容分享至关重要。本章将介绍如何为 Next.js 应用添加元数据。

什么是元数据？

在网页开发中，元数据提供了关于网页的额外信息。这些信息对访问用户不可见，而是嵌入在页面的 HTML <head> 元素中，在后台发挥作用。这些隐藏信息对于搜索引擎和其他需要理解网页内容的系统非常重要。

为什么元数据很重要？

元数据在提升网页 SEO 方面起着重要作用，使搜索引擎和社交媒体平台更容易理解和访问网页内容。恰当的元数据能帮助搜索引擎有效索引网页，提高其在搜索结果中的排名。此外，像开放图谱 (Open Graph) 这样的元数据可以优化链接在社交媒体上的展示效果，使内容更具吸引力和信息性。

元数据类型

元数据有多种类型，每种都有其独特用途。常见类型包括：

标题元数据 (Title Metadata): 决定显示在浏览器标签页上的网页标题，对 SEO 至关重要，帮助搜索引擎理解网页内容。

<title>页面标题</title>

描述元数据 (Description Metadata): 提供网页内容的简要概述，通常显示在搜索引擎结果中。

<meta name="description" content="页面内容的简要描述。" />

关键词元数据 (Keyword Metadata): 包含与网页内容相关的关键词，帮助搜索引擎索引页面。

<meta name="keywords" content="关键词1, 关键词2, 关键词3" />

开放图谱元数据 (Open Graph Metadata): 增强网页在社交媒体平台上的展示效果，提供标题、描述和预览图等信息。

<meta property="og:title" content="标题内容" />
<meta property="og:description" content="描述内容" />
<meta property="og:image" content="图片链接" />

网站图标元数据 (Favicon Metadata): 关联网站图标 (favicon)，显示在浏览器地址栏或标签页上。

<link rel="icon" href="favicon.ico路径" />

添加元数据

Next.js 提供了元数据 API 来定义应用元数据。有两种方式可以为应用添加元数据：

基于配置: 在 layout.js 或 page.js 文件中导出静态 metadata 对象或动态的 generateMetadata 函数。
基于文件: Next.js 提供了一系列专门用于元数据的特殊文件：
- favicon.ico、apple-icon.jpg 和 icon.jpg: 用于网站图标
- opengraph-image.jpg 和 twitter-image.jpg: 用于社交媒体图片
- robots.txt: 提供搜索引擎爬取指令
- sitemap.xml: 提供网站结构信息

你可以灵活选择使用这些文件作为静态元数据，也可以在项目中以编程方式生成它们。

使用这两种方式，Next.js 都会自动为页面生成相应的 <head> 元素。

网站图标和开放图谱图片

在 /public 文件夹中，你会看到两个图片文件：favicon.ico 和 opengraph-image.jpg。

将这些图片移动到 /app 文件夹的根目录。

完成后，Next.js 会自动识别并使用这些文件作为网站图标和开放图谱图片。你可以通过开发者工具检查应用的 <head> 元素来验证这一点。

小提示: 你还可以使用 ImageResponse 构造函数创建动态开放图谱图片。

页面标题和描述

你也可以在任何 layout.js 或 page.js 文件中包含 metadata 对象来添加页面信息，如标题和描述。layout.js 中的元数据会被所有使用它的页面继承。

在根布局中，创建一个包含以下字段的 metadata 对象：

/app/layout.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme 仪表盘',
  description: '使用应用路由 (App Router) 构建的 Next.js 官方课程仪表盘',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};
 
export default function RootLayout() {
  // ...
}

Next.js 会自动将这些标题和元数据添加到你的应用中。

如果想为特定页面添加自定义标题怎么办？你可以通过在该页面中添加 metadata 对象来实现。嵌套页面中的元数据会覆盖父级元数据。

例如，在 /dashboard/invoices 页面中更新标题：

/app/dashboard/invoices/page.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: '发票 | Acme 仪表盘',
};

这种方式可行，但我们在每个页面都重复了应用标题。如果公司名称等发生变化，就需要在每个页面进行更新。

相反，你可以在 metadata 对象中使用 title.template 字段定义页面标题模板。这个模板可以包含页面标题和其他你想包含的信息。

在根布局中，更新 metadata 对象以包含模板：

/app/layout.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme 仪表盘',
    default: 'Acme 仪表盘',
  },
  description: '使用应用路由 (App Router) 构建的 Next.js 学习仪表盘',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

模板中的 %s 将被替换为特定页面标题。

现在，在 /dashboard/invoices 页面中，只需添加页面标题：

/app/dashboard/invoices/page.tsx

export const metadata: Metadata = {
  title: '发票',
};

访问 /dashboard/invoices 页面并检查 <head> 元素，你会看到页面标题现在是 发票 | Acme 仪表盘。

练习：添加元数据

现在你已经了解了元数据，请为以下页面添加标题进行练习：

/login 页面
/dashboard/ 页面
/dashboard/customers 页面
/dashboard/invoices/create 页面
/dashboard/invoices/[id]/edit 页面

Next.js 元数据 API 功能强大且灵活，让你能完全控制应用的元数据。这里我们展示了如何添加一些基本元数据，但你还可以添加更多字段，包括 keywords、robots、canonical 等。欢迎探索文档，为你的应用添加任何额外的元数据。

添加元数据

什么是元数据？

为什么元数据很重要？

元数据类型

添加元数据

网站图标和开放图谱图片

页面标题和描述

练习：添加元数据

On this page