SEO 是应用的一个关键组成部分，其主要在于让搜索引擎和使用者能够清晰理解页面内容。Next.js 的 Metadata API 将这一过程程序化、简化，使开发者能够优秀的 SEO 效果。

一、Next.js 的 SEO 优势

纯客户端渲染应用长期面临 SEO 挑战：搜索引擎爬虫访问页面时获取的是空白 HTML——JavaScript 尚未执行，内容未渲染。尽管 Googlebot 现已支持 JavaScript 执行。但这需要额外处理时间，对搜索排名产生负面影响。

Next.js 通过服务端渲染确保爬虫能立即获取完整的 HTML 内容，这是 SEO 友好的基础。Metadata API 则提供精确控制每个页面展示给搜索引擎和社交网站信息的能力。

二、Metadata API 基础

. 静态元数据配置

在任何 layout.tsx 或 page.tsx 中导出 metadata 对象：

// app/layout.tsx
import type { Metadata } from 'next';export const metadata: Metadata = {
// 基础信息
title这方面，'My Blog',description: '分享技术、生活和思考',// 关键词
keywords:,//网站作者信息
authors:,//规范 URL。防止重复内容问题
alternates: {
canonical: 'https://myblog.com',},//视口设置
viewport: {
至于width，'device-width',initialScale:
},//主题色
meColor: '#ffffff',};

.标题模板 

多页面网站通常需要统一的标题格式title.template实现了这一需求:

/ app / layout . txs —根布局设置标题模板
export const metadata : Metadata = {
title : {
default :' My Blog ',//子页面未设置标题时默认值 template:'%s|My Blog '
//%s为子页面标题占位符,description:'技术博客 '
}
}



/ app / blog// page . txs —子页面仅需设置自身标题
export const metadata : Metadata = {
title :'理解 React Hooks '
至于最终输出。"理解 React Hooks|My Blog "
}

若某页面需独立标题,可使用 absolute

export const metadata : Metadata ={
title:{
absolute:'特殊页面——独立标题'
//直接使用,不套用模板,}
}

三、动态元数据：个性化页面定制

动态路由页面元数据需动态生成,使用 generateMetadata 函数替代静态导出:

/ app/blog// page . txs import type {Metadata } from' next ';interface PageProps{
params Promise<{slug:string}>;}
//动态生成元数据 export async function generateMetadata:Promise{ const{ slug}=await params;const post=await getPostBySlug;//文章不存在返回基础元数据 if{ return{ title:'文章未找到 ',description:'请求文章不存在 '
} }
return{
title : post.title,description : post.summary,authors:,Open Graph控制社交网站分享展示效果 openGraph:{ title post.title,description post.summary。type article publishedTime post.publishedAt authors,images
},Twitter Card配置 twitter:{ card summarylargeimage,title post.title description post.summary images creator@username Twitter使用者名,}
};
}

性能调整提示

generateMetadata与页组件通常需获取相同数据 Next.js会自动对 fetch请求去重相同 URL在同一请求周期仅发送一次网络请求若使用 ORM直接查询数据库可用 React cache 包装:
import {cache}from'react ';const getPostBySlug=cache=>{/.../});

四、Open Graph 深度配置

Open Graph 决定链接微信、Twitter/X LinkedIn等网站分享展示效果优秀 OG 配置明显提高链接点击率.

.完整配置示例

 export const metadata : Metadata={ openGraph:{ title 年前端开发趋势描述从 AI 辅助编程 Web Components盘点今年最可以关注前端趋势。type article // website|article|book|profile等 url https://myblog.com/articles/trends siteName My Blog OG图片 images,}};

.动态生成 OG图片

Next.js内置 ImageResponse API可 JSX 动态生成 OG图片无需预先设计:

 import {ImageResponse }from'next/og';import {NextRequest }from'next/server';export const runtime='edge';export async function GET{ try{ const{searchParams}=new URL;const title=searchParams.get||'My Blog';const author=searchParams.get||'';return new ImageResponse(

="">

),{
width :
height :
})
catch{
return new Response;按理说，}}



在文章页引用动态生成 OG图:
pre>

export async function generateMetadata {const{slug}=await params;const post=await getPostBySlug;//建立动态 OG图 URLconst ogImageUrl=new URL;ogImageUrl.searchParams.set;ogImageUrl.searchParams.set;return{openGraph:{images:},};}