Membuat Gambar Open Graph Dinamis dengan Cloudinary

Pengantar

Berbagi situs web di media sosial adalah salah satu hal terpenting yang dapat kita lakukan untuk memastikan bahwa audiens melihatnya. Namun, jika kita hanya menampilkan tautan, akan sulit untuk menarik perhatian audiens.

Dengan Open Graph, kita dapat mengontrol bagaimana situs web kita dibagikan di media sosial dengan menampilkan gambar, judul, deskripsi, dan tautan dengan cara yang membuat audiens tertarik untuk melihatnya.

Terlihat bahwa dengan Open Graph, website menjadi lebih menarik saat dibagikan di media sosial. Namun, jika kita melihat tag meta situs web, kita dapat melihat bahwa Open Graph adalah statis.

<meta
  property="og:url"
  content="https://aged-clave-571.notion.site/Google-Search-Operators-Cheat-Sheet-e0b50566aa2a4dc6a9643dceda52a3a4/"
/>
<meta property="og:type" content="website" />
<meta
  property="og:title"
  content="Notion – The all-in-one workspace for your notes, tasks, wikis, and databases."
/>
<meta
  property="og:description"
  content="A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team"
/>
<meta
  property="og:image"
  content="https://www.notion.so/images/meta/default.png"
/>

Daripada membuat gambar Open Graph satu per satu, bagaimana kita bisa membuatnya menjadi dinamis? Dalam tutorial ini, kita akan menggunakan cloudinary untuk membangun Open Graph yang dinamis.

Memulai Cloudinary

Pertama-tama, jika kalian tidak familiar dengan cloudinary, pada dasarnya cloudinary adalah layanan hosting gambar cloud yang memungkinkan kalian mengubah gambar dan video agar dimuat lebih cepat tanpa penurunan visual.

Jika kalian belum memiliki akun Cloudinary, kalian dapat mendaftar sekarang. Informasi lebih lanjut tentang cara mendaftar di cloudinary dapat ditemukan di Panduan Memulai Pengembang Media yang Dapat Diprogram | mendung

Cloudinary Transformation

Dengan cloudinary, kita dapat melakukan transformasi URL alih-alih menggunakan editing tools. Kita dapat melakukan ini dengan mengakses URL seperti ini:

Ada banyak hal yang dapat kita lakukan dengan cloudinary, kalian dapat memeriksa dokumentasinya untuk informasi lebih lanjut. Berikut adalah beberapa transformasi yang dapat kita gunakan:

Pemangkasan gambar berbasis deteksi wajah

Dengan menggunakan transformasi c_crop, g_face, kita dapat memotong gambar berdasarkan wajah.

Pemosisian teks overlay

Dengan menggunakan transformasi l_text, kita dapat meletakkan teks pada gambar. Misalnya jika kita ingin overlay teks Haiiiiii pada gambar, kita dapat menggunakan transformasi berikut:

Cloudinary juga menyediakan "buku masak" untuk membuat transformasi yang dapat memudahkan kita untuk kustomisasi gambar.

Desain Open Graph

Sebelum kita mulai mengimplementasikan open graph dengan transformasi cloudinary, kita perlu mendesain open graph di figma. Berikut adalah hasil desain yang akan kita gunakan.

Setelah itu, kita dapat memisahkan desain menjadi beberapa bagian.

Saya paham bahwa hr adalah singkatan dari horizontal rule, tetapi saya menggunakannya untuk garis diagonal. Sejujurnya, saya selalu menggunakan nama hr tidak hanya untuk horizontal tetapi juga untuk vertikal.

Open Graph Dinamis dengan Cloudinary

Kita perlu menyusun folder di Cloudinary tergantung pada slug dari postingan untuk membuat Open Graph menjadi dinamis. Berikut adalah struktur folder pada cloudinary yang telah saya buat.

Saya menempatkan desain yang kita pisahkan sebelumnya menjadi dua bagian:

1. social.png dan hr.png di folder /jagad.dev (statis)
2. header.png di setiap folder post slug /jagad.dev/post/[slug] (dinamis)

Berikut adalah implementasi untuk menampilkan social.png.

Sebagai informasi, di cloudinary, kita tidak perlu menulis format gambar seperti .png atau .jpg di url. Sebagai gantinya, format gambar akan disajikan sebagai .webp.

Setelah itu kita gabungkan dengan header.png yang ada di folder /jagad.dev/posts/[slug]. Misalnya, jika saya menggunakan slug steam-now-playing, berarti gambar header ada di folder /jagad.dev/posts/steam-now-playing.

Karena tidak ingin hanya menampilkan header persegi di Open Graph, saya menggunakan hr.png untuk membuat garis diagonal di sebelah kiri gambar.

untuk membuat judul postingan yang dinamis, kita bisa menggunakan transformasi text overlay seperti berikut:

Implementasi

Implementasi dapat dilakukan dengan sangat mudah dengan mengubah post slug dan post title. Berikut ini adalah contoh implementasi menggunakan bahasa pemrograman JavaScript.

const ogimage = `https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/w_600,h_630,c_fill,l_jagad.dev:posts:${SLUG}:header/fl_layer_apply,g_east/w_192,h_630,c_fill,l_jagad.dev:hr/fl_layer_apply,g_west,x_485/w_500,h_630,c_fit,co_rgb:ffffff,g_west,x_60,y_-40,l_text:arial_50_bold:${TITLE}/jagad.dev/social`

Berikut adalah hasil dari open graph dinamis yang telah diimplementasikan pada website ini.

Kesimpulan

Keuntungan membuat open graph dinamis dengan cloudinary adalah kecepatan pemuatan yang cepat dibandingkan dengan menggunakan puppeteer atau next-api-og-image.