Cara Menampilkan Gambar Thumbnail dan Deskripsi Blog di Facebook Saat Membagikan Link

4/07/2026
Cara Menampilkan Thumbnail dan Deskripsi Blog di Facebook Saat Membagikan Link

Saat membagikan artikel Blogger atau Blogspot ke Facebook, tampilan pratinjau tautan sangat penting. Jika link hanya menampilkan alamat URL tanpa gambar, judul, atau deskripsi yang sesuai, tampilan postingan dapat terlihat kurang menarik dan informasi yang diterima pengguna menjadi lebih terbatas.

Salah satu cara untuk mengatur informasi yang digunakan ketika sebuah halaman dibagikan ke media sosial adalah dengan menggunakan Open Graph Meta Tags. Dengan konfigurasi Open Graph yang tepat, website dapat memberikan informasi seperti judul halaman, URL, gambar pratinjau, dan deskripsi kepada platform yang membaca metadata tersebut.

Pada tutorial ini, kita akan membahas cara menampilkan thumbnail dan deskripsi blog di Facebook saat membagikan link menggunakan kode Open Graph pada template Blogger. Tutorial ini juga dilengkapi dengan contoh kode yang dapat Anda sesuaikan dengan kebutuhan blog.

Apa Itu Open Graph Meta Tags?

Open Graph adalah sekumpulan metadata yang digunakan halaman web untuk memberikan informasi kepada platform sosial mengenai bagaimana sebuah halaman sebaiknya direpresentasikan ketika URL-nya dibagikan.

Metadata Open Graph biasanya digunakan untuk menentukan beberapa informasi penting, seperti:

  • Judul halaman melalui og:title.
  • Alamat halaman melalui og:url.
  • Gambar pratinjau melalui og:image.
  • Deskripsi halaman melalui og:description.
  • Jenis konten melalui og:type.

Metadata tersebut berada di bagian HTML halaman dan tidak terlihat secara langsung oleh pengunjung. Platform sosial dapat membaca metadata tersebut ketika melakukan proses pengambilan informasi dari URL yang dibagikan.

Mengapa Thumbnail Facebook Penting untuk Artikel Blogger?

Gambar merupakan salah satu elemen yang paling mudah menarik perhatian ketika seseorang melihat sebuah postingan di media sosial. Karena itu, penggunaan gambar artikel yang relevan dapat membantu membuat tampilan pratinjau link menjadi lebih informatif.

Selain gambar, judul dan deskripsi juga memberikan konteks mengenai isi halaman. Kombinasi ketiga elemen tersebut dapat membantu pengguna memahami tujuan link sebelum mereka membukanya.

Namun, perlu dipahami bahwa penggunaan Open Graph tidak menjamin peningkatan jumlah klik. Performa link di media sosial tetap dipengaruhi oleh kualitas gambar, judul, isi artikel, audiens, dan cara link tersebut dibagikan.

Bagaimana Open Graph Bekerja di Blogger?

Secara sederhana, alur kerjanya dapat digambarkan seperti berikut:

Artikel Blogger dibuat
        ↓
Metadata Open Graph tersedia
        ↓
Link artikel dibagikan ke Facebook
        ↓
Facebook membaca metadata halaman
        ↓
Judul, gambar, URL, dan deskripsi
digunakan untuk membuat pratinjau link

Dengan struktur yang sesuai, halaman utama dan halaman artikel dapat menggunakan informasi yang berbeda. Misalnya, halaman depan dapat menggunakan logo blog sebagai gambar utama, sedangkan artikel dapat menggunakan gambar utama artikel.

Manfaat Menggunakan Open Graph di Blogger

  • Membantu mengatur thumbnail link ketika artikel dibagikan ke platform yang mendukung Open Graph.
  • Membuat judul pratinjau lebih relevan dengan halaman yang dibagikan.
  • Menyediakan deskripsi halaman untuk melengkapi informasi pada kartu tautan.
  • Meningkatkan konsistensi tampilan link ketika konten dibagikan di media sosial.
  • Dapat digunakan untuk halaman utama dan artikel dengan kondisi Blogger.

Kode Open Graph untuk Blogger

Berikut kode Open Graph yang digunakan dalam tutorial ini. Kode membedakan halaman utama dengan halaman artikel menggunakan kondisi Blogger.


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

<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 Facebook Selesai -->

Penjelasan Setiap Bagian Kode

1. Menentukan Jenis Konten

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

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

2. Menentukan Bahasa Halaman

<meta content='id_ID' property='og:locale'/>

Nilai id_ID digunakan untuk menunjukkan locale bahasa Indonesia.

3. Metadata Halaman Utama

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

Kondisi tersebut digunakan untuk menerapkan metadata tertentu ketika halaman yang sedang dibuka merupakan halaman utama blog.

4. Metadata Artikel

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

Kondisi tersebut digunakan ketika halaman yang sedang dibaca merupakan artikel atau postingan Blogger.

