Apakah Validator W3C Mempengaruhi SEO

Apa itu Validator W3C?

Validator W3C adalah alat yang berfungsi untuk memeriksa validasi dokumen web berupa HTML, XHTML, SMIL, MathML, dan lainnya. Anda pasti sudah tahu alamat W3C itu sendiri. Silahkan apabila anda ingin memeriksa html5 dari blog ini atau blog anda sendiri. --> Validator W3C

Validator W3C Mempengaruhi SEO?

Jawabannya adalah tidak. Coba sobat periksa sendiri situs-situs besar dan terkenal. kita ambil contoh saja google, youtube, atau facebook. Berikut saya tampilkan screenshot test markup validator dari facebook, google dan youtube:

Dapat terihat jelas pada gambar diatas, bahwa situs-situs tersebut pada dasarnya tidak memperbaiki dokumen web meraka yang error walaupun mereka mampu. Saya tidak tahu alasan yang pasti kenapa, tapi Matt Cutts sendiri mengapresiasi apabila ada anggotanya yang mau meluangkan waktu untuk memperbaikinya. Untuk video terkait bahwa Validator W3C tidak mempengaruhi SEO adalah sebagai berikut:

Video Matt Cutts pada 16 September 2009 tentang Mengapa google.com Tidak Validasi dokumen mereka?

Video pada 15 Maret 2011 Matt Cutts dengan Danny Sullivan dari SearchEngineLand tentang Apakah Validasi HTML diperlukan untuk Ranking?

Namun ada baiknya untuk mengurangi seminimal mungkin kesalahan yang terjadi pada blog kita. Karena pada dasarnya yang disampaikan oleh W3C itu benar. Sebagai contoh, sewaktu saya memeriksa blog ini, saya berusaha memperbaiki kesalahan yang ada semaksimal mungkin. Dan memang ada hasil positifnya, yakni compability pada browser tertentu.

Compability Suatu Browser

Semisal saya ibaratkan, ketika sobat menuliskan kalimat pada www.google.com dan ada kata yang salah, apakah google mengerti kalau kata itu salah? Jawabannya iya dan mesin pencari google berusaha melakukan pendekatan menuju kata yang lebih tepat dengan memberikan sugesti kata terkait dan menampilkan laman terkait. Sama halnya dengan validator w3c yang berfungsi memberitahu adanya kesalahan kode dokumen suatu situs. Ketika ada kode html yang salah pada template blog anda apakah browser anda mengerti kalau html itu salah? Jawabannya iya juga, browser anda berusaha untuk membenarkan agar dapat membaca template dan menampilkannya sehingga dapat terlihat oleh mata manusia.

Maka dari itu akan lebih baik apabila kita dapat memperbaikinya, ya terkait dengan compability dari suatu browser. Terlihat pada peramban Chrome bagus, belum tentu pada Mozilla atau Internet Explorer (biasa terjadi). Bisa saja ada widget yang bergeser atau tidak terlihat pada browser lain namun terlihat cantik dan pro pada browser lainnya lagi. Sedangkan faktor yang mempengaruhi SEO itu sendiri ada banyak. Seperti kualitas konten, keywords, dan lain sebagainya yang belum bisa saya jelaskan satu per satu.

Menghilangkan Script plusone.js di Blogger

Menghilangkan plusone.js Blogger

Menghilangkan javascript plusone.js dengan URL https://apis.google.com/js/plusone.js pada blogger itu dapat untuk dilakukan. Plusone.js merupakan javascript bawaan blogger untuk widget dan navigasi bar yang ada pada posisi floating diatas. Selain itu sebelum google+1 button menggunakan versi asinkron (async) yang baru (platform.js), plusone.js lah yang digunakan walaupun dapat diasinkronkan juga. Namun dengan seiring berkembangnya developer google dengan kemunculan PageSpeed Insights, banyak pengguna domain blogspot yang memeriksa kecepatan blog mereka.

