Berikut adalah ringkasan dalam 2 kalimat pendek: Menambahkan watermark pada thumbnail blog dapat mencegah plagiarisme dan memperkuat branding visual. Dengan memahami cara kerja Open Graph (OG), kamu dapat menambahkan watermark pada thumbnail blog yang muncul saat artikel dibagikan di media sosial.
Mungkin beberapa dari kalian pernah memperhatikan web media ketika men-share artikelnya di media sosial seperti Facebook, atau Whatsapp.
Kalian mungkin menemukan thumbnail yang tampil itu memiliki watermark, sedangkan saat artikel dibuka dan dibaca langsung di web, thumbnailnya tidak memiliki watermark.
Nah, di sini saya akan membahas bagaimana cara menambahkan watermark pada thumbnail blogger saat artikel dishare ke media sosial.
Kenapa Watermark pada Thumbnail Blog itu Penting?
Secara umum, watermark pada thumbnail blog sangat penting untuk mencegah plagiarisme dan memperkuat branding visual. Dengan adanya watermark, ini akan membuat siapa pun yang melihat atau membagikan ulang artikel akan tetap mengetahui siapa pembuat aslinya.
Berikut ini adalah alasan kenapa kamu harus memberikan watermark pada thumbnail blogmu.
- Sumber Trafik Organik: Jika artikel yang kamu buat dibagikan ke media sosial, watermark berfungsi sebagai tanda pengenal yang bisa mengarahkan pembaca untuk kembali mengunjungi blogmu jika dirasa artikel yang kamu buat bermanfaat.
- Perlindungan Hak Cipta: Menghalangi blogger yang tak bertanggung jawab mengklaim atau menggunakan thumbnail kamu tanpa persetujuan untuk kepentingan sendiri.
- Membangun Brand Awareness: Logo atau nama blog yang terpampang secara konsisten pada thumbnail akan membuat pembaca lebih mudah mengingat dan mengenali identitas visual situs blogmu.
- Bukti Kepemilikan: Menjadi bukti kuat jika suatu hari nanti ada orang yang tidak bertanggung jawab menyalin konten artikel blogmu secara langsung tanpa memberikan sumber rujukan, kamu bisa mengajukan keluhan atau takedown konten karena artikelmu digunakan tanpa izin.
Dengan menambahkan watermark pada thumbnail blog, secara tidak langsung kamu sudah membangun branding dan memberikan perlindungan hak cipta terhadap konten yang kamu buat.
Memahami Cara Kerja Open Graph (og:image)
Karena tujuan kita disini menampilkan watermark pada thumbnail blog hanya ketika artikel dibagikan ke sosial media, maka kita perlu memahami cara kerjanya.
Kita perlu tahu bagaimana cara media sosial mengenali gambar yang ada pada blog. Rahasianya ada pada protokol bernama Open Graph (OG).
Open Graph merupakan serangkaian meta tag HTML yang berfungsi sebagai kartu identitas agar platform seperti Facebook, WhatsApp, dan Telegram tahu cara menampilkan pratinjau (thumbnail, judul, dan deskripsi) saat tautan blog dibagikan.
Cara kerjanya seperti ini,
- Mengambil Data (Scraping): Bot media sosial akan mengunjungi tautan artikel blog yang dibagikan dan membaca isi dari tag
<head>dari kode HTML blog. - Pencarian Tag OG: Bot mencari deretan kode khusus yang diawali dengan
og:, sepertiog:titleuntuk judul,og:descriptionuntuk ringkasan artikel, danog:imageuntuk link thumbnail. - Menampilkan Pratinjau: Aplikasi kemudian mengambil informasi tersebut dan menyusunnya menjadi kotak pratinjau visual yang menarik, alih-alih menampilkan deretan teks URL biasa.
Secara bawaan, Blogger cukup pintar untuk mendeteksi dan menempatkan URL gambar pertama di artikelmu ke dalam tag og:image tersebut. Namun URL yang diletakkan adalah versi asli yang tentunya belum diberikan watermark.
Oleh karena itu, kita akan melakukan sedikit modifikasi pada property og:image ini, agar pratinjau thumbnail pada artikel yang dibagikan ke sosial media memiliki watermark.
Cara Hilangkan Parameter ?m=1 di Akhir URL Blogger
Cara Menambahkan Watermark pada Thumbnail Menggunakan ImageKit
Yah, rahasianya ada pada ImageKit. Kita membutuhkan bantuannya untuk mengolah gambar yang tadinya tidak memiliki watermark, kini memiliki watermark ketika dibagikan ke sosial media.
Buat Akun ImageKit
Silahkan akses situs resmi ImageKit di imagekit.io, dan buat akun terlebih dahulu dengan mengklik tombol SignUp.
Silahkan lengkapi form registrasi dengan memasukkan Email, Nama, dan Password.
Pada kolom Have a COUPON Code silahkan masukkan kode wfha2526 dan klik Submit.
Pada tahap ini, akun ImageKit berhasil dibuat.
Upload Gambar Watermark
Siapkan gambar berukuran 1280 x 128 dengan format .png transparan dan simpan dengan nama yang simple dan mudah diketik, misalnya watermark.png.
ukuran lebar dan tinggi gambar sebenarnya bisa kamu sesuaikan sendiri. Intinya penempatan watermark ini nantinya akan berada di bagian bawah gambar thumbnail, memanjang memenuhi lebar gambar thumbnail.
Selanjutnya, masuk ke menu Media Library di ImageKit, lalu klik tombol New di sudut kanan atas kemudian pilih File Upload untuk mengupload file gambar watermark yang sudah disiapkan tadi.
Silahkan cari gambar watermark yang telah kamu siapkan, kemudian klik Upload File.
jika berhasil diupload, hasilnya nanti akan tampil seperti pada gambar berikut ini.
Buat Web Proxy Origin
Karena gambar thumbnail kita berada di server Blogger, kita harus mengizinkan ImageKit untuk mengambil gambar dari luar dengan menggunakan fitur Web Proxy Origin.
Masih di halaman ImageKit. Silahkan akses menu External Storage, lalu klik tombol Add New untuk membuat Web Proxy.
Selanjutnya pada kolom Origin Name silahkan masukkan nama Origin yang ingin dibuat, di sini saya memberi nama Blogger Proxy, sedangkan pada kolom Origin Type silahkan pilih Web Proxy, selanjutnya klik tombol Save yang ada di sudut kanan atas.
Sampai di sini, Web Proxy berhasil dibuat. Dan sekarang pastikan kamu menyimpan URL Endpoint ImageKit milikmu, bisa kamu temukan di menu URL Endpoint, formatnya kurang lebih seperti ini ik.imagekit.io/imansani93.
Edit Template Blogger
Sekarang saatnya meracik kode di dalam template agar tag Open Graph memanggil URL dari ImageKit.
Buka dashboard Blogger, masuk ke menu Tema » Edit HTML.
Cari kode pemanggil gambar default dari Blogger. Biasanya kodenya seperti ini.
<meta expr:content='data:blog.postImageUrl' property='og:image'/>dan kode pemanggil gambar default dari Blogger untuk Twitter seperti ini.
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>Setiap template biasanya menerapkan kode og:image dan twitter:image yang berbeda-beda. Intinya, kamu cukup menemukan kode og:image dan twitter:image pada template yang kamu gunakan.
Setelah kedua kodenya ditemukan, hapus kode tersebut dan gantikan dengan kode integrasi ImageKit di bawah ini.
<b:if cond='data:view.isPost'>
<meta expr:content='"https://ik.imagekit.io/imansani93/tr:l-image,i-watermark.png,w-bw,lx-0,ly-N0,l-end/" + data:blog.postImageUrl' property='og:image'/>
<meta expr:content='"https://ik.imagekit.io/imansani93/tr:l-image,i-watermark.png,w-bw,lx-0,ly-N0,l-end/" + data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
</b:if>Ganti kode yang saya highlight di atas. imansani93 denga ID Endpoint kamu dan watermark.png dengan nama gambar watermark yang sudah kamu upload di ImageKit tadi.
Jika sudah selesai, klik Simpan Tema.
Dan saat artikel dibagikan, pratinjau thumbnail akan nampak seperti ini.
Kenapa Watermark Masih Belum Muncul?
Jika watermark masih belum muncul saat share artikel ke sosmed, itu karena sosial media seperti Facebook, Whatsapp, ataupun Twitter, membutuhkan waktu untuk membaca ulang struktur blog kamu. Untuk cara cepatnya kamu bisa mengikuti langkah berikut ini.
- Buka situs Facebook Sharing Debugger.
- Masukkan salah satu URL artikel blog kamu.
- Klik tombol Debug kemudian klik tombol Scrape Again.
- Lihat hasilnya pada bagian preview. Harusnya gambar yang muncul adalah gambar thumbnail artikel yang sudah ditempeli dengan logo watermark.
Kesimpulan
Memanfaatkan fitur API ImageKit langsung dari dalam template Blogger adalah cara paling mudah untuk melindungi thumbnail artikel kita. Tanpa perlu mengedit gambar satu per satu, setiap artikel yang dibagikan ke media sosial kini sudah memiliki identitas branding yang kuat secara otomatis.
Jika ada kesulitan saat meracik parameter ImageKit di template kamu, jangan ragu untuk meninggalkan komentar!
Saya juga menyediakan jasa custom template jika butuh bantuan dalam hal penerapan fitur ini kedalam template.
