## 18. OG Image Dynamic

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

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

### Next.js Dynamic OG (Satori + React)

```typescript
// 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 เท่านั้น