Dan dengan hasil yang kurang memuaskan dimana adanya javascript plusone.js yang memblokir perenderan di konten paruh atas. Karena bawaan langsung dari blogger, apabila script itu dihilangkan maka ada beberapa widget yang tidak berfungsi, seperti arsip blog. Namun widget tersebut jarang digunakan dan selain itu widget lainnya yang saya gunakan pada dewa inside blog ini berfungsi dengan baik.

Menghapus Plusone.js

Dengan menghapus script itu, maka akan mempercepat loading blog dengan domain blogspot anda. Untuk menghapus script tersebut dari platform blogger silahkan anda ikuti langkah-langkah dibawah ini:
Langkah 1. Pada Template --> Edit HTML --> Cari (CTRL+F) url berikut:

https://apis.google.com/js/plusone.js

Namun apabila alamat url javascript pluone.js untuk widget blogger diatas tidak ada, langsung lihat langkah 3.

Langkah 2. Hapus semua kode navbar dari <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> sampai dengan </b:section>. Seperti gambar yang tampil dibawah ini:
Atau cara paling mudah adalah menggunakan fitur pada Edit HTML yaitu Lompat ke widget --> Nanvbar1

Klik Untuk Memperbesar Gambar

Langkah 3. Selanjutnya Cari (CTRL+F) kode:

</body>

Ubah kode diatas menjadi

&lt;!--</body>--&gt;&lt;/body&gt;

Langkah ini perlu dilakukan karena apabila anda memiliki extensions PageSpeed Insights (by Google) di chrome, maka apabila anda check pada developer tools maka plusone.js tetap ada.

Langkah 4. Simpan Template

Langkah 5. Selanjutnya uji kecepatan menggunakan --> PageSpeed Insights. Untuk memastikan bahwa script plusone.js telah dihapus dari template blog anda. Untuk memudahkan dan memastikan lebih jauh anda juga dapat meng-install --> extensions PageSpeed Insights (by Google).

Selamat anda telah lebih mempercepat loading blog anda dengan menghilangkan script plusone.js yang memblokir perenderan konten paruh atas :). Silahkan tinggalkan komentar pada kolom komentar dibawah apabila anda memiliki masukan lainnya.

Cara Agar Posting Cepat Terindeks Google

Cara agar postingan artikel cepat terindex google sehingga dapat muncul pada halaman hasil mesin pencari serp dengan menggunakan Fetch as Google dari Alat Google Webmaster. Alasannya sudah jelas karena google merupakan mesin pencari yang dipakai oleh seluruh orang di dunia. Dengan menggunakan fitur fetch as google, postingan dapat cepat terindex oleh google dalam hitungan detik dan menit. Tentunya kamu juga sudah menambahkan blog ke search engine google.

Berdasarkan pengalaman saya menggunakan tool ini, artikel yang saya publikasikan langsung tampil pada SERP google apabila saya periksa dengan menggunakan alamat postingan yang berkaitan itu dalam waktu yang singkat. Tool ini sangat bermanfaat apabila anda memiliki situs yang setiap harinya harus mempublikasikan puluhan artikel sekaligus. Seperti situs-situs selebritis, berita dan politik.

Video SEO Startup

Maile Ohye (Pimpinan Teknologi Developer Programs di Google) tentang kegunaan fetch as google tool.

Dampak Negatif

Namun ada sisi buruk yang saya alami (belum tentu orang lain mengalaminya juga) dari menggunakan tool ini adalah ada salah satu dari posting saya yang terdahulu hilang dari dindeks. Saya dapat berkata demikian karena saya mengalaminya. Setelah AMBIL sebagai google bot dan Kirim ke Indeks (mungkin saya tidak sadar double submit). Saya periksa beberapa menit kemudian dengan mencarinya pada mesin pencari google. Dan memang terbukti postingan saya langsung diindex oleh google. Namun ketika saya melihat peta situs saya, ternyata jumlahnya sama dengan sebelumnya.

