Contents
    Membuat Gambar Open Graph Dinamis dengan Cloudinary

    Membuat Gambar Open Graph Dinamis dengan Cloudinary

    Membuat gambar open graph dinamis dengan bantuan transformasi URL Cloudinary

    Posted by Jagad on June 21, 2022
    -- views

    4 min read

    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.

    Open graph Example

    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.

    Meme about Open Graph

    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:

    https://res.cloudinary.com/demo/image/upload/[YOUR_TRANSFORMATIONS]/lady.jpg

    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.

    https://res.cloudinary.com/demo/image/upload/c_crop,g_face,h_400,w_400/lady.jpg
    Face detection-based image cropping

    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:

    https://res.cloudinary.com/demo/image/upload/l_text:Arial_45_bold:Haiiiiiiiiii,g_north_west,x_20,y_20/lady.jpg
    Text overlay positioning

    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.

    Design Result

    Setelah itu, kita dapat memisahkan desain menjadi beberapa bagian.

    Seperate Design Result

    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.

    Cloudinary Structure Folder

    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.

    https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/jagad.dev/social

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

    Showing Social

    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.

    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:steam-now-playing:header/fl_layer_apply,g_east/jagad.dev/social
    Showing Social + header

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

    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:steam-now-playing:header/fl_layer_apply,g_east/w_192,h_630,c_fill,l_jagad.dev:hr/fl_layer_apply,g_west,x_485/jagad.dev/social
    Showing Social + header + hr

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

    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:steam-now-playing: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:This%20is%20dynamic%20open%20graph%20with%20cloudinary/jagad.dev/social
    Showing Social + header + hr + text overlay

    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.

    Open Graph on this website

    Kesimpulan

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


    Post Reactions
    LIKE
    LOVE
    Wow
    YAY
    Contributors
    tututanjar

    The writing on this website may contain errors in grammar, punctuation, etc. Please make a contribution here