商品ページ用のOG画像
商品ページのOG画像は、ページが共有された際に商品名、価格、サムネイルを表示するソーシャルプレビューです。FastOGはこれを1200×630で動的にレンダリングし、エッジキャッシュするため、デザイナーがテンプレートに触れることなく、すべての商品にブランド化されたカードが提供されます。
なぜEC商品ページに動的な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
})],
},
};
}
Eコマーステンプレートのフィールド
| フィールド | 表示内容 | 任意かどうか |
|---|---|---|
title |
商品名（見出し） | 必須 |
subtitle |
タグラインまたはカテゴリ | 任意 |
price |
価格タグ（例：$29.99） |
任意 |
rating |
レビュー評価（例：4.9） |
任意 |
image |
商品画像／アバターURL | 任意 |
FAQ
FastOGはカードに商品画像を読み込みますか？
はい。imageパラメータに商品の画像URLを渡すと、eコマーステンプレートがそれをカードに合成します。
価格はリアルタイム表示され、編集可能ですか？
価格は署名時に渡した値がそのまま使用されます。価格を変更する→URLを変更する→新しいレンダリングが1回行われる、という流れです。
割引価格・セール価格についてはどうですか？
現在の価格をpriceとして渡してください。セール内容が変わったときにカードを更新し、共有プレビューに最新の価格が表示されるようにしている販売者もいます。