Disini terjadi miss atau hilangnya salah satu dari artikel saya di mata google bot. Mungkin itu hanya bug yang terjadi pada saya dan belum tentu orang lain mengalaminya juga. Dengan kejadian seperti itu, saya lebih sering update postingan dan membiarkannya secara alami agar google bot mengindeks postingan saya. Saya tetap gunakan tool ambil sebagai google bot ini tapi tanpa mengirim alamat url yang berkaitan agar diindex oleh google bot.

Batasan Submit Alamat Posting

Ada batasan submit URL dari postingan yang dapat disubmit secara langsung setiap bulannya. Untuk setiap 1 URL berbeda dari setiap postingan yang kita ambil atau render oleh google bot secara langsung melalui alat webmaster dapat dikirim agar diindex dengan maksimal jumlah adalah 500 URL per bulan.

Sedangkan untuk URL yang terkait langsung pada setiap URL posting berbeda yang kita ambil atau render dapat dikirim agar dindex dengan maksimal jumlah adalah 10 URL per bulan.

Cara Menggunakan Fetch as Google

Akhirnya kita sampai pada fungsi Ambil sebagai Google Bot. Maksudnya adalah google bot akan secara langsung melihat konten yang kita ingin perlihatkan kepadanya melalui alamat yang kita cantumkan lalu mengambil ataupun merendernya.

Langkah 1. Kunjungi Ambil sebagai Google --> Pilih situs yang diinginkan. Atau anda dapat membukanya pada Alat Webmaster --> Perayapan --> Ambil sebagai Google.

Klik untuk Memperbesar

Langkah 2. Masukkan alamat postingan yang ingin kita render. Yaitu bagian tengah dari URL posting tanpa mencantumkan alamat blog dan tanpa slash (/). Contoh: https://dewainside.blogspot.com/2010/05/cara-agar-blog-terdeteksi-search-engine.html Bagian yang berwarna Biru yang anda copy dan paste.

Langkah 3. Pilih tampilan yang ingin dirayapi oleh google bot. Ada 4 tampilan yang tersedia: Desktop, Seluler: Ponsel Cerdas, Seluler: XHTML/WML dan Seluler: cHTML.

Langkah 4. Klik AMBIL atau AMBIL DAN RENDER. Perbedaannya sederhana. AMBIL = hanya merayapi posting terkait. Sedangkan AMBIL DAN RENDER = merayapi dan menampilkan posting terkait. Namun aslinya tidak ada tampilan apapun. lol.

Langkah 5. Kirim ke Indeks URL posting yang anda telah ambil atau render sebelumnya.

Silahkan anda tunggu beberapa menit dan cari URL posting yang telah anda kirim untuk diindeks melalui mesin pencari google. Dapat dipastikan akan muncul pada SERP.

Sekian tutorial dari Cara Agar Posting Cepat terindex Google dalam hitungan detik. Semoga dapat bermanfaat bagi sahabat blogger sekalian.

Menampilkan Gadget Blogger di Mobile View

Pada tahun 2015 ini mobile friendly website sangat diperhatikan karena google sendiri memperhatikan Mobile SEO pada setiap blog. Pada tampilan seluler device blogger, widget tidak ditampilkan dan yang ditampilkan hanya laman (pages). Jika anda ingin menampilkan ataupun menyembunyikan gadget tertentu (semisal, kotak pencarian) pada versi seluler di blogspot caraya sangat mudah.

Secara otomatis blog dengan platform blogger akan memiliki kode meta tag seperti ini:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0' name='viewport'/>

Maksudnya agar blog dapat menjadi tampilan mobile apabila diakses melalui mobile, tablet atapun iphone sehingga menjadi mobile friendly (faster, padat dan ringkas). Anda dapat melihatnya pada template blogger anda sendiri. Seandainya kode diatas tidak ada maka perlu ditambahkan pada area setelah <head>

Untuk memeriksa apakah tampilan blog anda mobile friendly cukup anda tambahkan ?m=1 jadi akan seperti ini :

