제품 페이지용 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 | 선택 |
FAQ
FastOG가 제품 이미지를 카드에 로드하나요?
네. image 매개변수에 제품 이미지 URL을 전달하면 전자상거래 템플릿이 이를 카드에 구성합니다.
가격은 실시간으로 표시되며 편집할 수 있나요?
가격은 서명 시점에 전달하는 값 그대로 표시됩니다. 가격을 변경하면 URL을 변경하고 새 렌더링을 하나 생성하면 됩니다.
할인 또는 판매 가격은 어떻게 처리하나요?
현재 가격을 price으로 전달하세요. 일부 판매자는 판매가 변경될 때 카드를 새로고침하여 공유 미리보기에 실시간 가격이 표시되도록 합니다.