Next.js 15 Metadata 动态 SEO 与 JSON-LD 实践：generateMetadata-OG 图

概览Metadata API 让页面在服务端生成标准的 SEO 标签与 Open Graph 信息。结合 JSON-LD 可提升搜索引擎理解度与富结果表现，适用于文章、产品与动态内容。动态元数据app/posts/[slug]/page.tsximport type { Metadata } from 'next'

export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {

const post = await fetch(`https://api.example.com/posts/${params.slug}`).then((r) => r.json())

return {

title: post.title,

description: post.summary,

openGraph: {

type: 'article',

title: post.title,

description: post.summary,

url: `https://example.com/posts/${params.slug}`,

images: [{ url: `https://example.com/api/og?title=${encodeURIComponent(post.title)}` }],

},

alternates: { canonical: `https://example.com/posts/${params.slug}` },

}

}

export default async function Page({ params }: { params: { slug: string } }) {

const post = await fetch(`https://api.example.com/posts/${params.slug}`).then((r) => r.json())

const ld = {

'@context': 'https://schema.org',

'@type': 'Article',

headline: post.title,

datePublished: post.publishedAt,

dateModified: post.updatedAt,

author: { '@type': 'Person', name: post.author },

}

return (

<article>

<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />

<h1>{post.title}</h1>

<p>{post.summary}</p>

</article>

)

}

OG 图接口app/api/og/route.tsexport const runtime = 'edge'

export async function GET(req: Request) {

const { searchParams } = new URL(req.url)

const title = searchParams.get('title') ?? 'Article'

const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630"><rect width="100%" height="100%" fill="black"/><text x="50" y="315" fill="white" font-size="64">${title}</text></svg>`

return new Response(svg, { headers: { 'Content-Type': 'image/svg+xml' } })

}

治理要点保持 `canonical` 与路由一致，避免重复内容评分下降。对多语言输出 `alternates` 与 `hreflang`，提升国际化表现。OG 图接口在 Edge 下生成，保证低延迟与稳定性。验证与指标浏览器与爬虫：主流搜索引擎与社交平台识别正常Next.js：15.0+；Node.js：20.x；Edge Runtime：稳定分享点击率提升与富结果展示率提高