章节16

添加元数据

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

在本章中...

我们将涵盖以下主题：

什么是元数据。

元数据的类型。

如何使用元数据添加开放图谱图像。

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

什么是元数据？

在网络开发中，元数据提供了有关网页的额外详细信息。元数据对访问页面的用户不可见。相反，它在幕后工作，嵌入在页面的 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" />

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

<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> 元素。

网站图标和开放图谱图像

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

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

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

友情提示： 您还可以使用 ImageResponse 构造函数创建动态开放图谱图像。

页面标题和描述

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

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

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 页面中，您可以更新页面标题

import { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Invoices | Acme Dashboard',
};

这可行，但我们会在每个页面中重复应用程序的标题。如果公司名称等发生变化，您将不得不在每个页面上进行更新。

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

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

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 页面中，您可以添加页面标题

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 等。请随意浏览文档，并为您的应用程序添加任何额外的元数据。

添加元数据

什么是元数据？

元数据为何重要？

元数据的类型

添加元数据

网站图标和开放图谱图像

页面标题和描述

练习：添加元数据

您已完成本章16