OG Images สำหรับหน้าสินค้า

OG image สำหรับหน้าสินค้าคือตัวอย่างการแสดงผลบนโซเชียลมีเดีย (social preview) ที่แสดงชื่อสินค้า ราคา และรูปขนาดย่อเมื่อมีการแชร์หน้าเว็บ FastOG จะเรนเดอร์แบบไดนามิกที่ขนาด 1200×630 และแคชที่ขอบเครือข่าย (edge cache) ดังนั้นสินค้าทุกรายการจะได้รับการ์ดที่มีแบรนด์โดยไม่ต้องมีนักออกแบบมาแก้ไขเทมเพลต

เหตุใดหน้าเว็บสินค้าของอีคอมเมิร์ซจึงต้องใช้ OG image แบบไดนามิก

เมื่อลูกค้าแชร์ลิงก์สินค้าใน WhatsApp, Slack หรือ Discord การ์ดตัวอย่างถือเป็นโฆษณาขนาดย่อ การ์ดที่มีชื่อสินค้า ราคา และคะแนนจริงจะช่วยเพิ่มอัตราการแปลงได้ดีกว่าการใช้โลโก้ทั่วไปของร้านค้า การสร้างการ์ดที่ไม่ซ้ำกันสำหรับแต่ละสินค้าด้วยตนเองนั้นไม่สามารถขยายขนาดได้ — นี่คือสิ่งที่ API มีไว้เพื่อแก้ปัญหานี้

วิธีสร้าง OG image สำหรับสินค้า

ลงนามใน URL ด้วย template=ecommerce ชื่อสินค้า ราคา คะแนน และ 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 โหลดรูปภาพสินค้าของฉันลงในการ์ดหรือไม่

ใช่ ส่ง URL ของรูปภาพสินค้าในพารามิเตอร์ image และเทมเพลตอีคอมเมิร์ซจะประกอบรูปภาพนั้นลงในการ์ด

ราคาที่แสดงเป็นแบบสดและแก้ไขได้หรือไม่

ราคาคือสิ่งที่คุณส่งในขณะที่ลงนาม เปลี่ยนราคา → เปลี่ยน URL → เรนเดอร์ใหม่หนึ่งครั้ง

แล้วราคาส่วนลด / ราคาโปรโมชันล่ะ

ส่งราคาปัจจุบันเป็น price ผู้ขายบางรายรีเฟรชการ์ดเมื่อมีการเปลี่ยนแปลงโปรโมชัน เพื่อให้ตัวอย่างที่แชร์แสดงราคาล่าสุด

ลองใช้ฟรี — ไม่ต้องสมัครสมาชิก

ดูตัวอย่างและทดสอบภาพ OG แบบไดนามิกได้ในไม่กี่วินาที

เปิดตัวทดสอบภาพ OG ฟรี

หัวข้อ