Menampilkan Gambar Thumbnail Blog di WhatsApp Saat Membagikan Link

Pernah membagikan link artikel Blogger ke WhatsApp, tetapi gambar thumbnail tidak muncul pada pratinjau tautan? Kondisi tersebut cukup sering membuat tampilan link terlihat kurang menarik karena penerima hanya melihat URL tanpa informasi visual yang lengkap.

Salah satu cara untuk membantu mengatur tampilan pratinjau ketika sebuah halaman dibagikan adalah dengan menggunakan Open Graph Meta Tags. Metadata ini memungkinkan halaman web memberikan informasi seperti judul, gambar, URL, dan deskripsi kepada platform yang membaca metadata tersebut.

Pada tutorial ini, kita akan membahas cara menampilkan thumbnail blog di WhatsApp saat membagikan link menggunakan Open Graph pada template Blogger. Selain gambar, kita juga akan mengatur judul dan deskripsi agar informasi pratinjau artikel lebih terstruktur.

Apa Itu Open Graph Meta Tags?

Open Graph merupakan sekumpulan metadata yang digunakan halaman web untuk memberikan informasi kepada platform sosial atau aplikasi yang mengambil data dari sebuah URL.

Beberapa metadata Open Graph yang umum digunakan antara lain:

og:title untuk menentukan judul halaman.
og:url untuk menentukan URL halaman.
og:image untuk menentukan gambar pratinjau.
og:description untuk memberikan deskripsi halaman.
og:type untuk menentukan tipe konten.

Metadata tersebut bekerja di balik layar dan tidak ditampilkan sebagai konten biasa pada halaman blog. Platform yang mendukung Open Graph dapat membaca informasi tersebut ketika melakukan pengambilan data dari URL.

Mengapa Thumbnail Penting Saat Membagikan Link Blogger ke WhatsApp?

Thumbnail memberikan informasi visual yang membantu penerima mengenali isi sebuah link sebelum membukanya. Artikel dengan gambar yang relevan juga dapat terlihat lebih informatif dibandingkan link yang hanya menampilkan alamat halaman.

Selain gambar, judul dan deskripsi juga berperan dalam memberikan konteks mengenai isi artikel. Karena itu, kombinasi thumbnail, judul, dan deskripsi dapat membantu membuat tampilan pratinjau link lebih lengkap.

Namun, perlu dipahami bahwa Open Graph tidak menjamin jumlah klik atau peningkatan trafik. Tampilan dan hasil pratinjau tetap dapat dipengaruhi oleh aplikasi, cache, konfigurasi halaman, serta cara platform mengambil metadata.

Bagaimana Cara Kerja Thumbnail Open Graph di Blogger?

Secara sederhana, prosesnya bekerja seperti berikut:

Artikel Blogger
      ↓
Metadata Open Graph
      ↓
Link dibagikan ke WhatsApp
      ↓
WhatsApp mengambil informasi halaman
      ↓
Thumbnail, judul, dan deskripsi
digunakan untuk pratinjau link

Pada kode yang digunakan dalam tutorial ini, halaman utama dan halaman artikel dipisahkan menggunakan kondisi Blogger. Halaman utama menggunakan gambar logo sebagai gambar cadangan, sedangkan artikel mencoba menggunakan gambar utama yang tersedia.

Manfaat Menggunakan Open Graph di Blogger

Membantu mengatur gambar pratinjau pada platform yang mendukung Open Graph.
Mengatur judul link agar sesuai dengan halaman yang dibagikan.
Menyediakan deskripsi artikel untuk melengkapi informasi pratinjau.
Membuat tampilan link lebih konsisten di berbagai platform yang membaca metadata.
Dapat diterapkan melalui template Blogger sehingga tidak perlu memasukkan metadata secara manual pada setiap artikel.

Kode Open Graph Thumbnail untuk Blogger

Berikut kode Open Graph yang digunakan pada tutorial ini. Kode tersebut membedakan halaman utama dan halaman artikel.


<!-- Kode Open Graph Thumbnail WhatsApp Mulai -->
<meta content='website' property='og:type'/>

<b:if cond='data:view.isHomepage'>

    <meta expr:content='data:blog.title' property='og:title'/>
    <meta expr:content='data:blog.homepageUrl' property='og:url'/>
    <meta content='URL_GAMBAR_LOGO_ANDA_DI_SINI' property='og:image'/>
    <meta expr:content='data:blog.metaDescription' property='og:description'/>

<b:elseif cond='data:view.isPost'/>

    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.url' property='og:url'/>

    <b:if cond='data:view.featuredImage'>

        <meta expr:content='data:view.featuredImage' property='og:image'/>

    <b:else/>

        <meta content='URL_GAMBAR_LOGO_ANDA_DI_SINI' property='og:image'/>

    </b:if>

    <meta expr:content='data:blog.metaDescription ? data:blog.metaDescription : data:post.snippet' property='og:description'/>

</b:if>

<!-- Kode Open Graph Thumbnail WhatsApp Selesai -->

