Next.js v15- Metadata
概念
在 Web 开发中，Metadata提供有关网页的其他详细信息。元数据对访问页面的用户不可见。相反，它在幕后工作，嵌入到页面的 HTML 中，通常在<head>元素中。这些隐藏信息对于需要更好地了解您网页内容的搜索引擎和其他系统至关重要。
类型
- Title：负责浏览器选项卡上显示的网页的标题。这对 SEO 至关重要，因为它可以帮助搜索引擎了解网页的内容。
<title>Page Title</title>
- Description：提供网页内容的简要概述，通常显示在搜索引擎结果中
<meta name="description" content="A brief description of the page content." />
- Keyword: 包括与网页内容相关的关键字，帮助搜索引擎为页面编制索引。
<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" />
添加Metadata
Next.js 具有可用于定义应用程序元数据的Metadata API。有两种方法可以将Metadata添加到应用程序
- Config-based：在 layout.js 或 page.js 文件中导出静态metadata对象或动态generateMetadata函数
- File-based：Next.js具有一系列专门用于元数据的特殊文件：
favicon.ico 、 apple-icon.jpg 和 icon.jpg ：用于网站图标和图标
opengraph-image.jpg和 twitter-image.jpg ： 用于社交媒体图像
robots.txt ：提供搜索引擎抓取的说明
sitemap.xml ：提供有关网站结构的信息
您可以灵活地将这些文件用于静态Metadata，也可以在项目中以编程方式生成它们，使用这两个选项，Next.js 将自动生成页面的相关<head>元素。
应用
在根布局中，使用以下字段创建新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对象以包含模板：
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'),
};
在/dashboard/invoices页面中，可以添加页面标题
export const metadata: Metadata = {
title: 'Invoices',
};
导航到页面/dashboard/invoices并检查<head>元素。您应该会看到页面标题为 Invoices | Acme Dashboard .