Tips SEO Menambahkan Alt Text pada Thumbnail Image Homepage

Baca Juga

ALT Text adalah singkatan dari alternative text yaitu teks yang akan tampil jika gambar tidak muncul karena loding atau hilang. Penggunaan alt text disarankan karena memberi deskripsi pada gambar.

Mesin pencari seperti Google hanya memahami teks (tulisan), tidak dengan gambar. Karenanya, saat memasukkan gambar, pastikan Anda mengisi kolom alt text dan title text.

Jika thumbnail imge (gambar kecil) di halaman depan blog Anda (yang menggunaka Auto Readmore) mau ditambahkan alt text, bahkan title text juga, agar lebih SEO, berikut ini kodenya:

expr:alt='data:post.title'
expr:title='data:post.title'

Kode pertama (expr:alt='data:post.title') adalah untuk menambahkan alt text berupa judul postingan secara otomatis pada gambar.

Kode kedua (expr:title='data:post.title') adalah untuk menambahkan title text berua judul tulisan pada gambar.

Kedua kode tersebut bisa digunakan untuk semua gambar (image) di blog.

Berikut ini contoh penerapan kode di atas pada gambar thumbnail halaman depan blog ini. Perhatikan kode warna merah.

<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<a expr:href='data:post.url'><img expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
<div class='Image thumb'><a expr:href='data:post.url'>
       <img expr:alt='data:post.title' expr:title='data:post.title' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRqjg74PlUD7SkQVpStn-ceRGUREC317AeRnsM578sq1nVDcrLirtNT8KISfA9Ek0BQGI8l4bcImQU8Tq_sWO2AjepacTq0Jv4Fmdn881eKgyHSWT7uCUz7pyIL3VFMSNp7rxqcr8hlHc/s1600/no_available_image.png' width='170'/>
      </a></div>
</b:if>

GAMBAR POPULAR POST

Kedua kode di atas juga bisa diterapkan pada gambar thumbnail popular post agar lebih SEO. Ini contoh penerapannya:

<img expr:alt='data:post.title' expr:title='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

Silakan cek kode di blog Anda jika menggunakan widget popular post plus gambar. Terapkan seperti kode di atas untuk menambahkan alt text dan title text.*