Penjelasan Kode Open Graph Blogger

1. og:type

<meta content='website' property='og:type'/>

Tag tersebut menentukan tipe konten Open Graph yang digunakan oleh halaman.

2. Metadata Halaman Utama

<b:if cond='data:view.isHomepage'>

Kondisi ini digunakan ketika halaman yang sedang dibuka merupakan halaman utama blog.

Informasi yang digunakan meliputi:

data:blog.title
data:blog.homepageUrl
data:blog.metaDescription

Sementara itu, gambar menggunakan URL logo sebagai gambar cadangan.

3. Metadata Halaman Artikel

<b:elseif cond='data:view.isPost'>

Kondisi ini digunakan ketika halaman yang dibuka merupakan postingan atau artikel Blogger.

Judul menggunakan nama halaman dan URL mengambil alamat halaman yang sedang dibuka.

4. Gambar Utama Artikel

<b:if cond='data:view.featuredImage'>
    <meta expr:content='data:view.featuredImage' property='og:image'/>
<b:else/>
    <meta content='URL_GAMBAR_LOGO_ANDA_DI_SINI' property='og:image'/>
</b:if>

Bagian ini mencoba menggunakan gambar utama yang tersedia sebagai nilai og:image. Jika tidak tersedia, gambar logo digunakan sebagai alternatif.

Cara Memasang Open Graph di Template Blogger

Karena Open Graph merupakan metadata halaman, pemasangannya dilakukan pada bagian <head> template Blogger, bukan sebagai konten biasa di dalam artikel.

Langkah 1: Buka Dashboard Blogger

Masuk ke dashboard Blogger dan pilih blog yang ingin Anda pasang kode Open Graph.

Langkah 2: Pilih Menu Tema

Pada menu Blogger, pilih Tema untuk membuka pengaturan template blog.

Langkah 3: Buka Edit HTML

Buka opsi Edit HTML untuk mengakses kode sumber template Blogger.

Langkah 4: Cari Tag <head>

Gunakan fitur pencarian dengan menekan:

CTRL + F

Kemudian cari:

<head>

Letakkan kode Open Graph setelah bagian <head> pada lokasi yang sesuai dengan struktur template Anda.

Langkah 5: Ganti URL Gambar Logo

Cari dua bagian berikut:

URL_GAMBAR_LOGO_ANDA_DI_SINI

Ganti dengan URL gambar logo atau gambar cadangan yang ingin digunakan.

Contoh:

<meta content='https://contoh.com/logo-blog.jpg' property='og:image'/>

Pastikan gambar dapat diakses secara publik dan URL-nya benar.

Langkah 6: Simpan Perubahan

Periksa kembali kode sebelum menyimpan template. Pastikan tidak ada tag yang terhapus atau tanda kutip yang berubah.

Cara Mengatur Thumbnail Artikel Blogger

Gunakan gambar yang relevan dengan isi artikel sebagai gambar utama. Thumbnail yang baik sebaiknya memiliki kualitas yang cukup dan dapat diakses secara publik.

Beberapa hal yang perlu diperhatikan:

Gunakan gambar yang sesuai dengan topik artikel.
Hindari gambar yang terlalu kecil atau buram.
Pastikan URL gambar dapat diakses tanpa login.
Gunakan gambar yang tidak menyesatkan isi artikel.
Perhatikan rasio gambar agar tetap terlihat baik pada pratinjau.

Cara Mengatur Deskripsi Link Blogger

Selain thumbnail, deskripsi juga menjadi bagian penting dari metadata Open Graph. Pada kode di atas, deskripsi artikel mengambil data dari metadata blog dan menggunakan snippet artikel sebagai alternatif.

<meta expr:content='data:blog.metaDescription ? data:blog.metaDescription : data:post.snippet' property='og:description'/>

Gunakan deskripsi yang singkat dan menggambarkan isi artikel. Hindari penggunaan kata kunci secara berlebihan agar deskripsi tetap natural.

Cara Menguji Thumbnail Blogger di WhatsApp

Setelah kode dipasang, lakukan pengujian untuk memastikan thumbnail dan informasi artikel dapat muncul pada pratinjau link.

Langkah 1: Pilih Artikel

Buka artikel Blogger yang sudah memiliki gambar utama.

Langkah 2: Salin URL Artikel

Salin alamat lengkap artikel dari browser.

Langkah 3: Buka WhatsApp

Buka percakapan WhatsApp dan tempel URL artikel pada kolom pesan.

Langkah 4: Tunggu Pratinjau

Tunggu beberapa saat sampai WhatsApp mencoba mengambil informasi dari halaman tersebut.

Jika metadata dapat dibaca dengan benar, pratinjau dapat menampilkan gambar, judul, dan informasi tambahan dari halaman.

Kenapa Thumbnail Blogger Tidak Muncul di WhatsApp?

Jika gambar tidak muncul, jangan langsung menyimpulkan bahwa kode rusak. Ada beberapa kemungkinan yang perlu diperiksa.

