Apa itu Featured Image (Gambar Unggulan) di Blogger?

Secara umum, featured image (gambar unggulan) adalah gambar yang dirancang untuk tampil hanya pada ringkasan postingan (post summary atau halaman indeks). Gambar ini tidak akan terlihat oleh pengunjung saat mereka membaca artikel utuh secara langsung. Namun, kita dapat memanggil datanya agar muncul di widget luar, seperti sebagai thumbnail artikel terbaru atau daftar postingan populer (popular posts).

Blogger tidak memiliki menu tombol atau ekspresi langsung yang memungkinkan kita memilih salah satu gambar dari dalam artikel untuk dijadikan sebagai gambar utama (default).

Meskipun demikian, ada trik khusus yang bisa digunakan. Konsep dasarnya adalah menempatkan tag gambar <img> di bagian paling atas artikel (sebelum karakter pertama yang Anda ketikkan di editor), lalu menyembunyikan gambar tersebut agar tidak muncul di dalam artikel.

Memanggil Data Featured Image dengan Ekspresi Blogger

Untuk memanggil data gambar unggulan ini di dalam kode template, Anda dapat menggunakan tag ekspresi Blogger berikut:

<data:view.featuredImage/>

Menggunakan Evaluated Tag:

<b:eval expr='data:view.featuredImage'/>

Ekspresi data:view.featuredImage bertugas memanggil file gambar pertama yang ditemukan di dalam artikel, terlepas dari apa pun format ekstensinya (.gif, .jpg, .png, .webp, dll.) dan dari mana pun sumber URL-nya berasal.

Kelebihan ekspresi ini dibandingkan dengan tag data:post.thumbnailUrl bawaan lama adalah:

• Dapat mendeteksi dan memanggil file animasi format .gif.
• Dapat menarik file gambar yang alamat URL-nya berada di luar peladen (server) Google.

Cara Mengatur Featured Image yang Tersembunyi

Untuk membuat featured image tersembunyi, Anda hanya perlu menambahkan properti CSS berupa style='display:none' di dalam tag <img> artikel Anda. Langkah-langkah praktisnya adalah sebagai berikut:

1. Di dalam Post Editor Blogger, unggah gambar yang ingin dijadikan sampul.
2. Tempatkan elemen gambar tersebut di baris paling atas artikel (Baris 1).
3. Klik tombol Tampilan HTML (HTML view) di kiri atas toolbar editor.
4. Pada area kode HTML, Anda akan menemukan susunan kode bawaan Blogger yang strukturnya mirip seperti ini:

<div class="separator" style="clear: both; text-align: center;">
    <a href="https://2.bp.blogspot.com/.../s1600/picb.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
       <img border="0" src="https://2.bp.blogspot.com/.../s320/picb.jpg" width="151" height="320" data-original-width="218" data-original-height="462" />
    </a>
</div>

1. Buatlah satu baris tag <img> baru yang ringkas tepat di bawah kode tersebut dengan format:

<img src='PASTE_URL_GAMBAR_DI_SINI' style='display:none'/>

1. Sorot (block) alamat URL gambar asli milik Anda yang berada di dalam tanda kutip atribut href (teks yang disorot jingga pada contoh langkah 4), lalu salin (copy).
2. Tempelkan (paste) URL tersebut untuk menggantikan teks PASTE_URL_GAMBAR_DI_SINI.
3. Sekarang, hapus keseluruhan blok kode bawaan Blogger yang lama, mulai dari tag <div class="separator"...> hingga tag penutup </div>.
4. Hasil akhir struktur kode Anda akan menjadi sangat ringkas seperti ini:

<img src='https://2.bp.blogspot.com/.../s1600/picb.jpg' style='display:none'/>

Selamat! Anda telah berhasil membuat satu <em>featured image</em> yang tersembunyi dengan benar.

Apakah Featured Image ini Penting?

Meskipun menggunakan perintah display:none membuat gambar tidak kasat mata bagi pembaca artikel, kode tersebut tetap akan dimuat oleh sistem saat halaman dipublikasikan. Ada sistem luar yang tetap membaca keberadaan gambar tersembunyi ini, salah satunya adalah robot media sosial.

Blogger memiliki komponen fungsi bernama <b:include data='blog' name='all-head-content'/> yang bertugas menyusun Meta Tag secara otomatis. Skrip pengenal ini sangat berguna untuk memicu visual cuplikan tautan saat artikel blog Anda dibagikan ke platform Facebook, Twitter/X, atau media sosial lainnya.

Sistem inklusi bawaan tersebut akan mencari keberadaan featured image terlebih dahulu untuk dipasang sebagai gambar pratinjau sosial media. Masalah optimasi sering terjadi jika gambar pertama di artikel Anda berukuran terlalu kecil, sehingga tidak memenuhi syarat dimensi minimum pratinjau Open Graph. Di sinilah trik featured image tersembunyi (dengan mengunggah gambar beresolusi tinggi di baris pertama) menjadi solusi terbaik untuk menyelamatkan visual branding blog Anda di media sosial.