产品页面的 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 传入。部分卖家会在促销变化时刷新卡片，以便分享预览显示实时价格。