1. Kode Open Graph Belum Terbaca

Periksa kembali apakah kode sudah ditempatkan pada template dan tidak mengalami kesalahan sintaks.

2. URL Gambar Bermasalah

Pastikan URL pada og:image dapat dibuka secara publik dan tidak menghasilkan halaman error.

3. Cache Pratinjau

Platform atau aplikasi dapat menyimpan hasil pengambilan metadata sebelumnya. Karena itu, perubahan yang dilakukan tidak selalu langsung terlihat ketika URL yang sama digunakan kembali.

4. Gambar Tidak Sesuai

Periksa kualitas, ukuran, format, dan aksesibilitas gambar yang digunakan sebagai thumbnail.

Kesalahan Umum Saat Memasang Open Graph

Lupa mengganti URL gambar logo.
Salah menempatkan kode di dalam template.
Menghapus tanda kutip pada atribut metadata.
Menggunakan URL gambar yang tidak dapat diakses.
Menggunakan metadata Open Graph berulang kali dalam satu halaman tanpa memahami struktur template.
Tidak melakukan pengujian setelah mengubah template.

Tips Agar Thumbnail Link Blogger Lebih Menarik

Selain memasang Open Graph, Anda juga perlu memperhatikan kualitas konten dan aset visual artikel.

Gunakan gambar utama yang relevan dengan pembahasan.
Buat judul artikel yang jelas dan informatif.
Tulis deskripsi singkat yang menggambarkan isi artikel.
Gunakan gambar dengan resolusi yang cukup.
Pastikan halaman dapat diakses dengan baik.
Hindari penggunaan thumbnail yang tidak sesuai dengan isi artikel.

Apakah Open Graph Meningkatkan SEO Blogger?

Open Graph terutama digunakan untuk membantu mengatur informasi halaman ketika URL dibagikan ke platform yang mendukung metadata tersebut. Open Graph bukan pengganti elemen SEO utama seperti konten berkualitas, struktur heading, internal linking, optimasi gambar, performa halaman, dan pengalaman pengguna.

Karena itu, penggunaan Open Graph sebaiknya dianggap sebagai bagian dari optimasi distribusi konten di media sosial dan aplikasi yang mendukung metadata tersebut.

FAQ Thumbnail Blogger di WhatsApp

Apakah Open Graph bisa digunakan di Blogger?

Ya. Open Graph dapat diterapkan pada template Blogger untuk menyediakan metadata seperti judul, URL, gambar, dan deskripsi halaman.

Kenapa gambar thumbnail Blogger tidak muncul di WhatsApp?

Penyebabnya dapat berupa metadata yang belum terbaca, URL gambar yang bermasalah, cache pratinjau, atau konfigurasi template yang tidak sesuai.

Apakah harus memasang kode Open Graph di setiap artikel?

Tidak jika kode sudah diterapkan pada template Blogger dengan kondisi yang sesuai. Template dapat menggunakan metadata berbeda berdasarkan jenis halaman.

Apakah logo bisa digunakan sebagai thumbnail cadangan?

Ya. Pada contoh kode ini, logo digunakan sebagai gambar cadangan apabila gambar utama artikel tidak tersedia.

Apakah Open Graph otomatis membuat link lebih banyak diklik?

Tidak. Open Graph membantu mengatur informasi pratinjau link, tetapi jumlah klik dipengaruhi oleh banyak faktor seperti kualitas judul, gambar, isi konten, audiens, dan konteks saat link dibagikan.

Apakah Open Graph sama dengan SEO?

Tidak. Open Graph dan SEO memiliki fungsi yang berbeda. Open Graph berfokus pada metadata untuk representasi halaman ketika dibagikan, sedangkan SEO mencakup berbagai aspek untuk membantu halaman ditemukan dan dipahami oleh mesin pencari.

Kesimpulan

Cara menampilkan thumbnail blog di WhatsApp saat membagikan link dapat dilakukan dengan memanfaatkan metadata Open Graph pada template Blogger. Dengan metadata seperti og:title, og:url, og:image, dan og:description, halaman dapat memberikan informasi yang lebih terstruktur kepada platform yang membaca metadata tersebut.

Untuk halaman utama, Anda dapat menggunakan logo blog sebagai gambar cadangan. Sementara itu, pada halaman artikel, gambar utama dapat digunakan sebagai nilai og:image jika tersedia.

Setelah memasang kode, lakukan pengujian dengan membagikan URL artikel melalui WhatsApp. Jika thumbnail belum muncul, periksa kembali kode, URL gambar, aksesibilitas gambar, dan kemungkinan cache pada sistem pratinjau.

Dengan konfigurasi metadata yang rapi serta dukungan judul artikel yang menarik, gambar berkualitas, deskripsi yang relevan, dan konten yang bermanfaat, link Blogger Anda dapat memiliki tampilan pratinjau yang lebih informatif ketika dibagikan melalui WhatsApp dan platform lain yang mendukung Open Graph.

Menu Navigasi