Next.js14从入门到实战021：NextJS基础篇之添加Meta元数据

翻书的熊猫
811 阅读5分钟

明天孩子放假，连着五一准备回老家休息下，思考下今年的创业项目，这篇也是基础篇的最后一篇。

Meta元数据对于搜索引擎优化和可共享性至关重要。在本章中，我们将讨论如何在 Next.js 应用程序中添加元数据。

在本章中，你将学到……

  • 什么是Meta元数据
  • 元数据的类型
  • 如何使用元数据添加Open Graph图像
  • 如何使用元数据添加图标

什么是元数据

在网页开发中，元数据提供了有关网页的额外细节。访问网页的用户看不到元数据。相反，它在幕后工作，嵌入网页的 HTML 中，通常在 <head> 元素中。这些隐藏的信息对于搜索引擎和其他需要更好地理解网页内容的系统来说至关重要。

元数据为何重要

元数据在提高网页的搜索引擎优化方面发挥着重要作用，它使网页更容易被搜索引擎和社交媒体平台访问和理解。适当的元数据有助于搜索引擎有效地索引网页，提高网页在搜索结果中的排名。此外，Open Graph 等元数据还能改善社交媒体上共享链接的外观，使内容对用户更具吸引力，信息量更大。

元数据类型

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

标题元数据：负责显示在浏览器标签页上的网页标题。它对搜索引擎优化至关重要，因为它能帮助搜索引擎了解网页的内容。

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

Favicon和开放图谱图像

在你的 /public 文件夹中，你会发现有两张图片： favicon.ico 和 opengraph-image.jpg 。

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

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

您还可以使用 ImageResponse 构造函数创建动态 OG 图像。

页面标题和说明

您还可以从任何 layout.js 或 page.js 文件中包含一个 metadata 对象，以添加额外的页面信息，如标题和描述。所有使用 layout.js 的页面都将继承 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 等。请随时查阅文档，并为您的应用程序添加任何其他元数据。

avatar
文章
阅读
粉丝