Friday, February 26, 2016

Membuat Alt Text Gambar Otomatis SEO

Untuk mengoptimalkan blog supaya menjadi SEO (ramah dengan mesin pencari), mengandalkan tulisan yang menarik saja tidak cukup. Anda harus menggali potensi yang ada di blogger untuk dioptimalkan SEOnya.

Penggunaan gambar dalam postingan blog selama ini jarang mendapatkan perhatian serius dari admin blog. Mereka hanya sekedar upload saja dan mempostingnya. Padalah gambar bisa dioptimasi SEOnya.
Alt Text Gambar SEO

Artinya nanti gambar yang Anda upload juga mudah ditemukan orang di Google Image. Untuk penting memberi nama setiap gambar yang akan diupload di blogger. Sebenarnya Anda bisa menggunalan Alt Text secara manual. Namun bila blog berisi puluan gambar, rasanya capek juga menggunakan Alt Text.


Anda bisa menggunakan Alt Text Gambar SEO secara otomatis dengan Java Script. Baiklah berikut ini cara membuat Alt Text Gambar SEO Otomatis:

1. Login ke dashboard blogger > template > Edit HTML
2. Cari kode </body>, mempercepat pencarian gunakan ctrl + f. Bila sudah ketemu copy kode berikut ini dan paste di atas kode </body>
<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>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script> 
3. Simpan. Kini setiap kali Anda menambahkan gambar pada postingan blog maka secara otomatis menggunakan Alt Text Gambar SEO. 


EmoticonEmoticon