Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

4
Tgl. 19 Februari 2014

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 l...

Widget Yang Terpasang Pada Laman Blog Eltelu
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.

Ad

Suka? Bagikan artikel ini kepada teman - jaringan Anda.
Label: , .
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 4 komentar untuk artikel ELTELU yang berjudul Membenahi Script Widget Yang Terpasang Agar Lebih Ramah SEO .
25/02/14 12.23 O

nice tutorial gan..
bermanfaat :)

25/02/14 23.30 O

@Hendra Iya Sob. Harapan saya memang agar dapat diambil guna dan manfaatnya. :)

29/03/14 12.00 O

Tul banget kang..widget yg tidak rapi malah memperberat loading blog..and secara visual juga jelek kalau penataanya ga bener..ditunggu kunbal nya..:-)

30/03/14 15.52 O

@Zoomx Satriyo Iya Sob. Akan tetapi ini sebenarnya lebih tertuju pada SEO karena yang dilakukan di situ adalah melakukan penambahan alt atribut pada gambar yang ditampilkan oleh widget standar blogger. :)

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog