การสร้าง OG Images แบบไม่ต้องเสียค่าใช้จ่ายเลยสักดอลลาร์เดียว

คุณสามารถสร้าง OG images สำหรับบทความหลายร้อยบทความได้โดยไม่ต้องเสียค่าใช้จ่ายสำหรับ API

ผมใช้ Playwright ในการถ่ายภาพหน้าจอ (screenshot) จาก HTML templates ซึ่งช่วยให้คุณควบคุม CSS ได้อย่างเต็มที่และไม่จำเป็นต้องใช้ API key ภายนอก

หากคุณรัน static site นี่คือวิธีที่ดีที่สุดในการจัดการการสร้างรูปภาพแบบเป็นชุด (batch generation)

นี่คือรายละเอียดแนวทางของผม

ทำไมผมถึงเลือก Playwright แทนที่จะเป็นตัวเลือกอื่น:

  • Cloudinary: ต้องเสียเงินสำหรับฟอนต์แบบกำหนดเองและมีไวยากรณ์ URL ที่ซับซ้อน
  • Vercel OG: ใช้ได้กับ dynamic sites แต่ผมใช้ static sites บน Cloudflare
  • Node-canvas: ตั้งค่าใน CI ได้ยากเนื่องจากมี dependencies ของ C++
  • Pillow: ใช้งานยากสำหรับ CSS layouts ที่ซับซ้อนหรือ flexbox

วิธีการใช้ Playwright นั้นง่ายมาก ผมสร้าง HTML string พร้อมกับ CSS จากนั้นส่งไปยัง headless browser แล้วจึงทำการถ่ายภาพหน้าจอ

เบราว์เซอร์จะจัดการทุกอย่างให้ ทั้งฟอนต์, gradients และ flexbox

รายละเอียดทางเทคนิคที่สำคัญ:

  • Accent Colors: สคริปต์ของผมใช้ regex เพื่อเลือกสีตามแท็กของบทความ เช่น แท็ก "AI" จะเลือกสีม่วง และแท็ก "Webdev" จะเลือกสีน้ำเงิน
  • Dynamic Sizing: สคริปต์จะปรับขนาดฟอนต์ตามความยาวของชื่อเรื่องเพื่อป้องกันข้อความล้น (overflow)
  • การหลีกเลี่ยงปัญหาเรื่องฟอนต์: ผมใช้ wait_until="networkidle" เพื่อให้แน่ใจว่า Google Fonts โหลดเสร็จก่อนที่จะทำการถ่ายภาพหน้าจอ หากไม่มีส่วนนี้ รูปภาพจะใช้ฟอนต์พื้นฐานของระบบแทน
  • การเพิ่มประสิทธิภาพความเร็ว: ผมเปิด browser instance เพียงอันเดียวและใช้ page object ซ้ำสำหรับทุกบทความ ซึ่งช่วยประหยัดเวลาได้อย่างมากใน CI pipeline

ขั้นตอนการทำงาน:

  1. สคริปต์สร้างไฟล์ PNG
  2. สคริปต์เขียน URL ของรูปภาพกลับลงไปใน frontmatter ของบทความ
  3. CI pipeline ทำการ commit รูปภาพ
  4. เว็บไซต์ทำการ deploy

สิ่งนี้ช่วยให้มั่นใจได้ว่ารูปภาพจะพร้อมใช้งานก่อนที่บทความจะถูกเผยแพร่ไปยังแพลตฟอร์มอย่าง Dev.to หรือ Hashnode

เมื่อไหร่ที่ควรหลีกเลี่ยงวิธีนี้:

อย่าใช้วิธีนี้สำหรับการสร้างแบบ on-demand เพราะ Playwright ใช้เวลาประมาณ 2 วินาทีต่อหนึ่งรูปภาพ และต้องใช้ browser binary ที่มีขนาดใหญ่ ซึ่งช้าเกินไปสำหรับการเรียกใช้งานแบบ live request

ให้ใช้วิธีนี้สำหรับการ build แบบเป็นชุด (batch builds) ที่คุณสามารถควบคุมเวลาได้

แหล่งที่มา: https://dev.to/morinaga/what-i-learned-generating-og-images-for-articles-with-playwright-and-zero-api-cost-31o4