Cara Memasang Code Thumbnail dan Gambar Ilustrasi Otomatis di Postingan Blogger Agar SEO Friendly

Code thumbnail dan gambar ilustrasi Blogger — Thumbnail tutorial code thumbnail dan gambar ilustrasi Blogger

Banyak pengguna Blogger masih memasang thumbnail dan gambar ilustrasi secara asal tanpa memperhatikan performa website, SEO, dan pengalaman pembaca. Padahal thumbnail adalah elemen pertama yang dilihat pengunjung ketika membuka artikel blog. Jika gambar tidak dioptimalkan, loading blog bisa menjadi lambat dan menyebabkan nilai Core Web Vitals turun.

Selain itu, penggunaan gambar ilustrasi di dalam artikel juga sangat penting untuk meningkatkan kualitas konten. Artikel yang memiliki ilustrasi relevan biasanya lebih mudah dipahami, lebih nyaman dibaca, dan memiliki peluang lebih besar muncul di hasil pencarian Google Images.

Pada tutorial ini kita akan membahas secara lengkap bagaimana cara memasang code thumbnail dan gambar ilustrasi pada posting Blogger dengan teknik yang SEO friendly, ringan, modern, dan aman untuk AdSense.

Mengapa Thumbnail dan Gambar Ilustrasi Sangat Penting?

Sebelum masuk ke pembahasan kode, penting memahami terlebih dahulu kenapa thumbnail dan gambar ilustrasi memiliki peran besar dalam sebuah artikel Blogger. Banyak pemilik blog hanya fokus menulis konten panjang, tetapi melupakan tampilan visual. Padahal pengunjung biasanya melihat gambar lebih dulu sebelum mulai membaca isi artikel.

Thumbnail bisa dianggap sebagai wajah utama sebuah postingan. Ketika artikel muncul di halaman homepage, hasil pencarian Google, atau dibagikan ke media sosial, thumbnail menjadi elemen pertama yang menarik perhatian pengunjung. Jika tampilannya menarik dan relevan, peluang artikel mendapatkan klik akan jauh lebih besar.

Selain meningkatkan tampilan blog, thumbnail juga membantu mesin pencari memahami isi artikel melalui optimasi gambar seperti alt text, title image, dan nama file yang relevan. Karena itu penggunaan thumbnail tidak hanya penting untuk desain, tetapi juga sangat berpengaruh terhadap SEO.

Thumbnail memiliki beberapa fungsi utama seperti:

Menarik perhatian pengunjung sejak pertama melihat artikel
Meningkatkan CTR atau jumlah klik dari hasil pencarian
Membantu optimasi SEO gambar di Google Images
Mempermudah pembaca mengenali topik artikel
Membuat tampilan blog terlihat lebih profesional dan modern
Meningkatkan kualitas visual postingan Blogger

Sementara itu, gambar ilustrasi di dalam artikel memiliki fungsi yang berbeda. Jika thumbnail bertugas menarik klik di awal, maka ilustrasi membantu pembaca tetap nyaman saat membaca artikel sampai selesai.

Artikel yang hanya berisi teks panjang biasanya terasa membosankan, terutama bagi pengguna mobile. Dengan adanya gambar ilustrasi, pembaca bisa lebih mudah memahami penjelasan tutorial, melihat contoh secara visual, dan tidak cepat lelah saat membaca.

Selain itu, ilustrasi juga membantu memperjelas poin penting di dalam artikel. Untuk tutorial Blogger misalnya, gambar dapat digunakan untuk menunjukkan tampilan dashboard, struktur kode, atau hasil akhir yang ingin dicapai.

Berikut manfaat utama gambar ilustrasi di dalam artikel:

Membuat artikel lebih nyaman dan ringan dibaca
Mengurangi bounce rate karena pengunjung lebih betah
Membantu menjelaskan tutorial secara visual
Meningkatkan pengalaman pengguna atau user experience
Mendukung optimasi Google Images
Membantu pembaca memahami langkah-langkah lebih cepat
Membuat struktur artikel terlihat lebih rapi dan profesional