https://dewainside.blogspot.com/?m=1

Sebelumnya anda harus menggunakan template khusus (custom) untuk Template Seluler Blog. Pada Template --> Khusus --> Simpan

Menampilkan Widget pada Tampilan Mobile

Ada dua cara untuk menampilkan widget pada tampilan mobile. Silahkan pilih salah satu untuk anda terapkan pada gadget yang diinginkan. Carilah letak gadget blogger kamu dan tinggal tambahkan kode seperti contoh dibawah :
Cara 1. Tambahkan mobile='only' (hanya tampil pada mobile view dan tidak tampil pada dekstop) :

<b:widget id='HTML1' locked='false' mobile='only' title='ARTIKEL TERBARU' type='HTML'>

Cara 2. Tambahkan mobile='yes' (tampil pada versi mobile juga)

<b:widget id='HTML1' locked='false' mobile='yes' title='ARTIKEL TERBARU' type='HTML'>

Menyembunyikan Widget pada Tampilan Mobile

Ada dua cara untuk menyembunyikan widget blogger pada tampilan mobile device. Carilah letak gadget blogger kamu dan cukup tambahkan kode seperti contoh dibawah :
Cara 1. Menambahkan mobile='no' pada kode widget yang diinginkan :

<b:widget id='HTML1' locked='false' mobile='no' title='ARTIKEL TERBARU' type='HTML'>

Cara 2. Menggunakan kode kondisi :

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
//Widget yang disembunyikan
</b:if>

Note:
Khusus tag kondisi data:blog.isMobile dapat digunakan universal selain daripada widget. Sehingga dengan mengganti kodisi "false" (menyembunyikan pada tampilan mobile) menjadi "true" (menampilkan pada tampilan mobile).

Jangan lupa untuk Simpan Template. Untuk memeriksa apakah kode itu berhasil. Silahkan tambahkan kode https://dewainside.blogspot.com/?m=1 pada alamat blog anda agar tampil secara seluler. Cara ini juga sama seperti Cara Menampilkan Iklan Adsense di Mobile Blog.

Sekian.
Semoga bermanfaat untuk sahabat blogger.

Cara Membuat Tombol Kembali ke Atas di Blog

Membuat tombol kembali keatas (back to top) pada blog dengan menggunakan kode HTML, Javascript, CSS atapun jQuery. Fungsi dari tombol ini adalah apabila pengunjung blog scroll kebawah maka akan muncul tombol back to top yang memudahkan pengunjung untuk kembali pada posisi atas dari posting blog tanpa susah menggunakan mouse untuk keatas.

Memasang Tombol Kembali ke Atas

Pada dashboard blog, pilih Template --> Edit HTML --> Klik pada area kosong kotak Edit HTML dan Cari (CTRL+F) kode berikut:

</head>

Selanjutnya ikuti langkah dibawah ini. Silahkan anda pilih salah satu efek dari tombol ke atas berikut:

1. Membuat Tombol Kembali ke Atas dengan Efek Halus

Langkah 1. Letakkan kode berikut diatas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()}
else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700);
return false})});
</script>

          Simpan Template

Langkah 2. Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Masukkan kode berikut di dalamnya.

<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSh9A6v1f73E440Zv4S_qfQCH2cOgqcra1IUCgonigjzQPfLdyrq1tDDYOajK1zp2TuQ2pMIlfZMFHP_But-fTMPerWTDGfnjc9esIGB5B7DOc03bo2puqJSbM3qIra9yA38zFH0naXXrI/s1600/arrow-up_basic_blue.png'/></div>

          Simpan

2. Membuat Tombol Kembali ke Atas dengan Efek Memantul

Penjelasan dari efek memantul ini adalah ketika tombol back to top di klik maka layar akan terlihat memantul sesaat layaknya seperti bola.

Langkah 1. Letakkan kode berikut diatas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

          Simpan Template

