Begini Cara Kami Memperbaiki Pratinjau Blog yang Rusak

Saya membagikan tautan blog kami di X. Gambar pratinjaunya terlihat salah. Alih-alih gambar artikel teknis, yang muncul justru spanduk penjualan.

Saya memeriksa tujuh postingan terakhir kami. Semuanya menampilkan spanduk penjualan yang sama. Artikel pembahasan mendalam (deep-dive) teknik kami malah terlihat seperti iklan. Hal ini merusak kredibilitas kami.

Masalahnya sederhana. Kode kami memiliki aturan fallback. Jika sebuah postingan tidak memiliki gambar unggulan (featured image), sistem akan menggunakan spanduk penjualan default. Karena kami tidak mengatur gambar unggulan untuk 42 postingan kami, setiap postingan menggunakan gambar yang sama.

Kami memiliki dua pilihan:

  • Opsi A: Membuat 42 gambar secara manual. Ini memakan waktu dan menambah beban kerja untuk setiap postingan baru.
  • Opsi B: Membangun generator gambar dinamis. Ini akan membuat gambar khusus untuk setiap postingan secara otomatis.

Kami memilih Opsi B. Kami membangun mesin kecil menggunakan PHP GD.

Begini cara kerjanya:

  • Mesin ini membuat PNG berukuran 1200x630 sesuai permintaan (on demand).
  • Ia menggunakan latar belakang gelap dan judul postingan.
  • Ia mengambil judul dari database.
  • Ia menyimpan gambar ke disk setelah render pertama.
  • Setiap permintaan berikutnya akan menyajikan file yang telah di-cache. Hal ini membuatnya sangat cepat.

Kami menyelesaikan dua masalah spesifik selama proses pembuatan ini:

  1. Dukungan bahasa: Hanya menggunakan font Latin seperti Inter menyebabkan teks bahasa Jepang muncul sebagai kotak kosong. Kami menambahkan pengecekan untuk menggantinya dengan Noto Sans JP untuk judul berbahasa Jepang.

  2. Nada visual: Blog teknologi profesional seperti Vercel atau PlanetScale menggunakan kartu gelap yang bersih. Kami menyamakan gaya ini untuk membangun kepercayaan pembaca kami.

Pelajaran penting untuk Anda:

  • Audit pratinjau media sosial Anda. Gunakan alat untuk memeriksa apakah tag og:image Anda berfungsi.
  • Hindari pembuatan karya seni manual untuk setiap postingan. Hal itu tidak dapat diskalakan (not scalable).
  • Gunakan stack yang sederhana. PHP GD ditambah disk cache bersifat ringan dan efektif.
  • Rencanakan untuk berbagai bahasa. Selalu sertakan font yang mendukung seluruh set karakter Anda.

Gambar blog Anda merepresentasikan merek Anda. Jangan biarkan fallback default merusak kesan pertama Anda.

Sumber: https://dev.to/susumun/implementing-a-dynamic-ogp-image-generator-for-our-blog-php-gd-per-post-1200-630-cards-46al