Karena itulah penggunaan code thumbnail dan gambar ilustrasi tidak boleh dilakukan sembarangan. Pemilihan ukuran gambar, format file, atribut HTML, hingga teknik loading harus diperhatikan agar blog tetap cepat, SEO friendly, dan nyaman diakses di semua perangkat.

Kesalahan Umum Saat Memasang Gambar di Blogger

Banyak blogger pemula masih melakukan kesalahan berikut:

Mengupload gambar ukuran terlalu besar
Tidak menggunakan format WebP
Tidak memakai atribut alt
Tidak menentukan width dan height
Semua gambar memakai loading eager
Tidak menggunakan lazyload
Thumbnail utama masih memakai ukuran kecil

Kesalahan tersebut dapat menyebabkan blog lambat dan kurang optimal di mesin pencari.

Format Gambar Terbaik untuk Blogger

Saat ini format terbaik untuk thumbnail Blogger adalah WebP karena ukuran file jauh lebih kecil dibanding JPG atau PNG tetapi kualitas gambar tetap bagus.

Keuntungan format WebP:

Ukuran file lebih ringan
Loading lebih cepat
Didukung Google
Bagus untuk Core Web Vitals
SEO friendly

Jika memungkinkan selalu gunakan gambar WebP untuk semua postingan.

Code Thumbnail Utama Blogger SEO Friendly

Berikut contoh code thumbnail utama artikel Blogger yang sudah dioptimalkan untuk SEO dan performa.

<figure class="post-thumbnail">
  <img 
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-example/s640/thumbnail.webp"
    alt="Code thumbnail Blogger SEO friendly"
    title="Code thumbnail Blogger SEO friendly"
    width="1280"
    height="720"
    loading="eager"
    decoding="async"
    fetchpriority="high"
    style="width:100%;height:auto;border-radius:12px;"
  />

  <figcaption>
    Contoh thumbnail utama artikel Blogger SEO friendly
  </figcaption>
</figure>

Penjelasan Lengkap Code Thumbnail

Mari kita bahas fungsi setiap bagian kode di atas.

1. Tag Figure

Tag figure digunakan untuk membungkus gambar agar struktur HTML lebih rapi dan SEO friendly.

<figure class="post-thumbnail">
</figure>

Selain membantu struktur artikel, tag ini juga mempermudah styling CSS.

2. Attribute Src

Bagian src adalah lokasi gambar.

src="https://blogger.googleusercontent.com/.../s640/thumbnail.webp"

Gunakan ukuran s640 untuk thumbnail utama Blogger karena lebih optimal untuk SEO dan tampilan modern.

3. Attribute Alt

Alt text sangat penting untuk SEO gambar.

alt="Code thumbnail Blogger SEO friendly"

Tips membuat alt:

Gunakan keyword utama artikel
Jangan terlalu panjang
Harus relevan dengan gambar
Hindari spam keyword

4. Width dan Height

Banyak blogger mengabaikan bagian ini padahal sangat penting untuk mengurangi CLS.

width="1280"
height="720"

Google menyukai gambar yang memiliki dimensi jelas karena membantu browser menghitung layout lebih cepat.

5. Loading Eager

Thumbnail utama sebaiknya menggunakan eager.

loading="eager"

Karena thumbnail utama berada di bagian atas artikel dan harus dimuat lebih cepat.

6. Decoding Async

Atribut ini membantu browser memproses gambar lebih efisien.

decoding="async"

7. Fetchpriority High

Fetchpriority membantu browser memprioritaskan gambar utama.

fetchpriority="high"

Ini sangat bagus untuk optimasi LCP.

Code Gambar Ilustrasi di Tengah Artikel

