19  18. OG Image Dynamic

19.0.1 ทำไมต้องใช้ Dynamic OG Image?

🤔 Static vs Dynamic OG Image? - Static: ภาพเดียวใช้ทุกหน้า — สะดวก แต่แชร์ลิงก์ไม่รู้ว่าเป็นหน้าไหน - Dynamic: สร้างภาพอัตโนมัติตาม content แต่ละหน้า - Social share rate เพิ่มขึ้น 20-40% เมื่อ OG image มีข้อความเฉพาะหน้า

19.0.2 Next.js Dynamic OG (Satori + React)

// src/app/opengraph-image.tsx
import { ImageResponse } from "next/og"

export const size = { width: 1200, height: 630 }
export const contentType = "image/png"

export default function OGImage() {
  return new ImageResponse(
    (
      <div style={{
        background: "#050505",
        width: 1200, height: 630,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        padding: "60px 80px",
      }}>
        <h1 style={{ color: "#fff", fontSize: 64 }}>
          MIMO | AI Tools Thailand
        </h1>
      </div>
    ),
    { ...size }
  )
}

⚠️ Satori ไม่รองรับ CSS เต็ม — ใช้ inline style เท่านั้น