元数据 Metadata
官方给的 Metadata 类型很多,日常使用的如下:
基础 SEO
{
title,
description,
keywords,
authors,
creator,
publisher
}Open Graph(社交分享)
用来分享到:微信、X/Twitter、Facebook。
{
openGraph: {
title,
description,
url,
siteName,
images,
locale,
type,
}
}Robots
{
robots: {
index: true,
follow: true,
}
}Icons
{
icons: {
icon: "/favicon.ico",
apple: "/apple-touch-icon.png",
}
}Canonical
{
alternates: {
canonical: "/articles/nextjs"
}
}Metadata 对象(静态)
页面元数据是固定的,不依赖任何数据时,直接导出一个对象即可。
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About",
description: "About us",
};特点:
- 构建阶段即可确定
- 不需要执行任何逻辑
- 最简单
- 推荐优先使用
适合:
- About
- Contact
- Privacy
- Login
- Dashboard(固定标题)
generateMetadata()(动态)
Metadata 需要计算,就使用函数。例如文章页面:
import type { Metadata } from "next";
export async function generateMetadata({
params,
}: {
params: Promise<{ slug: string }>;
}): Promise<Metadata> {
const { slug } = await params;
const article = await getArticle(slug);
return {
title: article.title,
description: article.description,
};
}Metadata 来自:
- URL 参数
- 数据库
- CMS
- API
- 文件
- locale
因为需要执行逻辑,所以必须写成函数。
使用原则
静态数据 → metadata 对象
动态数据 → generateMetadata() 函数