Membenahi Script Widget Yang Terpasang Agar Lebih Ramah SEO

Berdasar pada beberapa referensi, dinyatakan bahwa apabila sebuah blog memuat obyek dalam bentuk gambar maka blog tersebut akan menjadi lebih ramah SEO bila pada tiap gambar yang terpasang disertakan ‘alt’ atribut didalamnya. Hal ini tidak lain disebabkan karena ‘alt’ atribut yang terpasang pada gambar dapat membantu mesin telusur dalam mendeskripsikan gambar yang dimaksud ketika pengguna melakukan penelusuran. Sebagai contoh misalnya apabila pada blog terdapat sebuah gambar apel yang dimuat dengan kode sumber <img src='url_gambar_apel' height='24’ width='24'/>, maka gambar pisang dengan kode sumber ini akan menjadi lebih optimal dan ramah SEO apabila ditambahkan ‘alt’ atribut didalamnya sehingga menjadi <img src='url_gambar_apel' height='24’ width='24' alt='Gambar Apel' />.

Namun demikian apabila ditelisik lebih jauh, ternyata pada widget standar Blogger pun terdapat beberapa bagian yang tidak dilakukan pengoptimalan untuk gambar yang ditayangkan. Dalam hal ini widget yang dimaksud adalah widget entri populer dengan fungsi utamanya yaitu untuk menampilkan daftar artikel yang paling sering dibuka dan dibaca oleh pengunjung blog.

Widget entri populer sendiri menyediakan beberapa opsi penayangan, yaitu 1) hanya menampilkan judul entri, 2) menampilkan judul entri disertai dengan gambar, 3) menampilkan judul entri disertai dengan deskripsi, dan 4) menampilkan judul entri disertai dengan gambar dan deskripsi. Nah, pada penayangan judul entri yang menyertakan gambar inilah letak permasalahannya. Hal ini disebabkan karena pada kode sumber gambar yang dimuat pada entri populer tidak menyertakan konten apapun pada ‘alt’ atributnya.

Perhatikan cuplikan dari rangkaian kode entri populer yang berfungsi untuk menampilkan gambar di bawah ini.

<div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

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

  </a>

</div>

Berdasarkan cuplikan kode di atas dapat dilihat bahwa ‘alt’ atribut pada kode sumber yang dipakai untuk menampilkan gambar tidak berisikan konten sama sekali. Sehingga guna menyempurnakan kode tersebut tinggal ditambahkan kata atau teks tertetu dengan fungsi untuk mendeskripsikan gambar yang dimuat. Sebagai contoh misalnya Anda dapat menambagkan kata ‘Gambar’, ‘Image’, atau ’Thumbnail’ sehingga kode sumber tersebut akhirnya menjadi seperti contoh kode sumber di bawah ini.

<div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

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

  </a>

</div>

Namun demikian bila Anda menginginkan judul artikel untuk menjadi deskripsi dari masing-masing gambar yang dimuat pada daftar entri populer tersebut, maka Anda dapat mengganti alt='' atribut pada kode sumber tersebut dengan expr:alt='data:post.title' sehingga akhirnya judul dari tiap artikel lah yang dijadikan sebagai deskripsi gambar. Dalam hal ini rangkaian kode akhirnya menjadi seperti di bawah ini.

<div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

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

  </a>

</div>

Cukup mudah bukan? Semoga berguna, bermanfaat, dan apabila mengalami kesulitan atau kendala dalam menerapkan teknik tersebut, maka silakan poskan komentar dalam artikel ini untuk menyampaikan kesulitan ataupun kendala yang Anda alami terkait dengan penerapan teknik tersebut.