跳到内容

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。

练习：添加元数据

现在您已经了解了元数据，请通过为其他页面添加标题来练习

  1. /login 页面。
  2. /dashboard/ 页面。
  3. /dashboard/customers 页面。
  4. /dashboard/invoices/create 页面。
  5. /dashboard/invoices/[id]/edit 页面。

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

您已完成章节16

恭喜！您已将元数据添加到您的应用程序并了解了元数据 API。

下一步

17：后续步骤

继续探索 Next.js

开始第 17 章