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：稳定分享点击率提升与富结果展示率提高