Thursday 25 April 2013

Cara nak letak Alt Tag secara Automatik


Apa itu Alt tag dan Title tag?? Seperti yang semua sedia maklum, Alt tag dan Title tag untuk gambar yang diupload adalah penting untuk mesra SEO supaya search engine dapat mengenali apakah gambar yang kita upload itu.

Terdapat cara manual untuk meletakkan Alt tag dan Title tag pada gambar tetapi adakah anda akan meletakkan tag tersebut setiap gambar anda?? menyusahkan bukan. Bagi anda yang tidak mengetahui cara manual untuk meletakkan Alt tag dan title tag pada gambar, lihat bawah:

Pada setiap gambar yang diupload terdapat satu kod HTML:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaI6e7M82CTV8Ry6CNHPlOzhy76e_Az9o6F2TshKkMEThd9EVriTTqzblBriwuMaRPbOo78QwzxlCEvbI2adOhFmFy5kcCBN11CApJXIXTwzOMYE2yIWyhJnP9-m3bY8cBPjDCpXkq06n1/s1600/image-seo-script-blogger.png" title="image seo" alt="image seo" description="gambar seo for blogger" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">

Tulisan yang berwarna merah adalah cara untuk meletakkan Alt tag dan title tag serta description tag pada gambar. Akan tetapi, di sini saya ingin kongsikan satu cara untuk meng'automatik'kan cara meletakkan tag-tag tersebut. Bagaimana sistem ini berfungsi? okay, pada setiap gambar pastinya akan ada nama gambar tersebut. contoh: 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaI6e7M82CTV8Ry6CNHPlOzhy76e_Az9o6F2TshKkMEThd9EVriTTqzblBriwuMaRPbOo78QwzxlCEvbI2adOhFmFy5kcCBN11CApJXIXTwzOMYE2yIWyhJnP9-m3bY8cBPjDCpXkq06n1/s1600/image-seo-script-blogger.png 

Maka automatik alt tag dan title tag gambar yang anda upload menjadi :
alt="image-seo-script-blogger" title="image-seo-script-blogger"

cool kan? okay, caranya ialah pergi ke Dasboard>template>edit HTML>tick Expand Widget. Cari tag ini </body> :

Kemudian, copy script di bawah dan paste sebelum tag tersebut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
//SEO Script Powered by Khairul Asrol - www.kayruls.com
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script>

Save dan siap! mudah bukan? lepas ni anda tidak perlu lagi untuk meletakkan tag-tag tersebut pada setiap gambar. cukup untuk hari ini, saya akan kongsikan lagi info blogging pada hari-hari yang lain ya. 

Untung pantas

LinkWithin