OG อิมเมจแบบไดนามิกสำหรับ SaaS

OG อิมเมจแบบไดนามิกสำหรับ SaaS คือตัวอย่างแสดงผลบนโซเชียลมีเดียแบบต่อหน้า (per-page social previews) ที่ถูกสร้างขึ้นโดยอัตโนมัติเมื่อแดชบอร์ด เอกสารประกอบ บันทึกการเปลี่ยนแปลง หรือเส้นทางที่ผู้ใช้เข้าถึงถูกแชร์ออกไป FastOG จะเรนเดอร์แต่ละรายการตามคำขอและแคชไว้ ทำให้ SaaS สามารถมอบการ์ดที่มีแบรนด์เฉพาะสำหรับทุกหน้าได้โดยไม่ต้องทำงานออกแบบด้วยมือแม้แต่น้อย

เหตุใด SaaS จึงจำเป็นต้องมี OG image แบบไดนามิก

ผลิตภัณฑ์ SaaS มีพื้นผิวที่แชร์ได้หลายจุด เช่น หน้าผลิตภัณฑ์ หน้าเอกสาร รายการ changelog โปรไฟล์ผู้ใช้สาธารณะ และการ์ดความสำเร็จ แต่ละจุดที่แชร์บน X หรือ LinkedIn จะได้รับประโยชน์จากการ์ดเฉพาะของตัวเอง แทนที่จะใช้โลโก้เดียวเป็นตัวสำรอง การสร้างการ์ดเหล่านี้ด้วยมือไม่สามารถขยายขนาดได้ แต่การสร้างการ์ด ณ เวลาที่เรนเดอร์ (render time) ทำได้

รูปแบบหลัก

สำหรับทุกหน้าที่คุณต้องการการ์ด ให้ลงนาม (sign) URL ด้วยชื่อเรื่องของหน้า (และฟิลด์เฉพาะของหน้าใดๆ) ในระหว่างการเรนเดอร์ FastOG จะสร้าง PNG ในการดึงข้อมูลครั้งแรก และ Cloudflare จะแคชไว้

tsx

// Next.js — app/docs/[slug]/page.tsx
export function generateMetadata({ params }) {
    const doc = await getDoc(params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "default",     // or "devtool", "launch", "company"
                title: doc.title,
                subtitle: doc.excerpt,
                domain: "yoursaas.com",
            })],
        },
    };
}

กรณีการใช้งาน SaaS ที่ดี

พื้นผิว	ไอเดียเทมเพลต
หน้าโปรดักต์ / หน้าการตลาด	`company`, `hero`, `product`
หน้าเอกสารประกอบ	`default`, `devtool`
รายการบันทึกการเปลี่ยนแปลง	`changelog`, `launch`
การ์ดผู้ใช้ / อวตารสาธารณะ	`testimonial`, `stats`, `image-right`
หน้าราคา	`pricing`, `stats`

คำถามที่พบบ่อย

ฉันจำเป็นต้องมีเทมเพลตสำหรับแต่ละกรณีการใช้งานหรือไม่?

ไม่จำเป็น เทมเพลตเดียวบวกกับฟิลด์ URL ที่คุณส่งผ่านก็เพียงพอแล้วในกรณีส่วนใหญ่ เทมเพลตสองสามแบบก็ครอบคลุมส่วนที่เหลือ ทั้งหมดเรนเดอร์ที่ขนาด 1200×630

ฉันจะจัดการกับหลายหน้าโดยไม่ทำให้โควตาหมดได้อย่างไร?

URL ที่เหมือนกันจะถูกแคชที่ขอบเครือข่าย (edge-cached) อย่างถาวรหลังจากการเรนเดอร์ครั้งแรก ดังนั้นหน้าเดียวกันที่ถูกแชร์ 1,000 ครั้งจะนับเป็นการเรนเดอร์เพียง 1 ครั้ง การเปลี่ยนแปลงเนื้อหาจะสร้าง URL ใหม่เท่านั้น

ฉันสามารถสร้างแบรนด์การ์ดด้วยเอกลักษณ์ของ SaaS ของฉันได้หรือไม่?

ได้ — ตั้งค่า brand_name, brand_logo, bg_color, ฟอนต์ และแพตเทิร์นตามแต่ละ URL ได้ ดู เพลย์กราวด์ เพื่อแสดงตัวอย่างเทมเพลตแบบเรียลไทม์

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

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

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

หัวข้อ