OG Images ในระดับขนาดใหญ่

การสร้าง og:image ในระดับขนาดใหญ่หมายถึงการสร้าง social preview ที่ไม่ซ้ำกันและถูกต้องสำหรับทุกหน้าเว็บของไซต์ขนาดใหญ่ — ไม่ว่าจะเป็นบล็อกโพสต์ สินค้า หรือหน้าเอกสารนับพันหน้า — โดยอัตโนมัติ FastOG จะเรนเดอร์แต่ละภาพตามคำขอ (1 render) และ Cloudflare จะแคช URL ที่เหมือนกันไว้ถาวร ดังนั้นขนาดของเว็บไซต์จึงไม่เพิ่มต้นทุนหรือเวลาในการตั้งค่า

ปัญหาของการสร้างภาพที่ไม่ซ้ำกันในระดับขนาดใหญ่

การสร้างภาพขนาด 1200×630 หลายพันภาพด้วยมือนั้นไม่สามารถทำได้จริง ทีมส่วนใหญ่จึงหันไปใช้การ์ดภาพเดียวแบบทั่วไปสำหรับทั้งเว็บไซต์ ซึ่งถือเป็นการพลาดโอกาส เพราะการ์ดภาพต่อหน้าเพจที่มีชื่อเรื่องจริงจะได้รับยอดแชร์และการคลิกมากกว่า วิธีแก้ไขคือการเรนเดอร์แบบกำหนดผลลัพธ์ได้ตามต้องการ (deterministic on-demand rendering): ภาพจะถูกสร้างขึ้นจากข้อมูลของหน้าเพจนั้นเองในขณะเรนเดอร์

เหตุใด FastOG จึงรองรับการขยายขนาดได้ดี

แนวคิดหลักคือ URL ที่ลงนามด้วยเนื้อหาและแคชไว้:

คุณลงนาม URL จากชื่อหน้าและฟิลด์ต่าง ๆ ในเวลาที่เรนเดอร์ (เป็นฟังก์ชันบริสุทธิ์ของเนื้อหา)
ครอว์เลอร์ดึงข้อมูล URL หนึ่งครั้ง; FastOG เรนเดอร์ PNG (1 ครั้ง) และแคชไว้ที่ขอบเครือข่าย
การดึงข้อมูล URL เดียวกัน ในครั้งต่อ ๆ ไปทั้งหมดจะถูกเสิร์ฟจากแคช — ทันทีและ ไม่นับรวม

ดังนั้น หน้าเว็บที่แตกต่างกัน 10,000 หน้านับเป็นการเรนเดอร์ 10,000 ครั้งเพียงครั้งเดียว และการแชร์ไม่จำกัดจำนวนไม่มีค่าใช้จ่ายหลังจากนั้น

การปรับใช้แบบเป็นชุด / เป็นระบบ

เพื่อปรับใช้ og:image กับทั้งเว็บไซต์ ให้สร้าง URL ขึ้นในระหว่างการ build หรือเมื่อเผยแพร่สำหรับทุกหน้า:

tsx

// Static generation — generateMetadata per route
export async function generateStaticParams() {
    return posts.map((p) => ({ slug: p.slug }));
}

export function generateMetadata({ params }) {
    const post = posts.find((p) => p.slug === params.slug);
    return {
        openGraph: {
            images: [generateOgImageUrl({
                template: "blog",
                title: post.title,
                subtitle: post.excerpt,
                author: post.author,
            })],
        },
    };
}

รูปแบบที่ช่วยให้การขยายขนาดมีต้นทุนต่ำ

รูปแบบ	เหตุผลที่ช่วยได้
ลงนามในขั้นตอน build/render	URL ที่กำหนดค่าได้แน่นอน → แคชที่ใช้ร่วมกันได้
ใช้เทมเพลตซ้ำต่อประเภทเนื้อหา	แบรนด์ที่สอดคล้องกัน ลดการตัดสินใจด้านการออกแบบ
แคช URL ที่เหมือนกัน	การแชร์ซ้ำไม่นับเพิ่ม
สร้างตอนเผยแพร่ ไม่ใช่ทุกครั้งที่มีคำขอ	หลีกเลี่ยงการ render แบบ cold ในครั้งแรกที่แชร์

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

การ์ด 1,000 หรือ 10,000 หน้ามีค่าใช้จ่ายเท่าไร?

หนึ่งเรนเดอร์ต่อรูปภาพ ที่ไม่ซ้ำกัน หนึ่งรูป หน้าไม่ซ้ำกัน 10,000 หน้า = เรนเดอร์ 10,000 ครั้งเพียงครั้งเดียว ส่วนการแชร์ซ้ำไม่จำกัดจำนวนไม่มีค่าใช้จ่าย ดู ราคา สำหรับแผน Dynamic API

แล้วหน้าที่เนื้อหามีการเปลี่ยนแปลงบ่อยล่ะ?

การเปลี่ยนแปลงเนื้อหาแต่ละครั้งจะสร้าง URL ใหม่และเรนเดอร์ใหม่ (นับเป็นโควต้า 1 ครั้ง) ส่วนหน้าที่เนื้อหาคงที่จะถูกแคชไว้

ฉันสามารถสร้าง OG image ระหว่างการ build แบบ static ได้หรือไม่?

ได้ — หลายทีมสร้างและจัดเก็บ URL ของรูปภาพในขั้นตอน build/publish (SSG) เพื่อให้ไม่มีการเรนเดอร์แบบ cold render ในการแชร์ครั้งแรก

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

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

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

หัวข้อ