5. Menentukan Gambar 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 featured image sebagai gambar Open Graph. Jika tidak tersedia, kode menggunakan gambar cadangan yang Anda tentukan.

Cara Memasang Open Graph di Template Blogger

Berbeda dengan kode HTML yang hanya digunakan di dalam isi artikel, metadata Open Graph sebaiknya ditempatkan pada bagian <head> template Blogger agar dapat diterapkan sebagai metadata halaman.

Langkah 1: Buka Dashboard Blogger

Masuk ke dashboard Blogger dan pilih blog yang ingin Anda optimalkan.

Langkah 2: Masuk ke Menu Tema

Pilih menu Tema pada dashboard Blogger.

Langkah 3: Pilih Edit HTML

Buka opsi Edit HTML untuk melihat struktur kode template yang sedang digunakan.

Langkah 4: Cari Tag Head

Gunakan fitur pencarian pada editor dengan menekan:

CTRL + F

Kemudian cari:

<head>

Tempatkan kode Open Graph setelah tag <head> atau pada bagian metadata template yang sesuai.

Langkah 5: Ganti URL Gambar Logo

Cari teks:

URL_GAMBAR_LOGO_ANDA_DI_SINI

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

Contohnya:

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

Pastikan URL gambar dapat diakses secara publik dan tidak membutuhkan login.

Langkah 6: Simpan Template

Setelah kode selesai dipasang, simpan perubahan template. Sebelum menyimpan, sebaiknya lakukan pemeriksaan kembali untuk memastikan tidak ada bagian kode yang terhapus atau berubah secara tidak sengaja.

Cara Mengatur Gambar Thumbnail Artikel

Untuk halaman artikel, gunakan gambar utama yang relevan dengan isi artikel. Gambar tersebut dapat digunakan sebagai representasi visual ketika link dibagikan ke media sosial.

Gunakan gambar yang:

  • Relevan dengan topik artikel.
  • Memiliki kualitas gambar yang baik.
  • Tidak terlalu kecil atau buram.
  • Dapat diakses secara publik.
  • Tidak mengandung informasi yang menyesatkan.

Untuk hasil yang lebih konsisten, gunakan rasio gambar yang sesuai dengan kebutuhan platform media sosial dan perhatikan area yang mungkin terpotong pada tampilan pratinjau.

Cara Mengatur Deskripsi Open Graph

Deskripsi digunakan untuk memberikan ringkasan singkat mengenai halaman. Pada kode di atas, deskripsi mengambil data dari metadata blog dan dapat menggunakan snippet artikel sebagai alternatif.

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

Gunakan deskripsi yang singkat, informatif, dan relevan dengan isi artikel. Hindari memasukkan kata kunci secara berlebihan hanya untuk mengejar SEO.

Cara Menguji Thumbnail Link di Facebook

Setelah Open Graph dipasang, Anda perlu menguji apakah Facebook dapat membaca metadata halaman dengan benar.

Langkah 1: Salin URL Artikel

Buka salah satu artikel Blogger yang sudah memiliki gambar utama, kemudian salin alamat URL artikel tersebut.

Langkah 2: Gunakan Facebook Sharing Debugger

Buka Facebook Sharing Debugger dan masukkan URL artikel yang ingin diperiksa.

Langkah 3: Jalankan Pemeriksaan

Jalankan proses pemeriksaan URL. Facebook akan mencoba mengambil metadata dari halaman tersebut.

Langkah 4: Periksa Hasil Pratinjau

Perhatikan apakah gambar, judul, URL, dan deskripsi yang muncul sudah sesuai dengan yang Anda inginkan.

Jika Facebook masih menampilkan informasi lama, perubahan metadata mungkin belum langsung terlihat karena data halaman dapat tersimpan dalam cache. Gunakan fitur pemeriksaan ulang yang tersedia pada alat tersebut jika diperlukan.

Kenapa Thumbnail Facebook Tidak Muncul?

Jika gambar tidak muncul ketika link Blogger dibagikan, terdapat beberapa kemungkinan penyebab yang perlu diperiksa.

1. Metadata Open Graph Tidak Terpasang dengan Benar

Periksa kembali posisi kode dan pastikan metadata berada pada bagian HTML yang dapat dibaca oleh crawler.

2. URL Gambar Tidak Bisa Diakses

Pastikan URL pada og:image dapat dibuka secara publik. Jika gambar membutuhkan autentikasi atau tidak dapat diakses dari luar, Facebook mungkin tidak dapat mengambilnya.

3. Cache Facebook Belum Diperbarui

Jika halaman pernah dibagikan sebelumnya, Facebook mungkin masih menggunakan informasi yang tersimpan dari pengambilan sebelumnya. Lakukan pemeriksaan ulang melalui Facebook Sharing Debugger.

4. Gambar Tidak Sesuai

Pastikan gambar memiliki kualitas dan ukuran yang memadai serta menggunakan format gambar yang umum digunakan di web.

