Latest News

Cara Membuat ALT dan Title Tag Otomatis Pada Gambar Tertentu di Blog

Kali ini NKS coba suguhkan tutorial menarik untuk para blogger atau bahkan pemilik web dengan dedikasi SEO tinggi. Sebelum kita memulai tutorial kali ini mari kita ketahui terlebih dahulu apa kegunaan ALT text dan Image Title pada gambar.


Fungsi "Title" pada gambar

     Seperti yang kita ketahui kegunaan Title pada gambar adalah memberikan judul pada gambar yang kita miliki, Sehingga pembaca blog dapat mengetahui informasi apa yang ingin disampaikan oleh penulis pada gambar tersebut. Sedangkan,


Fungsi "ALT" pada gambar

      ALT (Alternative Text) berguna untuk memberikan teks alternatif pada gambar yang kita miliki, Jadi dengan memberi ALT tag pada gambar ketika gambar gagal meload atau gambar tidak muncul akan ditampilkanlah ALT gambar tersebut. Dengan demikian tanpa melihat gambar pengunjungpun tahu apa yang sebenarnya ada pada gambar tersebut, Seperti halnya Search Engine mereka membaca ALT tag gambar.


Cara memasang ALT dan Title gambar

     Secara manual ALT dan Title gambar bisa sobat tentukan setelah gambar yang sobat upload muncul (saat pengeditan artikel). Kemudian klik gambar tersebut kemudian klik properties. Maka akan muncul field ALT dan Title yang haru di isi.
    Lalu bagaimana jika kita kelupaan memberi ALT tag dan Title tag ini? namanya juga manusia, jadi wajar saja kalu lupa, Disini NKS akan memberikan alternatif yakni "Cara Membuat ALT dan Title Tag Otomatis Hanya Untuk Gambar Yang Belum Ada Tag Tersebut". 
     Jadi, sistimatika nya begini, Ketika kita lupa memberikan ALT atau Title tag pada gambar maka akan terisi secara otomatis dengan nama file gambar tersebut, sedangkan untuk gambar yang sudah terisi atau tersetting ALT dan Title tagnya maka akan masih utuh tidak berubah, jadi bisa meminalisir kesalahan. Memang banyak tutorial seperti ini, namun kebanyakan hanya membuat alt otomatis pada seluruh gambar, jadi gambar yang sudah ada pun akan diganti ALT nya.


ALT dan Title Tag Otomatis Hanya Untuk Gambar Yang Belum Ada

  • Pertama, Login Blogger
  • Kemudian Masuk ke Edit HTML
  • Lalu cari kode </body> (Gunakan CTRL+F)
  • Stelah itu Copy kode javascript dibawah ini tepat diata kode </body> tadi

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 $('img').each(function(){
 var $img = $(this);
 var filename = $img.attr('src')

 if (!$img.attr("title") || $img.attr("title") == ""){
 $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
}
  if (!$img.attr("alt") || $img.attr("alt") == ""){
 $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
}

 });
});
//]]>
</script>


  • Jika template sobat sudah ada Jquery library nya maka sobat tidak perlu lagi mengcopy kode
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
  • Kemudian simpan template sobat
    Nahh,,, jadi lebih tenang jikalau memang lupa memasang ALT dan Title tag. Sekian postingan kali ini semoga bermanfaat untuk para pembaca NKS.
Cara Membuat ALT dan Title Gambar Otomatis | Tips SEO | Optimasi SEO lewat Gambar | fungsi ALT gambar | fungsi Title gambar | tips mengisi alt dan title | javascript ALT title Gambar otomatis | Jquery scan Gambar | Gambar Belum ada ALT | masalah gambar belum punya ALT | apa itu title | apa itu ALT | solusi lupa pasang ALT dan title tag

19 comments:

  1. jadi nggak repot ngasih alt dan title ya mas, kadang saya juga lupa belum memberi alt dan title :d

    ReplyDelete
    Replies
    1. iya kang Ucup, Terimakasih atas kunjungannya cheer

      Delete
  2. Mantabb Nih kang Tipsnya Akan langsung Praktekan :d
    OwH Iya Btw Follbvack Sukses gan hehe makasii yah udah Follow Blogg saya hehe

    ReplyDelete
    Replies
    1. iya, sama-sama, saling meramaikan :)

      Delete
  3. jdi gampang ni
    hehe
    thanks sob

    ReplyDelete
  4. Makasi Yah tipsnya Hehehe
    jadi gampang ni. :d

    ReplyDelete
  5. Pasang Dulu Sob.Biar Gk ribet Masang Alt Tag Nya

    ReplyDelete
  6. Template nya bisa do download gak gan........

    ReplyDelete
  7. thankkss!! saya nyari2 artikel ini. soalnya saya jg ga rajin2 amat ngasi alt dan title di setiap image. ngabisin waktu soalnya. moga2 dgn script ini kerjaan posting bs lebih mudah.

    ReplyDelete
  8. Terima kasih share nya sob, title dan alt pada gambar memang penting juga dalam SEO blog kita..
    ditunggu kinjungan baliknya sob..

    ReplyDelete
  9. masih kurang sempurna nih codingan nya.

    gimana cara nya tittle gambar ngilangin / replace - menjadi spasi ?

    ReplyDelete
  10. jadi gampang nih posting artikel tips kesehatan, karena udah otomatis ya gan..
    thank's

    ReplyDelete
  11. mantap bro artikelnya
    kunbal juga yah ke blog ku

    http://reynaghgaul.blogspot.com

    ReplyDelete
  12. mantap bang, ini membantu bangat buat orang yang lupaan, heheh.
    Ditunggu kang kunbal nya

    ReplyDelete
  13. Keren postingan tentang membuat tag otomatisnya, segera kunjungi kembali ya.. menarik viral looohhh
    Media Informasi Online Kota Medan

    ReplyDelete

Terimakasih telah berkunjung dan membaca artikel NKS, Silahkan tinggalkan komentar anda guna meramaikan blog sederhana ini.

NamiKaze Star Shared by Themes24x7 Copyright © 2014

Theme images by Bim. Powered by Blogger.