Selain thumbnail utama, artikel juga membutuhkan gambar ilustrasi.

Berikut contoh code gambar ilustrasi modern untuk Blogger.

<figure class="post-image">
  <img 
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-example/s1600/ilustrasi.webp"
    alt="Ilustrasi tutorial Blogger"
    title="Ilustrasi tutorial Blogger"
    width="1200"
    height="675"
    loading="lazy"
    decoding="async"
    style="width:100%;height:auto;border-radius:10px;"
  />

  <figcaption>
    Gambar ilustrasi tutorial Blogger
  </figcaption>
</figure>

Kenapa Gambar Ilustrasi Menggunakan Lazy Load?

Karena gambar ilustrasi berada di tengah artikel.

Browser tidak perlu langsung memuat semua gambar ketika halaman pertama kali dibuka.

Dengan lazyload:

Loading halaman lebih cepat
Penggunaan bandwidth lebih hemat
Core Web Vitals lebih bagus
Pengalaman pengguna meningkat

Perbedaan Thumbnail dan Ilustrasi

Thumbnail	Ilustrasi
Berada di atas artikel	Berada di tengah artikel
Loading eager	Loading lazy
Fetchpriority high	Tidak perlu fetchpriority
Fokus SEO utama	Fokus pengalaman membaca

CSS Tambahan Agar Gambar Lebih Modern

Agar tampilan gambar lebih menarik, tambahkan CSS berikut ke tema Blogger.

.post-thumbnail,
.post-image{
  margin:20px 0;
  text-align:center;
}

.post-thumbnail img,
.post-image img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,0.1);
}

.post-thumbnail figcaption,
.post-image figcaption{
  font-size:14px;
  color:#666;
  margin-top:10px;
}

Cara Memasang Code Thumbnail di Blogger

Ikuti langkah berikut:

Buka dashboard Blogger.
Buat posting baru.
Masuk ke mode HTML.
Tempel code thumbnail di bagian atas artikel.
Tambahkan gambar ilustrasi di tengah artikel sesuai kebutuhan.
Publikasikan artikel.

Tips Membuat Thumbnail Blogger yang Menarik

Selain kode HTML, desain thumbnail juga sangat penting.

Berikut beberapa tips:

Gunakan warna kontras
Teks jangan terlalu kecil
Gunakan font tebal
Fokus pada satu topik
Hindari desain terlalu ramai
Gunakan rasio 16:9
Pastikan gambar tetap jelas di mobile

Ukuran Thumbnail Blogger yang Direkomendasikan

Ukuran terbaik thumbnail Blogger:

1280 x 720 pixel

Rasio ini sangat cocok untuk:

Google Discover
Tampilan mobile
Preview sosial media
SEO modern

Optimasi SEO Gambar Blogger

Berikut teknik optimasi tambahan agar gambar lebih SEO friendly.

1. Nama File Gambar

Gunakan nama file yang jelas.

Contoh:

code-thumbnail-blogger.webp

Hindari nama random seperti:

IMG00222.webp

2. Gunakan Keyword Natural

Masukkan keyword ke:

Alt text
Title image
Caption gambar
Nama file

Tetapi tetap harus natural.

3. Kompres Gambar

Sebelum upload gunakan tools kompres gambar agar ukuran file lebih kecil.

Idealnya:

Thumbnail di bawah 150KB
Ilustrasi di bawah 200KB

Contoh Struktur Artikel Blogger Modern

Berikut contoh struktur artikel yang bagus.

<h1>Judul Artikel</h1>

<!-- Thumbnail Utama -->

<p>Pembukaan artikel</p>

<h2>Sub Judul</h2>

<p>Penjelasan</p>

<!-- Gambar Ilustrasi -->

<p>Lanjutan artikel</p>

<h2>Sub Judul Berikutnya</h2>

Kesalahan yang Harus Dihindari

Berikut kesalahan yang masih sering terjadi:

Menggunakan gambar hasil copy paste
Tidak memberi caption
Ukuran gambar terlalu besar
Memasang terlalu banyak gambar
Alt text kosong
Tidak memakai lazyload
Format PNG terlalu berat

Apakah Gambar Bisa Membantu Ranking Google?

Jawabannya bisa.

Gambar yang dioptimalkan dengan baik dapat membantu:

Muncul di Google Images
Meningkatkan CTR
Meningkatkan waktu baca
Menurunkan bounce rate
Membantu SEO artikel

Karena itu jangan menganggap gambar hanya sebagai pelengkap.

Baca juga postingan lainya :

Template Lengkap Thumbnail dan Ilustrasi Blogger

Berikut template lengkap yang bisa langsung digunakan.

<!-- Thumbnail Utama -->

<figure class="post-thumbnail">
  <img 
    src="https://blogger.googleusercontent.com/img/b/example/s640/thumbnail.webp"
    alt="Thumbnail Blogger SEO friendly"
    title="Thumbnail Blogger SEO friendly"
    width="1280"
    height="720"
    loading="eager"
    decoding="async"
    fetchpriority="high"
    style="width:100%;height:auto;border-radius:12px;"
  />

  <figcaption>
    Thumbnail utama artikel Blogger
  </figcaption>
</figure>

<!-- Gambar Ilustrasi -->

<figure class="post-image">
  <img 
    src="https://blogger.googleusercontent.com/img/b/example/s1600/ilustrasi.webp"
    alt="Ilustrasi tutorial Blogger"
    title="Ilustrasi tutorial Blogger"
    width="1200"
    height="675"
    loading="lazy"
    decoding="async"
    style="width:100%;height:auto;border-radius:10px;"
  />

  <figcaption>
    Gambar ilustrasi tutorial Blogger
  </figcaption>
</figure>

Penutup

Memasang code thumbnail dan gambar ilustrasi di Blogger ternyata bukan hanya soal mempercantik tampilan artikel. Jika dilakukan dengan benar, gambar dapat membantu meningkatkan SEO, mempercepat loading website, memperbaiki Core Web Vitals, dan meningkatkan pengalaman pengguna.

Gunakan thumbnail utama dengan format WebP, ukuran s640, atribut alt yang relevan, serta loading eager agar performa artikel lebih optimal. Untuk gambar ilustrasi gunakan lazyload agar halaman tetap ringan.

Dengan menerapkan teknik pada tutorial ini, blog Blogger akan terlihat lebih profesional, modern, dan siap bersaing di hasil pencarian Google.

Pertanyaan Umum Seputar Thumbnail dan Gambar Ilustrasi Blogger

Apakah thumbnail Blogger berpengaruh terhadap SEO?

Ya, thumbnail dapat membantu optimasi SEO terutama pada Google Images dan meningkatkan CTR artikel di hasil pencarian. Penggunaan alt text, ukuran gambar yang tepat, serta format WebP juga membantu performa blog menjadi lebih baik.

Mengapa thumbnail utama sebaiknya menggunakan loading eager?

Karena thumbnail utama berada di bagian atas artikel dan langsung terlihat saat halaman dibuka. Loading eager membantu browser memprioritaskan gambar utama agar tampil lebih cepat dan mendukung optimasi LCP.

Apa format gambar terbaik untuk Blogger?

Format WebP menjadi pilihan terbaik karena ukuran file lebih ringan dibanding JPG atau PNG tetapi kualitas gambar tetap bagus. Format ini juga sangat direkomendasikan untuk optimasi kecepatan dan SEO modern.

Apakah gambar ilustrasi perlu menggunakan lazyload?

Ya, gambar ilustrasi yang berada di tengah atau bawah artikel sebaiknya menggunakan loading lazy agar halaman lebih ringan, hemat bandwidth, dan meningkatkan pengalaman pengguna saat membaca artikel.

TipsTechPraktis