前面我们学习了字体优化，本节来聊聊 Metadata 和 OG 图片。Metadata 是 SEO 和社交媒体分享的关键，配置得当能让你的网站在搜索引擎和社交媒体中表现更好。
Metadata 概述
Metadata API 让你可以定义：
良好的 Metadata 配置能显著提升网站的点击率和流量。
静态 Metadata
基本配置
最简单的 Metadata 配置：
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '我的应用',
description: '使用 Next.js 构建的现代化应用',
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="zh-CN">
<body>{children}</body>
</html>
)
}
完整配置
一个更完整的配置示例：
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: '我的应用',
description: '使用 Next.js 构建的现代化应用',
keywords: ['Next.js', 'React', 'TypeScript'],
authors: [{ name: '作者名', url: 'https://example.com' }],
openGraph: {
title: '我的应用',
description: '使用 Next.js 构建的现代化应用',
url: 'https://example.com',
siteName: '我的应用',
images: [
{
url: 'https://example.com/og.jpg',
width: 1200,
height: 630,
},
],
locale: 'zh_CN',
type: 'website',
},
twitter: {
card: 'summary_large_image',
title: '我的应用',
description: '使用 Next.js 构建的现代化应用',
images: ['https://example.com/og.jpg'],
},
}
动态 Metadata
很多情况下，我们需要根据数据动态生成 Metadata：
generateMetadata 函数
// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'
export async function generateMetadata({
params,
}: {
params: { slug: string }
}): Promise<Metadata> {
const post = await fetchPost(params.slug)
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.coverImage],
},
}
}
export default async function BlogPost({
params,
}: {
params: { slug: string }
}) {
const post = await fetchPost(params.slug)
return <article>{/* ... */}</article>
}
访问父级 Metadata
export async function generateMetadata({
params,
}: {
params: { slug: string }
}): Promise<Metadata> {
return {
title: '文章详情', // 会追加到父级标题后
}
}
图标和清单
配置网站图标：
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
icons: {
icon: '/favicon.ico',
shortcut: '/favicon-16x16.png',
apple: '/apple-touch-icon.png',
},
manifest: '/manifest.json',
}
Open Graph 图片
OG 图片在社交媒体分享时显示，非常重要。
基本 OG 图片
export const metadata: Metadata = {
openGraph: {
images: [
{
url: 'https://example.com/og.jpg',
width: 1200,
height: 630,
alt: '我的应用',
},
],
},
}
多个 OG 图片
export const metadata: Metadata = {
openGraph: {
images: [
{
url: 'https://example.com/og-1200x630.jpg',
width: 1200,
height: 630,
alt: '我的应用 - 大图',
},
{
url: 'https://example.com/og-800x418.jpg',
width: 800,
height: 418,
alt: '我的应用 - 中图',
},
],
},
}
动态 OG 图片
export async function generateMetadata({
params,
}: {
params: { id: string }
}): Promise<Metadata> {
const product = await fetchProduct(params.id)
return {
openGraph: {
images: [
{
url: product.image,
width: 1200,
height: 630,
alt: product.name,
},
],
},
}
}
Twitter 卡片
Twitter 有自己的卡片格式：
export const metadata: Metadata = {
twitter: {
card: 'summary_large_image',
site: '@yourtwitterhandle',
title: '我的应用',
description: '使用 Next.js 构建的现代化应用',
images: {
url: 'https://example.com/og.jpg',
alt: '我的应用',
},
},
}
SEO 实用技巧
这里分享几个在配置 SEO 时特别有用的技巧。
独特的标题和描述
实际开发中,我发现每个页面都应该有独特的标题和描述,这对 SEO 特别重要:
// 推荐这样做 - 每个页面有独特的 Metadata
export async function generateMetadata({ params }) {
const post = await fetchPost(params.slug)
return {
title: post.title,
description: post.excerpt,
}
}
// 避免这种情况 - 所有页面使用相同的 Metadata
export const metadata = {
title: '我的博客',
description: '一个使用 Next.js 构建的博客',
}
合理的标题长度
这里有个小建议:标题应该简洁明了,太长的标题反而不容易被搜索引擎完整显示:
// 推荐这样做 - 简洁明了的标题
title: 'Next.js 教程：从零开始学习 Next.js'
// 避免这种情况 - 过长的标题
title: 'Next.js 教程：从零开始学习 Next.js，包括安装、配置、路由、数据获取、部署等所有内容'
描述性描述
这个技巧特别有用——描述应该包含关键词且有实际意义:
// 推荐这样做 - 描述性且包含关键词
description: '学习如何使用 Next.js 构建现代化的 Web 应用，包括服务端渲染、静态生成、API 路由等核心概念。'
// 避免这种情况 - 无意义的描述
description: '这是一个很好的网站，你一定会喜欢的。'
总结
本节我们学习了 Next.js 的 Metadata API，包括静态和动态 Metadata、OG 图片、Twitter 卡片等。良好的 Metadata 配置能显著提升网站的 SEO 和社交媒体表现。
如果你对本节内容有任何疑问，欢迎在评论区提出来，我们一起学习讨论。
