Next.js 16 App Router

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

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

谨慎选择基于文件或基于代码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'],
  },
}

路由感知 generateMetadata Next.js 16

在 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 構圖。
運行公共檢查器，然後在快取不一致時使用特定於平台的調試器。

Next.js 實作指南

Next.js OG 圖片常見問題

靜態與動態頁面最關鍵的 App Router 選擇。

應該使用 metadata 還是 generateMetadata？

固定值使用靜態 metadata 匯出；標題、說明或圖片依賴路由資料時使用 generateMetadata。

可以使用 opengraph-image 檔案嗎？

可以。App Router 支援 opengraph-image 等檔案式中繼資料；需要明確或動態控制時可使用 metadata API。

為什麼圖片位址應使用絕對網址？

社群爬蟲會在瀏覽器工作階段之外抓取圖片；公開絕對網址最明確，也能讓素材直接被存取。

OG 影像尺寸指南

選擇來源畫布、間距和格式。

使用 AI 生成圖像

在連接最終 metadata 之前建立來源圖稿。

閱讀更多 OG 指南

探索更長的發布和預覽文章。

把圖片與中繼資料一起上線

建立素材、複製適用於 Next.js 的程式碼片段，並在同一流程中驗證部署結果。

製作 Next.js OG 圖片價格