章节16

添加元数据

元数据对于 SEO 和可分享性至关重要。在本节中，我们将讨论如何在 Next.js 应用程序中添加元数据。

在本节中...

以下是我们将涵盖的主题

什么是元数据。

元数据的类型。

如何使用元数据添加 Open Graph 图片。

如何使用元数据添加网站图标。

什么是元数据？

在 Web 开发中，元数据提供了有关网页的更多详细信息。访问页面的用户无法看到元数据。相反，它在后台工作，嵌入到页面的 HTML 中，通常位于 <head> 元素内。此隐藏信息对于搜索引擎和其他需要更好地理解网页内容的系统至关重要。

为什么元数据很重要？

元数据在增强网页的 SEO、使其更容易被搜索引擎和社交媒体平台访问和理解方面发挥着重要作用。正确的元数据可以帮助搜索引擎有效地索引网页，从而提高其在搜索结果中的排名。此外，像 Open Graph 这样的元数据可以改善在社交媒体上共享链接的外观，使内容对用户更具吸引力和信息性。

元数据的类型

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

标题元数据：负责在浏览器选项卡中显示的网页标题。它对于 SEO 至关重要，因为它可以帮助搜索引擎了解网页的主题。

<title>Page Title</title>

描述元数据：此元数据提供了网页内容的简要概述，通常显示在搜索引擎结果中。

<meta name="description" content="A brief description of the page content." />

关键词元数据：此元数据包含与网页内容相关的关键词，帮助搜索引擎索引页面。

<meta name="keywords" content="keyword1, keyword2, keyword3" />

Open Graph 元数据：此元数据增强了在社交媒体平台上共享网页时的表示方式，提供诸如标题、描述和预览图像等信息。

<meta property="og:title" content="Title Here" />
<meta property="og:description" content="Description Here" />
<meta property="og:image" content="image_url_here" />

网站图标元数据：此元数据将网站图标（一个小图标）链接到网页，显示在浏览器的地址栏或选项卡中。

<link rel="icon" href="path/to/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> 元素。

网站图标和 Open Graph 图片

在您的 /public 文件夹中，您会注意到有两个图像：favicon.ico 和 opengraph-image.jpg。

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

执行此操作后，Next.js 会自动识别并使用这些文件作为您的网站图标和 OG 图片。您可以通过在开发者工具中检查应用程序的 <head> 元素来验证这一点。

注意：您还可以使用 ImageResponse 构造函数创建动态 OG 图片。

页面标题和描述

您还可以从任何 layout.js 或 page.js 文件中包含一个 metadata 对象来添加其他页面信息，如标题和描述。layout.js 中的任何元数据都将被使用它的所有页面继承。

在您的根布局中，使用以下字段创建一个新的 metadata 对象

/app/layout.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Acme Dashboard',
  description: 'The official Next.js Course Dashboard, built with App Router.',
  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: 'Invoices | Acme Dashboard',
};

这可以工作，但我们在每个页面上都重复了应用程序的标题。如果某些内容发生更改，例如公司名称，则必须在每个页面上更新它。

相反，您可以使用 metadata 对象中的 title.template 字段为页面标题定义一个模板。此模板可以包含页面标题以及您想要包含的任何其他信息。

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

/app/layout.tsx

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: {
    template: '%s | Acme Dashboard',
    default: 'Acme Dashboard',
  },
  description: 'The official Next.js Learn Dashboard built with App Router.',
  metadataBase: new URL('https://next-learn-dashboard.vercel.sh'),
};

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

现在，在您的 /dashboard/invoices 页面中，您可以添加页面标题

/app/dashboard/invoices/page.tsx

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

导航到 /dashboard/invoices 页面并检查 <head> 元素。您应该会看到页面标题现在是 Invoices | Acme Dashboard。

练习：添加元数据

既然您已经了解了元数据，请通过向其他页面添加标题来练习

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

Next.js 元数据 API 功能强大且灵活，让您可以完全控制应用程序的元数据。在这里，我们向您展示了如何添加一些基本元数据，但您可以添加多个字段，包括 keywords、robots、canonical 等。请随时浏览文档，并将任何其他您想要添加到应用程序的元数据添加到您的应用程序中。

添加元数据

什么是元数据？

为什么元数据很重要？

元数据的类型

添加元数据

网站图标和 Open Graph 图片

页面标题和描述

练习：添加元数据

您已完成章节16