"Next.js 15 动态 OG 图片生成与社交分享优化实践"

Next.js 15 动态 OG 图片生成与社交分享优化实践概述动态生成符合品牌设计的 OG 图片，保障跨平台（Twitter、Facebook、LinkedIn）分享预览统一与可维护。动态 OG 图片接口// app/og/[slug]/route.ts import { ImageResponse } from 'next/og' export const runtime = 'edge' export const size = { width: 1200, height: 630 } export async function GET(req: Request, { params }: { params: { slug: string } }) { const title = (await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json())).title return new ImageResponse( ( <div style={{ width: size.width, height: size.height, display: 'flex', background: '#0f172a', color: '#fff', padding: 64, fontSize: 64, alignItems: 'center' }} > {title} </div> ), { ...size } ) } Metadata 协同// app/[locale]/[slug]/page.tsx（片段） import type { Metadata } from 'next' export async function generateMetadata({ params }: { params: { locale: string; slug: string } }): Promise<Metadata> { const base = 'https://example.com' const url = `${base}/${params.locale}/${params.slug}` return { title: '文章标题', description: '社交分享优化示例', openGraph: { title: '文章标题', description: '社交分享优化示例', url, images: [`${base}/og/${params.slug}`] }, twitter: { card: 'summary_large_image', title: '文章标题', description: '社交分享优化示例', images: [`${base}/og/${params.slug}`] } } } 技术参数与验证浏览器/爬虫：Twitter/Facebook/LinkedIn；OG 图渲染正常动态接口延迟 < 100ms（边缘）；图片尺寸 1200×630 符合主流规范应用场景内容站点与活动推广；产品详情页社交传播注意事项字体与品牌色统一；对多语言标题需合适的字体回退缓存与再验证策略，避免频繁生成导致延迟常见问题Q: OG 图片是否需要静态生成？A: 动态更灵活；热门内容可缓存静态以降低延迟。参考资料Next.js `next/og` 文档；Open Graph/Twitter Cards 规范。---发布信息：已发布 · 技术验证 · 阅读 32 分钟 · CC BY-SA 4.0