Langkah 2. Lihat ke Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan kode berikut didalamnya.

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSh9A6v1f73E440Zv4S_qfQCH2cOgqcra1IUCgonigjzQPfLdyrq1tDDYOajK1zp2TuQ2pMIlfZMFHP_But-fTMPerWTDGfnjc9esIGB5B7DOc03bo2puqJSbM3qIra9yA38zFH0naXXrI/s1600/arrow-up_basic_blue.png'/></div>

          Simpan

3. Membuat Tombol Kembali ke Atas dengan Efek Fading

Penjelasan dari efek fading ini adalah ketika tombol di klik maka visibilitas dari objek akan secara perlahan muncul. Biasa pada editing video kita mengenal fade in dan fade out.

Langkah 1. Letakkan kode berikut diatas </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

          Simpan Template
Langkah 2. Pilih Tata Letak --> Tambahkan Gadget --> HTML/JavaScript. Letakkan kode berikut didalamnya.

var scrolltotop={
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSh9A6v1f73E440Zv4S_qfQCH2cOgqcra1IUCgonigjzQPfLdyrq1tDDYOajK1zp2TuQ2pMIlfZMFHP_But-fTMPerWTDGfnjc9esIGB5B7DOc03bo2puqJSbM3qIra9yA38zFH0naXXrI/s1600/arrow-up_basic_blue.png
" />',
    controlattrs: {offsetx:5, offsety:5},
    anchorkeyword: '#top',
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport)
            this.$control.css({opacity:0})
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1)
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
 
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

          Simpan

Catatan: Text Merah adalah gambar tombol yang dapat anda ganti sesuai keinginan.
               Text Biru adalah kode jQuery, cukup anda tambahkan 1 kali apabila menggunakannya.
Tips: Anda dapat mengkompres kode diatas sebelum diaplikasikan pada template blog.

Selamat Mencoba..

Cara Menghilangkan Diberdayakan oleh Blogger

Menghapus tulisan Diberdayakan oleh Blogger (Powered by Blogger) atau yang biasa disebut Atribusi (Attribution) di blog jika anda merasa mengganggu tampilan blog dan ingin menghilangkannya. Namun untuk aturan dari blogger sendiri saya kurang tahu apakah melanggar atau tidak. Tapi secara pribadi karena saya menggunakan gratis dari blogger, saya tetap menampilkannya. :)

Cara Menghilangkan Tulisan Diberdayakan oleh Blogger

Langkah 1. Pada dashboard blog yang diinginkan, lihat Template --> Edit HTML

Langkah 2. Klik kiri area kosong kotak Edit HTML dan Cari (CTRL+F)  kode berikut :

</head>

Langkah 3. Copy dan Paste kode berikut di atas </head>

<style>
#Attribution1 {
display: none;
}
</style>

Langkah 4. Simpan Template

Kode tersebut "display: none;" pada dasarnya hanya tidak menampilkan widget tersebut dan space dari atribusinya juga ditiadakan.
Ternyata mudah bukan?
Sekian.

Cara Membuat Tombol Spoiler di Blogger

Membuat tombol spoiler pada blog merupakan hal yang cukup mudah. Fungsinya untuk menghemat space yang ada pada postingan apabila dibutuhkan, dengan menyembunyikan konten berupa tulisan ataupun gambar. Dan ketika tombol spoiler di klik maka konten tersebut akan ditampilkan. Untuk itu cukup copy-paste kode spoiler berikut pada mode HTML blog Anda.

Kode Spoiler :

<div><input value="Buka Spoiler" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Tutup Spoiler';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Buka Spoiler';}" type="button" /><div style="display: none;">MASUKKAN KONTEN DISINI</div></div>

Catatan:
Merah adalah tempat konten yang akan disembunyikan dengan spoiler.
Biru adalah text yang dapat anda ganti sesuai keinginan.

Contoh:

Dewa Inside | Tips, Tricks, Tutorial Blogger dan SEO
Terima Kasih Telah Berkunjung :)

Semoga bermanfaat.