Cara Optimasi Template Agar 100 % di Audits Google Chrome
Belakangan ini para blogger disibukan dengan optimasi template mereka terutama di tools yang disediakan oleh google chrome pasalnya disana mereka bisa melihat langsung hasil dari optimasi blog mereka mulai dari performance, Progresive Web App, Best Practices, Accessibility hingga kualitas seo.
Hal ini dilakukan demi menunjang keberhasilan dalam membuat suatu blog atau website yang ramah dengan pengunjung dan pada hasil akhirnya tentu saja para blogger berharap mendapatkan income yang besar di tiap monetasi mereka.
Baca juga : Bagaimana cara submit link atau artikel di Google agar cepat di indeks ?
Nah pada kesempatan kali ini saya akan membagikan kiat saya dalam mengoptimasi template khususnya pada platform blogger. Disini saya hanya membeberkan intinya saja ya.
#2. Dibagian Navigasi blog pastikan pemilihan warna dari teks dan background navi harus pas saya merekomendasikan gunakan warna yang tidak terlalu terang dan mencolok misalnya #333 atau #222 untuk teks dan background bisa dikombinasikan dengan warna #fff atau #01579B.
#3. Buang semua javascript dan CSS yang tidak diperlukan seperti jQuery atau font awesome.
Baca juga : Cara Menguji Seo Blogger dan Wordpress Menggunakan Google Chrome
#4. Gunakan font default bawaan dari blogger saja.
contoh penggunaan :
body{background: #FFFFFF;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Proxima Nova","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;font-size: 15px;color: #333333;font-weight:400;line-height:1.5em;text-decoration:none}
#4. Pastikan pada meta tag kamu sudah tersedia :
<!-- Warna untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta content='#2f303f' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#2f303f' name='msapplication-navbutton-color'/>
<link href='https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/manifest.json' rel='manifest'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#2f303f' name='apple-mobile-web-app-status-bar-style'/>
#5. usahakan setiap membuat postingan gambar dari postingan kamu di kompress terlebih dahulu di https://compressjpeg.com/
#6. dibagian paling atas dari template kamu ganti dengan ini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML dir='ltr' itemscope='' lang='id'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
#7. untuk kode iklan AdSense gunakan javascript seperti ini :
<!-- Kode ini untuk lazyload adsense dan untuk kode auto ad, silahkan sesuaikan kode google_ad_client -->
<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
document.body.className += " sticky";
lazyadsense = true;
}
}, true);
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-xxxxxxxxx",
enable_page_level_ads: true
});
//]]>
</script>
Letakan kode tepat diatas kode /head ganti kode ca-pub dengan kode iklan kamu.
#8. Pada widget search silahkan kamu ganti dengan kode ini :
<div id='search-box'>
<form action='//www.google.com/search' id='cse-search-box' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get' target='_blank'>
<meta content='//www.google.com/search?q={q}' itemprop='target'/>
<input aria-label='Search' id='search-text' name='q' onblur='if (this.placeholder == "") {this.placeholder = "Cari artikel...";}' onfocus='if (this.value == "Cari disini..") {this.value = ""}' placeholder='Cari artikel...' type='text'/>
<input name='as_sitesearch' type='hidden' value='bloggerszones.com'/>
<button id='search-button' title='search' type='submit'/>
<div class='clear'/>
</form>
</div>
dikostum sendiri ya saya yakin kalian pasti bisa.
#9. Jika masih ada yang belum mengerti bisa langsung komentar pada postingan ini.
Hal ini dilakukan demi menunjang keberhasilan dalam membuat suatu blog atau website yang ramah dengan pengunjung dan pada hasil akhirnya tentu saja para blogger berharap mendapatkan income yang besar di tiap monetasi mereka.
Baca juga : Bagaimana cara submit link atau artikel di Google agar cepat di indeks ?
Nah pada kesempatan kali ini saya akan membagikan kiat saya dalam mengoptimasi template khususnya pada platform blogger. Disini saya hanya membeberkan intinya saja ya.
Hal pertama yang harus dilakukan untuk mengoptimasi template pada Audits Google Chrome agar mendapat nilai 100%
#1. Pastikan terlebih dahulu sobat perampok google sudah menggunakan template yang responsive.#2. Dibagian Navigasi blog pastikan pemilihan warna dari teks dan background navi harus pas saya merekomendasikan gunakan warna yang tidak terlalu terang dan mencolok misalnya #333 atau #222 untuk teks dan background bisa dikombinasikan dengan warna #fff atau #01579B.
#3. Buang semua javascript dan CSS yang tidak diperlukan seperti jQuery atau font awesome.
Baca juga : Cara Menguji Seo Blogger dan Wordpress Menggunakan Google Chrome
#4. Gunakan font default bawaan dari blogger saja.
contoh penggunaan :
body{background: #FFFFFF;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Proxima Nova","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;font-size: 15px;color: #333333;font-weight:400;line-height:1.5em;text-decoration:none}
#4. Pastikan pada meta tag kamu sudah tersedia :
<!-- Warna untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta content='#2f303f' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#2f303f' name='msapplication-navbutton-color'/>
<link href='https://cdn.jsdelivr.net/gh/KompiAjaib/js@master/manifest.json' rel='manifest'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#2f303f' name='apple-mobile-web-app-status-bar-style'/>
#5. usahakan setiap membuat postingan gambar dari postingan kamu di kompress terlebih dahulu di https://compressjpeg.com/
#6. dibagian paling atas dari template kamu ganti dengan ini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML dir='ltr' itemscope='' lang='id'>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
#7. untuk kode iklan AdSense gunakan javascript seperti ini :
<!-- Kode ini untuk lazyload adsense dan untuk kode auto ad, silahkan sesuaikan kode google_ad_client -->
<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
document.body.className += " sticky";
lazyadsense = true;
}
}, true);
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-xxxxxxxxx",
enable_page_level_ads: true
});
//]]>
</script>
Letakan kode tepat diatas kode /head ganti kode ca-pub dengan kode iklan kamu.
#8. Pada widget search silahkan kamu ganti dengan kode ini :
<div id='search-box'>
<form action='//www.google.com/search' id='cse-search-box' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get' target='_blank'>
<meta content='//www.google.com/search?q={q}' itemprop='target'/>
<input aria-label='Search' id='search-text' name='q' onblur='if (this.placeholder == "") {this.placeholder = "Cari artikel...";}' onfocus='if (this.value == "Cari disini..") {this.value = ""}' placeholder='Cari artikel...' type='text'/>
<input name='as_sitesearch' type='hidden' value='bloggerszones.com'/>
<button id='search-button' title='search' type='submit'/>
<div class='clear'/>
</form>
</div>
dikostum sendiri ya saya yakin kalian pasti bisa.
#9. Jika masih ada yang belum mengerti bisa langsung komentar pada postingan ini.
