𝗠𝗲𝗻𝗴𝗵𝗮𝘀𝗶𝗹𝗸𝗮𝗻 𝗢𝗚 𝗜𝗺𝗮𝗴𝗲𝘀 𝗱𝗲𝗻𝗴𝗮𝗻 𝗕𝗶𝗮𝘆𝗮 𝗡𝗼𝗹 𝗗𝗼𝗹𝗹𝗮𝗿

Anda dapat menghasilkan gambar OG untuk ratusan artikel tanpa perlu membayar API.

Saya menggunakan Playwright untuk mengambil tangkapan layar (screenshot) templat HTML. Ini memberi Anda kontrol CSS penuh dan tidak memerlukan kunci eksternal.

Jika Anda menjalankan situs statis, ini adalah cara terbaik untuk menangani pembuatan gambar secara massal (batch).

Berikut adalah rincian pendekatan saya.

Mengapa saya memilih Playwright dibandingkan opsi lainnya:

  • Cloudinary: Memerlukan biaya untuk font kustom dan memiliki sintaks URL yang kompleks.
  • Vercel OG: Berfungsi untuk situs dinamis, tetapi saya menggunakan situs statis di Cloudflare.
  • Node-canvas: Sulit untuk dikonfigurasi di CI karena dependensi C++.
  • Pillow: Sulit digunakan untuk tata letak CSS yang kompleks atau flexbox.

Metode Playwright sangat sederhana. Saya membuat string HTML dengan CSS. Saya meneruskannya ke browser headless. Saya mengambil tangkapan layar.

Browser menangani semuanya: font, gradien, dan flexbox.

Detail teknis utama:

  • Warna Aksen: Skrip saya menggunakan regex untuk memilih warna berdasarkan tag artikel. Tag "AI" memilih warna ungu. Tag "Webdev" memilih warna biru.
  • Ukuran Dinamis: Skrip menyesuaikan ukuran font berdasarkan panjang judul untuk mencegah overflow.
  • Menghindari Masalah Font: Saya menggunakan wait_until="networkidle". Ini memastikan Google Fonts dimuat sebelum tangkapan layar diambil. Tanpa ini, gambar akan menggunakan font sistem generik.
  • Optimasi Kecepatan: Saya membuka satu instansi browser dan menggunakan kembali objek halaman untuk semua artikel. Ini menghemat banyak waktu dalam pipeline CI.

Alur kerja:

  1. Skrip menghasilkan PNG.
  2. Skrip menulis kembali URL gambar ke dalam frontmatter artikel.
  3. Pipeline CI melakukan commit pada gambar tersebut.
  4. Situs dideploy.

Ini memastikan gambar sudah tayang sebelum artikel dipublikasikan ke platform seperti Dev.to atau Hashnode.

Kapan harus menghindari ini:

Jangan gunakan ini untuk pembuatan on-demand. Playwright membutuhkan waktu sekitar 2 detik per gambar. Ini memerlukan biner browser yang berat. Ini terlalu lambat untuk permintaan langsung (live request).

Gunakan ini untuk build massal (batch builds) di mana Anda dapat mengontrol waktunya.

Sumber: https://dev.to/morinaga/what-i-learned-generating-og-images-for-articles-with-playwright-and-zero-api-cost-31o4