011 最后的页面工作：metadata
目录
本文对应 Next.js Learn 入门教程的第 16 章。
What is metadata?
In web development, metadata provides additional details about a webpage. Metadata is not visible to the users visiting the page. Instead, it works behind the scenes, embedded within the page's HTML, usually within the <head> element. This hidden information is crucial for search engines and other systems that need to understand your webpage's content better.
metadata
Types of metadata
- Title Metadata
- Description Metadata
- Keyword Metadata
- Open Graph Metadata
- Favicon Metadata
添加
Page title and descriptions
You can also include a metadata object from any layout.js or page.js file to add additional page information like title and description. Any metadata in layout.js will be inherited by all pages that use it.
In your root layout, create a new metadata object with the following fields:
/app/layout.tsx
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() {
// ...
}标题模板
/app/layout.tsx
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'),
};/app/dashboard/invoices/page.tsx
tsx
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'Invoices',
};