Open Graph Image atau og:image adalah gambar yang ditampilkan di akun media sosial saat orang lain membagikan tautan artikel atau video dari situs web. Secara default, meta tag open graph menentukan bagaimana URL ditampilkan saat dibagikan di situs media sosial.
Berikut adalah contoh cuplikan artikel yang memiliki meta tag open graph image yang dibagikan ke twitter.
Di artikel kali ini saya ingin berbagi tutorial cara membuat open graph image secara dinamis untuk semua halaman atau postingan blogger yang dapat disesuaikan secara otomatis.
Situasi
Di blogger, untuk menampilkan image open graph atau og:image dengan memanfaatkan gambar awal yang ada pada postingan atau halaman blogger, contoh sederhana yang bisa kamu temukan pada kebanyakan template custom adalah seperti berikut:
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='Add_your_image_url_here' property='og:image'/>
</b:if>Kode diatas berfungsi untuk menampilkan cuplikan gambar blog dengan memanfaatkan tag data:blog.postImageUrl. Tag ini adalah data universal blogger yang berisi url gambar utama dari artikel atau halaman.
Jika artikel atau halaman tidak berisi gambar, maka yang akan ditampilkan sebagai open graph image adalah link gambar yang disisipkan secara manual. Gambar manual inilah yang akan kita bahas diartikel kali ini dengan memanfaatkan layanan Cloudinary.
Apa itu Cloudinary?
Cloudinary merupakan layanan berbasis cloud yang memungkinkan kamu untuk mengelola, mengubah, dan mengirimkan assets berupa gambar dan video.
Cloudinary memiliki paket layanan perbayar dan gratis. Untuk akun gratis memiliki limit storage yang bisa digunakan sebesar 25GB, bandwidth sebanyak 25 GB/Bulan dan transformasi gambar atau video sebanyak 25K.
Image Transformations
Untuk membuat Open Graph Image Dinamis menyesuaikan halaman kita bisa memanfaatkan fitur Image transformations Cloudinary untuk memanipulasi gambar ke format, tampilan yang di inginkan.
URL transformations aset Cloudinary secara default memiliki struktur berikut:
https://res.cloudinary.com/<cloud_name>/<asset_type>/<delivery_type>/<transformations>/<version>/<public_id>.<extension>Kita bisa menambahkan parameter transformasi untuk menyesuaikan image dengan kebutuhan, dalam pembahasan ini karena kita akan menggunakan image tersebut sebagai open graph yang dinamis maka tidak perlu harus membuat image satu persatu untuk setiap halaman.
Cara Penerapan
Berikut adalah contoh url image yang saya miliki di Cloudinary, ini adalah titik awal dimana kita akan memanipuasinya. Kamu bisa daftar akun gratis dan menyiapkan gambar kamu sendiri.
https://res.cloudinary.com/inputekno/image/upload/og.jpgUntuk mengisi gambar OG yang kosong, kamu bisa mengisinya dengan lapisan layar berupa parameter teks l_text: dan parameter styling seperti berikut, kamu bisa mempelari setiap path yang saya gunakan di dokumentasi resminya.
https://res.cloudinary.com/inputekno/image/upload/co_rgb:DDE0E4,l_text:arial_36_normal_left:Inputekno,c_fit,w_800,h_450/fl_layer_apply,g_west,x_80,y_-80/co_rgb:242831,c_fit,w_800,h_450,l_text:arial_50_bold_normal_left:Inputekno/fl_layer_apply,g_west,x_80,y_20/og.jpgnormal_left:Inputekno adalah text yang ditampilkan, co_rgb untuk mengatur warna text, serta beberapa parameter lain. Lihat gambar berisi lapisan teks disini
Bukan hanya teks, kamu bisa memodifikasi transformasi gambar dengan banyak hal, Jika dibahas disini bisa terlalu panjang, kamu bisa membaca halaman dokumentasi resmi untuk dipelajari. Contoh sederhana pendekatan ditutorial ini bisa jadi dasar untuk kamu integrasikan kedalam platform Blogger.
Sekarang kamu sudah mendapatkan url gambar yang bisa digunakan sebagai tampilan visual gambar OG, Untuk menyesuaikan teks tersebut di blogger agar sesuai dengan judul halaman, kita perlu mengganti teks yang ditampilkan dengan tag blogger yang berisi judul setiap halaman.
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta expr:content='"https://res.cloudinary.com/inputekno/image/upload/b_rgb:f8f8f8/co_rgb:DDE0E4,c_fit,w_800,h_450,l_text:arial_32_normal_left:" + data:blog.title + "/fl_layer_apply,g_west,x_80,y_-80/co_rgb:242831,c_fit,w_800,h_450,l_text:arial_50_bold_normal_left:" + (data:blog.pageName.escaped ? data:blog.pageName.escaped : data:view.title.escaped) + "/fl_layer_apply,g_west,x_80,y_20/og.jpg"' property='og:image'/>
</b:if>Kesimpulan
Menambahkan gambar OG secara dinamis disemua halaman blogger bisa jadi opsi terbaik untuk meningkatkan kualitas tampilan ketika halaman blog kamu dibagikan di media sosial seperti Facebook, Twitter dll. Gambar OG akan memastikan bahwa tampilan pratayang (preview) dari halaman blog menarik dan sesuai dengan konten yang di dalamnya.