元数据对 SEO 和分享性至关重要。在本章中，我们将讨论如何向您的 Next.js 应用程序中添加元数据。
在本章中...
以下是我们将涵盖的主题
- 什么是元数据。
- 元数据的类型。
- 如何使用元数据添加 Open Graph 图像。
- 如何使用元数据添加 favicon。
什么是元数据
在 Web 开发中，元数据提供有关网页的附加详细信息。元数据对访问网页的用户不可见，而是嵌入在页面的 HTML 中，通常位于 <head> 元素内。这些隐藏的信息对搜索引擎和其他需要更好理解您网页内容的系统至关重要。
为什么元数据重要?
元数据在提升网页的 SEO 方面发挥着重要作用，使搜索引擎和社交媒体平台更容易访问和理解网页。正确的元数据帮助搜索引擎有效地索引网页，从而提高其在搜索结果中的排名。此外，像 Open Graph 这样的元数据可以改善在社交媒体上分享的链接的外观，使内容对用户更加吸引人和信息丰富。
元数据的类型
元数据有多种类型，每种类型都有其独特的用途。一些常见的类型包括：
标题元数据 : 负责网页标题，这个标题显示在浏览器标签上。它对 SEO 很重要，因为它帮助搜索引擎理解网页的内容。
<title>页面标题</title>
描述元数据 : 提供网页内容的简要概述，通常在搜索引擎结果中显示。
<meta name="description" content="页面内容的简要描述。" />
关键词元数据 : 包含与网页内容相关的关键词，帮助搜索引擎对页面进行索引。
<meta name="keywords" content="关键词1, 关键词2, 关键词3" />
Open Graph 元数据 : 改善网页在社交媒体平台分享时的展示方式，提供诸如标题、描述和预览图像等信息。
<meta property="og:title" content="这里是标题" /> <meta property="og:description" content="这里是描述" /> <meta property="og:image" content="图像网址" />
Favicon 元数据 : 关联网页的小图标（favicon），显示在浏览器的地址栏或标签上。
<link rel="icon" href="路径/到/favicon.ico" />
添加元数据
Next.js 提供了一个 Metadata API，用于定义应用程序的元数据。您可以通过以下两种方式向应用程序添加元数据：
-
基于配置 : 在
layout.js或page.js文件中导出一个静态的metadata对象 或动态的generateMetadata函数。 -
基于文件 : Next.js 有一些专门用于元数据的特殊文件：
-
favicon.ico、apple-icon.jpg和icon.jpg：用于 favicon 和图标 -
opengraph-image.jpg和twitter-image.jpg：用于社交媒体图像 -
robots.txt：提供搜索引擎抓取指令 -
sitemap.xml：提供网站结构信息
-
您可以选择使用这些文件来静态生成元数据，也可以在项目中动态生成它们。
通过这两种方式，Next.js 会自动生成页面的相关 <head> 元素。
Favicon 和 Open Graph 图像
在您的 /public 文件夹中，您会看到两个图像：favicon.ico 和 opengraph-image.jpg。
将这些图像移动到 /app 文件夹的根目录下。
完成后，Next.js 将自动识别并使用这些文件作为您的 favicon 和 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 Metadata API 强大而灵活，让您完全控制应用程序的元数据。在这里，我们展示了如何添加一些基本的元数据，但您可以添加多个字段，包括 keywords、robots、canonical 等。请随意探索 文档，并将任何额外的元数据添加到您的应用程序中。