Kesalahan yang Perlu Dihindari Saat Memasang Open Graph

  • Menempatkan tag Open Graph di lokasi HTML yang tidak tepat.
  • Menggunakan URL gambar yang tidak dapat diakses publik.
  • Lupa mengganti URL_GAMBAR_LOGO_ANDA_DI_SINI.
  • Menghapus tanda kutip pada atribut kode.
  • Memasang metadata Open Graph yang sama berulang kali dalam satu halaman.
  • Tidak melakukan pengujian setelah mengubah template.

Tips Optimasi Thumbnail Blogger untuk Media Sosial

Open Graph merupakan bagian teknis dari optimasi tampilan link. Agar hasilnya lebih menarik, optimalkan juga aset visual dan konten artikelnya.

  • Gunakan gambar utama yang relevan dengan judul artikel.
  • Buat judul yang jelas dan mudah dipahami.
  • Gunakan deskripsi singkat yang menjelaskan isi halaman.
  • Pastikan halaman dapat diakses tanpa kendala.
  • Periksa tampilan link sebelum membagikannya secara luas.
  • Hindari gambar clickbait yang tidak sesuai dengan isi artikel.

Apakah Open Graph Meningkatkan SEO Blogger?

Open Graph pada dasarnya digunakan untuk mengatur bagaimana halaman direpresentasikan ketika dibagikan ke platform sosial yang mendukung metadata tersebut. Open Graph bukan pengganti elemen SEO utama seperti judul halaman, konten berkualitas, struktur heading, internal link, performa halaman, dan metadata yang relevan untuk mesin pencari.

Jadi, pemasangan Open Graph sebaiknya dianggap sebagai bagian dari optimasi tampilan dan distribusi konten di media sosial, bukan sebagai teknik yang secara otomatis meningkatkan ranking Google.

FAQ Open Graph dan Thumbnail Facebook di Blogger

Apa fungsi Open Graph di Blogger?

Open Graph digunakan untuk memberikan metadata seperti judul, gambar, URL, dan deskripsi kepada platform yang membaca metadata tersebut ketika sebuah halaman dibagikan.

Apakah Open Graph bisa menampilkan thumbnail artikel di Facebook?

Open Graph dapat membantu menyediakan URL gambar yang digunakan sebagai metadata pratinjau melalui properti og:image. Hasil akhirnya tetap bergantung pada proses pengambilan metadata dan dukungan platform.

Kenapa gambar artikel tidak muncul di Facebook?

Penyebabnya dapat berupa metadata yang tidak terbaca, URL gambar yang tidak dapat diakses, cache informasi lama, atau masalah pada gambar yang digunakan.

Apakah Open Graph harus dipasang di setiap artikel?

Tidak harus secara manual pada setiap artikel jika metadata sudah diterapkan melalui template Blogger menggunakan kondisi yang sesuai. Template dapat mengatur metadata berdasarkan jenis halaman.

Apakah gambar logo bisa digunakan sebagai gambar cadangan?

Ya. Pada kode tutorial ini, URL gambar logo digunakan sebagai gambar cadangan ketika gambar artikel tidak tersedia.

Apakah Open Graph otomatis meningkatkan jumlah pengunjung?

Tidak. Open Graph membantu mengatur informasi pratinjau ketika URL dibagikan. Jumlah pengunjung tetap dipengaruhi oleh kualitas konten, judul, gambar, audiens, distribusi, dan berbagai faktor lainnya.

Kesimpulan

Cara menampilkan thumbnail dan deskripsi blog di Facebook saat membagikan link pada Blogger dapat dilakukan dengan menambahkan metadata Open Graph ke dalam template. Metadata tersebut dapat digunakan untuk menentukan judul, URL, gambar, deskripsi, dan jenis halaman yang akan dibaca oleh platform sosial.

Dengan membedakan antara halaman utama dan halaman artikel, Anda dapat membuat sistem metadata yang lebih terstruktur. Gambar artikel dapat digunakan sebagai thumbnail, sementara logo blog dapat dijadikan gambar cadangan ketika gambar artikel tidak tersedia.

Setelah pemasangan selesai, lakukan pengujian menggunakan alat pemeriksaan berbagi Facebook untuk memastikan metadata dapat dibaca dengan benar. Jika informasi lama masih muncul, cache dapat menjadi salah satu penyebab sehingga pemeriksaan ulang mungkin diperlukan.

Perlu diingat bahwa Open Graph bukan teknik SEO yang secara otomatis meningkatkan ranking mesin pencari. Fungsi utamanya adalah membantu mengontrol informasi pratinjau ketika konten dibagikan melalui platform sosial. Karena itu, kombinasikan optimasi Open Graph dengan konten berkualitas, judul yang relevan, gambar yang menarik, struktur HTML yang baik, dan pengalaman pengguna yang optimal.

Baca Artikel Lainnya

Kembali ke Beranda
Link profil berhasil disalin!