Ketika link artikel Blogger dibagikan ke Facebook, biasanya kita berharap muncul sebuah preview yang berisi judul halaman, gambar thumbnail, deskripsi singkat, dan alamat situs. Namun pada beberapa blog, yang muncul justru hanya URL atau tampilan preview yang tidak sesuai. Kondisi seperti ini tentu membuat link artikel terlihat kurang informatif ketika dibagikan melalui media sosial.
Salah satu bagian penting yang mengatur informasi tersebut adalah Open Graph. Metadata ini membantu platform sosial memahami elemen utama dari sebuah halaman, seperti judul, gambar, deskripsi, dan URL yang harus digunakan saat membuat tampilan preview.
Pada Blogger, pengaturan tersebut dapat diterapkan melalui template dengan menambahkan meta tag Open Graph di bagian <head>. Setelah konfigurasi dilakukan dengan benar, halaman blog dapat memberikan informasi yang lebih jelas ketika URL-nya dibagikan.
Mengapa Thumbnail Blog Tidak Muncul Saat Dibagikan?
Preview link di media sosial tidak selalu mengambil informasi dengan cara yang sama seperti tampilan halaman di browser. Saat sebuah URL dibagikan, crawler dari platform sosial akan membaca kode HTML halaman tersebut untuk mencari informasi yang dapat digunakan sebagai preview.
Apabila informasi mengenai gambar, judul, atau deskripsi tidak tersedia dengan jelas, sistem dapat memilih elemen lain dari halaman. Akibatnya, gambar yang tampil bisa tidak sesuai, deskripsi dapat berasal dari potongan teks artikel, atau bahkan preview hanya menampilkan alamat halaman.
Masalah tersebut juga dapat terjadi ketika metadata sudah ditambahkan tetapi cache preview lama masih digunakan. Jadi, memperbaiki kode pada template tidak selalu berarti hasil preview berubah secara langsung.
Apa Fungsi Open Graph pada Blog?
Open Graph adalah sekumpulan metadata yang digunakan untuk memberikan informasi terstruktur tentang sebuah halaman. Dalam konteks berbagi link, beberapa properti yang paling penting antara lain og:title, og:description, og:image, og:url, dan og:type.
- og:title menentukan judul yang digunakan pada preview.
- og:description memberikan ringkasan atau deskripsi halaman.
- og:image menentukan gambar yang dapat digunakan sebagai thumbnail.
- og:url menunjukkan URL halaman yang sedang dibagikan.
- og:type menjelaskan jenis halaman, misalnya website atau artikel.
- og:site_name dapat digunakan untuk memberikan nama situs.
Dengan metadata tersebut, platform yang membaca Open Graph mempunyai petunjuk yang lebih jelas mengenai konten yang harus digunakan untuk membentuk preview sebuah URL.
Persiapkan Blogger Sebelum Menambahkan Kode
Sebelum mengubah template, pastikan blog sudah memiliki judul dan deskripsi yang jelas. Blogger menyediakan pengaturan deskripsi blog serta fitur Search Description yang dapat digunakan untuk memberikan ringkasan halaman. Pengaturan tersebut juga berguna untuk kebutuhan tampilan di mesin pencari dan metadata halaman. :chatgpt-content-reference{index="0"}
Untuk artikel individual, sebaiknya gunakan deskripsi penelusuran yang relevan dengan isi artikel. Dengan begitu, metadata deskripsi tidak hanya bergantung pada potongan teks yang diambil secara otomatis dari isi halaman. :chatgpt-content-reference{index="1"}
Cara Menambahkan Open Graph ke Template Blogger
Langkah berikut dapat digunakan sebagai dasar untuk mengatur metadata Open Graph pada template Blogger. Sebelum melakukan perubahan, sebaiknya simpan salinan template terlebih dahulu agar mudah dikembalikan apabila terjadi kesalahan.
Buka dashboard Blogger, masuk ke bagian Tema, kemudian pilih opsi untuk mengedit HTML template. Setelah itu cari tag </head>.
Letakkan kode Open Graph sebelum tag tersebut. Gunakan struktur yang dibuat berdasarkan kebutuhan blog Anda, bukan menyalin konfigurasi dari template lain secara mentah.
<!-- Open Graph untuk Blogger -->
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:view.isSingleItem'>
<meta expr:content='data:blog.url' property='og:url'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='https://example.com/images/share-default.jpg' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:description'/>
</b:if>
<meta content='https://example.com/images/share-default.jpg' property='og:image'/>
</b:if>Perhatikan bagian https://example.com/images/share-default.jpg. URL tersebut hanyalah contoh. Ganti dengan alamat gambar yang benar-benar tersedia dan dapat diakses secara publik. Sebaiknya gunakan gambar khusus yang mewakili identitas blog untuk kondisi ketika halaman tidak memiliki gambar artikel.
Bagaimana Kode di Atas Bekerja?
Logika kode tersebut dibuat agar halaman artikel dan halaman utama dapat diperlakukan secara berbeda. Pada halaman artikel, sistem akan mencoba menggunakan URL halaman, judul artikel, deskripsi pencarian, dan gambar artikel.
Untuk halaman yang bukan artikel tunggal, informasi yang digunakan dapat diarahkan ke identitas blog, termasuk judul blog, deskripsi blog, dan gambar default. Cara seperti ini lebih masuk akal daripada menggunakan satu gambar dan satu judul yang sama untuk seluruh halaman.
Bagian data:blog.postImageUrl digunakan sebagai sumber gambar utama ketika halaman artikel mempunyai gambar postingan. Apabila data gambar tersebut tidak tersedia, kode akan menggunakan gambar cadangan yang Anda tentukan sendiri.
Pentingnya Menggunakan Gambar yang Tepat
Gambar adalah salah satu elemen pertama yang terlihat dalam preview sebuah link. Karena itu, hindari penggunaan gambar yang terlalu kecil, buram, atau memiliki rasio yang tidak cocok untuk tampilan kartu media sosial.
Gunakan gambar yang tajam, memiliki komposisi yang jelas, dan tetap mudah dikenali ketika ukurannya diperkecil. Untuk artikel tutorial, misalnya, thumbnail dapat menampilkan ilustrasi yang secara langsung menggambarkan topik tutorial tersebut.
Nama file, alt text, dan isi gambar memang bukan pengganti og:image. Namun, penggunaan gambar yang tertata dengan baik tetap penting untuk pengalaman pengguna dan pengelolaan konten blog.
Jangan Mengandalkan Gambar dari Blog Saja
Salah satu kesalahan yang cukup sering dilakukan adalah menganggap platform sosial akan selalu memilih gambar pertama dari artikel. Kenyataannya, hasil yang digunakan bisa dipengaruhi oleh metadata, struktur halaman, cache, serta cara crawler membaca halaman.
Karena itu, menentukan og:image secara eksplisit merupakan pendekatan yang lebih terkontrol. Anda memberi tahu sistem gambar mana yang memang dimaksudkan sebagai representasi halaman.
Pastikan Deskripsi Artikel Sudah Diisi
Selain gambar, bagian deskripsi juga perlu diperhatikan. Blogger memiliki fitur Search Description yang dapat diaktifkan dari pengaturan blog. Untuk posting tertentu, deskripsi juga dapat ditentukan dari pengaturan posting sehingga ringkasan halaman menjadi lebih terarah. :chatgpt-content-reference{index="2"}
Gunakan deskripsi yang benar-benar merangkum isi artikel. Hindari memasukkan daftar keyword secara berlebihan karena tujuan utama deskripsi adalah memberikan konteks kepada pembaca mengenai isi halaman.
Google juga menjelaskan bahwa meta description merupakan ringkasan halaman yang dalam kondisi tertentu dapat digunakan pada snippet hasil pencarian. :chatgpt-content-reference{index="3"}
Kenapa Setelah Kode Dipasang Thumbnail Masih Lama?
Apabila sebelumnya URL sudah pernah dibagikan, platform sosial mungkin masih menyimpan data preview lama. Jadi, meskipun kode sudah diperbaiki, hasil yang terlihat pada percobaan berikutnya belum tentu langsung berubah.
Hal ini berbeda dengan browser yang biasanya memuat halaman secara langsung ketika alamat dibuka. Preview media sosial melibatkan proses pembacaan dan penyimpanan data halaman oleh crawler.
Karena itu, perubahan thumbnail atau deskripsi sebaiknya diuji kembali menggunakan alat debugging yang disediakan platform sosial.
Cek Preview Menggunakan Facebook Sharing Debugger
Setelah template disimpan, buka Facebook Sharing Debugger dan masukkan URL artikel yang ingin diperiksa.
- Buka Facebook Sharing Debugger.
- Masukkan URL artikel atau halaman blog.
- Jalankan proses pemeriksaan URL.
- Periksa apakah judul, gambar, deskripsi, dan URL sudah terbaca sesuai pengaturan.
- Apabila hasil yang muncul masih menggunakan data lama, lakukan proses pemindaian ulang yang tersedia pada alat tersebut.
Jika hasil debugger sudah menunjukkan informasi yang benar tetapi preview ketika dibagikan masih belum berubah, tunggu sampai cache platform diperbarui dan lakukan pengujian kembali.
Masalah yang Sering Terjadi pada Open Graph Blogger
1. Terdapat Meta Tag Ganda
Jangan memasang beberapa versi og:title, og:image, atau og:description secara sembarangan. Template yang berasal dari beberapa modifikasi bisa saja sudah memiliki Open Graph bawaan. Jika Anda menambahkan kode baru tanpa memeriksa kode lama, hasilnya dapat menjadi membingungkan.
2. URL Gambar Tidak Bisa Diakses
Pastikan URL gambar dapat dibuka secara publik. Gambar yang hanya bisa diakses dengan login, berada pada server yang bermasalah, atau mempunyai URL yang tidak valid tidak dapat digunakan dengan baik sebagai preview.
3. Deskripsi Artikel Kosong
Jika Search Description belum diisi, metadata deskripsi yang Anda harapkan mungkin tidak tersedia. Periksa kembali pengaturan artikel dan tambahkan ringkasan yang sesuai.
4. Gambar Artikel Tidak Memiliki Sumber yang Terbaca
Apabila template tidak berhasil mendapatkan URL gambar postingan, sistem akan masuk ke bagian fallback. Karena itu, pastikan kode template, struktur data Blogger, dan URL gambar cadangan sudah sesuai.
5. Cache Preview Belum Diperbarui
Ini merupakan salah satu hal yang sering membuat pengguna mengira kodenya gagal. Setelah metadata diperbaiki, jangan langsung menyimpulkan bahwa konfigurasi salah hanya karena preview lama masih terlihat.
Apakah Open Graph Hanya Berguna untuk Facebook?
Open Graph memang sangat dikenal dalam konteks Facebook, tetapi metadata tersebut juga digunakan oleh berbagai layanan yang membutuhkan informasi untuk membuat preview sebuah URL. Karena itu, menyiapkan metadata yang konsisten dapat membantu ketika artikel dibagikan ke lebih dari satu platform.
Namun, perilaku setiap platform tidak selalu identik. Masing-masing layanan mempunyai aturan dan mekanisme caching sendiri. Jadi, hasil preview pada satu platform tidak selalu persis sama dengan platform lainnya.
Hubungan Open Graph dengan SEO Blogger
Open Graph sebaiknya dipahami sebagai bagian dari optimasi berbagi konten, bukan sebagai pengganti SEO on-page. Optimasi mesin pencari tetap membutuhkan judul yang relevan, struktur heading yang jelas, konten yang bermanfaat, deskripsi yang sesuai, serta elemen halaman yang dapat dipahami mesin pencari.
Blogger sendiri menyediakan berbagai pengaturan untuk membantu pemilik blog mengelola deskripsi penelusuran, visibilitas mesin pencari, robots, dan pengaturan lain yang berkaitan dengan pengindeksan. :chatgpt-content-reference{index="4"}
Dengan demikian, Open Graph dapat digunakan untuk melengkapi strategi optimasi blog. Search engine mendapatkan informasi yang sesuai untuk halaman penelusuran, sementara platform sosial mendapatkan metadata yang dibutuhkan untuk membuat preview link.
Cara Menentukan Struktur Metadata yang Lebih Rapi
Agar pengelolaan template tetap mudah, pisahkan fungsi metadata berdasarkan jenis halaman. Halaman artikel dapat memakai judul artikel, URL artikel, deskripsi artikel, dan gambar artikel. Sementara halaman utama dapat menggunakan nama blog, deskripsi blog, URL utama, serta gambar identitas situs.
Pemisahan tersebut membuat setiap halaman memiliki informasi yang lebih relevan. Selain lebih mudah dirawat, pendekatan ini juga membantu menghindari satu metadata yang dipaksakan untuk semua jenis halaman.
Tips Sebelum Memasang Kode di Template Blogger
- Backup template sebelum melakukan perubahan.
- Periksa apakah template sudah mempunyai meta tag Open Graph.
- Gunakan satu struktur metadata yang konsisten.
- Pastikan URL gambar dapat diakses tanpa login.
- Isi Search Description pada artikel yang membutuhkan deskripsi khusus.
- Uji URL menggunakan debugger setelah perubahan selesai.
- Hindari menambahkan banyak script atau tag yang tidak diperlukan.
Kesimpulan
Thumbnail dan deskripsi yang tidak muncul ketika artikel Blogger dibagikan ke Facebook biasanya berkaitan dengan metadata halaman, terutama Open Graph, atau data preview yang masih tersimpan dalam cache. Dengan menyiapkan og:title, og:description, og:image, dan og:url secara tepat, informasi halaman dapat disajikan dengan struktur yang lebih jelas kepada platform yang membaca metadata tersebut.
Hal yang tidak kalah penting adalah memastikan pengaturan Search Description pada Blogger sudah digunakan dengan benar dan template tidak memiliki meta tag ganda. Setelah perubahan diterapkan, lakukan pengecekan ulang melalui Facebook Sharing Debugger untuk memastikan metadata halaman sudah terbaca dengan sesuai.
Dengan konfigurasi yang rapi, setiap kali artikel dibagikan, halaman memiliki peluang lebih besar untuk menampilkan informasi yang relevan berupa judul, gambar, dan deskripsi, sehingga tampilan link menjadi lebih informatif bagi orang yang melihatnya.