Cara Meningkatkan Secara Optimal Template Biar 100 % Di Audits Google Chrome
Belakangan ini para blogger disibukan dengan meningkatkan secara optimal template mereka terutama di tools yang disediakan oleh google chrome pasalnya disana mereka sanggup melihat pribadi hasil dari meningkatkan secara optimal blog mereka mulai dari performance, Progresive Web App, Best Practices, Accessibility sampai kualitas seo.
Hal ini dilakukan demi menunjang keberhasilan dalam menciptakan suatu blog atau website yang ramah dengan pengunjung dan pada hasil hasilnya tentu saja para blogger berharap mendapat income yang besar di tiap monetasi mereka.
Baca juga : Bagaimana cara submit link atau artikel di Google biar cepat di indeks ?
Nah pada kesempatan kali ini saya akan membagikan kiat saya dalam mengoptimasi template khususnya pada platform blogger. Disini saya hanya membeberkan pada dasarnya saja ya.
#2. Dibagian Navigasi blog pastikan pemilihan warna dari teks dan background navi harus pas saya merekomendasikan gunakan warna yang tidak terlalu jelas dan mencolok contohnya #333 atau #222 untuk teks dan background sanggup dikombinasikan dengan warna #fff atau #01579B.
#3. Buang semua javascript dan CSS yang tidak diharapkan menyerupai jQuery atau font awesome.
Baca juga : Cara Menguji Seo Blogger dan Wordpress Menggunakan Google Chrome
#4. Gunakan font default bawaan dari blogger saja.
pola 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 kau 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 menciptakan postingan gambar dari postingan kau di kompress terlebih dahulu di https://compressjpeg.com/
#6. dibagian paling atas dari template kau 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 aba-aba iklan AdSense gunakan javascript menyerupai ini :
<!-- Kode ini untuk lazyload adsense dan untuk aba-aba auto ad, silahkan sesuaikan aba-aba 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 aba-aba sempurna diatas aba-aba /head ganti aba-aba ca-pub dengan aba-aba iklan kamu.
#8. Pada widget search silahkan kau ganti dengan aba-aba 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 niscaya bisa.
#9. Jika masih ada yang belum mengerti sanggup pribadi komentar pada postingan ini.
Hal ini dilakukan demi menunjang keberhasilan dalam menciptakan suatu blog atau website yang ramah dengan pengunjung dan pada hasil hasilnya tentu saja para blogger berharap mendapat income yang besar di tiap monetasi mereka.
Baca juga : Bagaimana cara submit link atau artikel di Google biar cepat di indeks ?
Nah pada kesempatan kali ini saya akan membagikan kiat saya dalam mengoptimasi template khususnya pada platform blogger. Disini saya hanya membeberkan pada dasarnya saja ya.
Hal pertama yang harus dilakukan untuk mengoptimasi template pada Audits Google Chrome biar mendapat nilai 100%
#1. Pastikan terlebih dahulu teman sudah memakai template yang responsive.#2. Dibagian Navigasi blog pastikan pemilihan warna dari teks dan background navi harus pas saya merekomendasikan gunakan warna yang tidak terlalu jelas dan mencolok contohnya #333 atau #222 untuk teks dan background sanggup dikombinasikan dengan warna #fff atau #01579B.
#3. Buang semua javascript dan CSS yang tidak diharapkan menyerupai jQuery atau font awesome.
Baca juga : Cara Menguji Seo Blogger dan Wordpress Menggunakan Google Chrome
#4. Gunakan font default bawaan dari blogger saja.
pola 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 kau 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 menciptakan postingan gambar dari postingan kau di kompress terlebih dahulu di https://compressjpeg.com/
#6. dibagian paling atas dari template kau 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 aba-aba iklan AdSense gunakan javascript menyerupai ini :
<!-- Kode ini untuk lazyload adsense dan untuk aba-aba auto ad, silahkan sesuaikan aba-aba 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 aba-aba sempurna diatas aba-aba /head ganti aba-aba ca-pub dengan aba-aba iklan kamu.
#8. Pada widget search silahkan kau ganti dengan aba-aba 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 niscaya bisa.
#9. Jika masih ada yang belum mengerti sanggup pribadi komentar pada postingan ini.
