產品頁面的 OG 圖片
產品頁面的 OG 圖片是當頁面被分享時，顯示產品名稱、價格和縮圖的社交預覽。FastOG 會以 1200×630 的尺寸動態渲染，並在邊緣快取，因此每個產品都能獲得品牌化的卡片，無需設計師處理範本。
為什麼電商產品頁面需要動態 OG 圖片
當客戶在 WhatsApp、Slack 或 Discord 中分享產品連結時，預覽卡片就像一則迷你廣告。一張包含實際產品名稱、價格和評分的卡片，其轉換效果遠勝於商店的通用標誌圖片。手動為每個產品建立獨特的卡片無法擴展——這正是 API 的用途所在。
如何生成產品 OG 圖片
使用 template=ecommerce 簽署 URL，包含產品標題、價格、評分和圖片 URL。API 會依需求渲染卡片並快取。
tsx
// Next.js — app/products/[slug]/page.tsx
export function generateMetadata({ params }) {
const product = await getProduct(params.slug);
return {
openGraph: {
images: [generateOgImageUrl({
template: "ecommerce", // product card
title: product.name,
subtitle: product.tagline, // optional
price: product.price, // e.g. "$29.99"
rating: product.rating, // e.g. "4.9"
image: product.imageUrl, // product photo
})],
},
};
}
電子商務範本欄位
| 欄位 | 顯示內容 | 是否必填？ |
|---|---|---|
title |
產品名稱（標題） | 必填 |
subtitle |
標語或類別 | 選填 |
price |
價格標籤，例如 $29.99 |
選填 |
rating |
評價星等，例如 4.9 |
選填 |
image |
產品圖片／頭像 URL | 選填 |
常見問題
FastOG 會將我的產品圖片載入卡片中嗎？
會。請在 image 參數中傳入產品圖片的 URL，電子商務範本便會將其組合成卡片。
價格是即時顯示且可編輯的嗎？
價格取決於您在簽署時傳入的內容。變更價格 → 變更 URL → 重新產生一次渲染。
那折扣或特價呢？
請將目前價格傳入 price。有些賣家會在特價變更時重新整理卡片，讓分享預覽顯示即時價格。