Next.js 16 App Router

在 Next.js 应用程序中实施和验证 OG 图像

选择静态 metadata、路由感知 generateMetadata 或生成的 opengraph-image，使用公共绝对 URL 并检查部署结果。

故意选择基于文件或基于代码的metadata

当路线数据更改标题、描述或图像时，使用静态 metadata 对象导出来获取固定值和 generateMetadata 。两种出口都属于Server Components。

名为 opengraph-image 的文件可以提供基于文件的 metadata。当视觉依赖于路线数据时，生成的 opengraph-image.tsx 可以返回 ImageResponse。请勿从同一航段导出静态 metadata 和 generateMetadata。

静态 metadata 与 metadataBase

metadataBase 用来解析相对 metadata URL；同时提供 https://starterpackai.com/og/home.png 这样的绝对公开图片 URL，更便于在应用外核验。

tsx

import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://starterpackai.com'),
  title: 'A clear page title',
  description: 'A concise share description',
  openGraph: {
    images: ['https://starterpackai.com/og/home.png'],
  },
}

Next.js 16 中的路由感知 generateMetadata

在 Next.js 16 App Router 中，路由 params 的类型是 Promise；先 await params，再加载该路由的数据并返回 generateMetadata。

tsx

import type { Metadata } from 'next'

type Props = { params: Promise<{ slug: string }> }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: post.title,
    openGraph: { images: [post.ogImageUrl] },
  }
}

动态 opengraph-image 与 ImageResponse

在服务器端的 opengraph-image.tsx 中 await params，再用 ImageResponse 按明确尺寸生成图片。

tsx

import { ImageResponse } from 'next/og'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return new ImageResponse(
    <div style={{ display: 'flex', padding: 80 }}>{slug}</div>,
    size
  )
}

部署验证清单

确认 metadata 或 generateMetadata 在服务器组件路由段中运行。
打开部署的 HTML 并验证最终的 og:title、og:description 和 og:image 值。
在单独的会话中打开绝对公共映像 URL 并验证映像响应是否成功。
检查小链接卡尺寸下渲染的 1200×630 合成。
运行公共 metadata 检查器，然后在缓存不一致时使用特定于平台的调试器。

Next.js 实现指南

Next.js OG 图片常见问题

静态页面与动态页面最关键的 App Router 选择。

应该使用 metadata 还是 generateMetadata？

固定值使用静态 metadata 导出；标题、描述或图片依赖路由数据时使用 generateMetadata。

可以使用 opengraph-image 文件吗？

可以。App Router 支持 opengraph-image 等文件式元数据；需要明确或动态控制时可使用 metadata API。

为什么图片地址应使用绝对网址？

社交爬虫会在浏览器会话之外抓取图片。公开的绝对网址更明确，也能让素材被直接访问。

OG 图像尺寸指南

选择源画布、间距和格式。

使用 AI 生成图像

在连接最终的 metadata 之前创建源图稿。

把图片与元数据一起上线

创建素材、复制适用于 Next.js 的代码片段，并在同一流程中验证部署结果。

制作 Next.js OG 图片价格