Mengatasi Ukuran Gambar Thumbnail Blog Tidak Jelas

Cara mengatasi ukuran gambar thumbnail blog yang tidak jelas. Masalah gambar thumbnail sudah menjadi hal yang umum di kalangan blogger. Ketika ngetes speed index blog di PageSpeed Insights, ternyata ada peringatan tentang ukuran thumbnail yang kurang tepat. Seperti yang kita ketahui, bahwa thumbnail adalah bentuk gambar yang tampil pertama di halaman blog, website. Gambar tersebut fungsinya untuk memberikan informasi cuplikan tentang isi konten artikel yang akan di buka dan di baca oleh pengunjung. Selain itu juga bisa memberi dampak positif pada blog atau konten yang di buat. Tapi dengan syarat, bisa menyesuaikan isi text, warna serta ukuran yang paling ideal pada halaman blog. Apabila tidak bisa menyesuaikan hal-hal tersebut, justru akan berdampak negatif.

Maka dari itu, kita sebagai blogger yang masih pemula. Hal-hal yang menyangkut dunia blogging, termasuk membuat thumbnail postingan. Hendaknya ini di pelajari dengan benar, agar hasil karya tulis kita di blog tidak sia-sia. Jika kita dari awal ngeblogging sudah salah langkah, ini berakibat pada kuwalitas Seo blog di mesin penelusuran.

Salah satu contoh kesalahan pemula adalah asal-asalan dalam mengupload gambar thumbnail. Padahal, semua itu sudah ada perinciannya pada segi ukuran lebar dan tinggi gambar. Ukuran yang tepat pada setiap image postingan adalah menyesuaikan lebar halaman konten postingan. Dan lebar konten ini berhubungan dengan lebar template yang di pakai.

Dalam hal ini, secara umum kita ambil contohnya adalah template blogspot versi 2. Pada halaman postingan, untuk ukuran lebar gambar adalah 600px. Kemudian, untuk ukuran thumbnail di halaman depan blog, bisa di sesuaikan menurut keinginan. Dengan syarat kita bisa memberi ukuran yang tepat antara lebar dan tingginya (width Dan Height).

Memilih Ukuran Gambar Thumbnail Yang Tepat

Ukuran gambar thumbnail pada blog sebenarnya sudah ada ketentuannya. Contohnya seperti: rasio (1:1), (4:3), (2:1), atau (16:9) seperti thumbnail youtube. Dari ukuran-ukuran tersebut kita bisa pilih salah satu yang sesuai dengan tampilan template blog kita.

Selanjutnya untuk mendeklarasikan ukuran-ukuran tersebut, ambil saja contoh rasio (1:1). Seumpama lebar gambar 400px, maka tingginya juga sama 400px (width=400 height=400). Lalu misalnya yang di pakai ukuran thumbnail youtube (16:9), lebar gambar asli 1280px dan tingginya 720px, dan ini bisa di perkecil menjadi lebar 600px dan tinggi 338px (Width=600 Height=338).

Ukuran gambar antara tinggi dan lebar yang tidak tepat, ini bisa mengakibatkan skor SEO menjadi tidak maksimal di PageSpeed Insights (pagespeed.web.dev). Misalnya kita pakai ukuran (1:1) dan gambar yang di upload ukuran lebar dan tinggi ( 400x300 ). Ini akan berdampak mengurangi skor performa dan Seo. Agar terhindar dari masalah tersebut, hendaknya kita benar-benar tepat menyesuaikan ukurannya.

Cara Membuat Ukuran Thumbnail Di Blog Yang Tepat

Masalah gambar thumbnail pada halaman static memang kerap menjadi problema. Dan problem ini bisa mengurangi Fast Loading Blog. Dan kalau tidak tahu cara mengatasinya, akan membuat kecepatan loading blog jadi berkurang. Mungkin dari banyak kalangan blogger juga mengalami hal yang sama pada blognya. Bagi mereka yang sudah faham untuk menuntaskan masalah tersebut, ini tidak masalah. Tapi bagi kawan-kawan yang belum tahu caranya, otomatis akan bingung.

Selanjutnya, sesuai dengan judul utama, mengatasi ukuran thumbnail yang tidak jelas pada halaman static blog. Ada beberapa poin yang harus kita lakukan, yaitu: membuat dan menentukan ukuran gambar yang tepat. Di atas tadi telah Admin beri contoh beberapa ukuran yang dapat di pilih salah satu di antaranya untuk di jadikan ukuran thumbnail blog.

Kemudian, langkah yang harus di lakukan adalah mengedit kode script HTML di template blogger. Pada tahap ini kita harus masuk akun blogger, lalu cari menu "Tema" (Theme). Setelah itu klik pada menu Edit Html, lalu gulir ke bawah dan cari kode Html seperti pada kotak di bawah ini:

<b:if cond='data:post.thumbnailUrl'> <div class='Image thumb'> <img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 72, "1:1")' expr:title='data:post.title''/> </div> </b:if>

Pada kotak hijau di atas terdapat kode Html gambar thumbnail dengan ukuran asli dari blogger, yaitu: ukuran 72px dengan rasio lebar tinggi ( 1:1 ). Ukuran tersebut membuat bentuk gambar jadi kotak dengan lebar 72px dan tinggi 72px (72x72). Pada template blogger versi2 seperti tema Simple dan sejenisnya posisi gambar thumbnail terletak di samping kiri. Lalu di posisi kanan terdapat cuplikan text postingan (snippet).

Selanjutnya, untuk template blogger versi2 yang sudah di rombak, posisi thumbnail ada di atas judul dan snippet seperti blog WapHTML ini. Bila di buka dengan versi dekstop tampilannya menjadi Grid. Selanjutnya cara untuk mengatasi thumbnail yang tidak jelas ukurannya, kita hanya menambah kode seperti pada kotak hijau di bawah ini.

<b:if cond='data:post.thumbnailUrl'> <div class='Image thumb'> <img expr:alt='data:post.title' expr:src='resizeImage(data:post.firstImageUrl, 72, "1:1")' expr:title='data:post.title' height='72' width='72'/> </div> </b:if>

Nah seperti kode di atas yang ada garis bawahnya. Jadi, Anda hanya menambah height='72' width='72'. Dan cara ini juga berlaku pada semua ukuran thumbnail blog. Cukup hanya merubah ukuran atau angkanya saja. Misalnya: rasio (16:9) dengan ukuran gambar 400x224, maka kita cukup mengganti angka 72 setelah kode data:post.firstImageUrl, dengan angka 400, lalu pada height='224' dan width='400'.

Admin kira cukup sampai di sini, semoga cara di atas bisa menjadi solusi bagi kawan-kawan blogger yang sedang mengalami masalah tersebut. Dan semoga setelah menerapkan cara pada artikel ini bisa membuat performa dan SEO blog Anda menjadi meningkat saat di Analisis di https://pagespeed.web.dev.