Cara memadukan template Blog AMP dan Non AMP - Banyak pertanyaaan dari sobat Blogger tentang bagaimana menyatukan 2 Template Blog AMP dan Non AMP HTML. Sebetulnya template yang digunakan tetap 1, tetapi ada 2 parameter bahkan 3. Pertama dalah URL Kanonis seperti http://kang-ismet.com , kedua, parameter ?amp=1
dan ketiga parameter ?m=1
Syarat penambahan parameter ?amp=1
Sebagai syarat mutlak untuk menambahkan parameter ?amp=1
, template blog harus sudah valid AMP HTML. Blog yang murni menggunakan AMPHTML biasanya ditandai bulatan hijau dan ketika dihover muncul tulisan Valid AMP, Has access to this site. Hal yang akan kita lakukan adalah menambahkan parameter ?amp=1
dan nantinya akan ditandai dengan
Cara Merubah Blog menjadi AMP Available
1. Login ke Blogger, Edit Template dan cari kode seperti dibawah ini (mirip-mirip)<html amp='amp' expr:dir='data:blog.languageDirection' lang='id'>
Hapus amp='amp'
, boleh langsung Save atau lanjutkan ke tahap berikutnya.
2. Tambahkan dibawahnya kode ini
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='amp' value='amp'/>
3. Cari kode seperti ini :
<link expr:href='data:blog.url' rel='canonical'/>
Hapus kode diatas, dan ganti dengan kode di bawah ini (sengaja saya tambahkan rel='alternate'
untuk penjelasannya silahkan baca Artikel ini)
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<link expr:href='data:view.url' rel='alternate'/>
<b:else/>
<link expr:href='data:blog.url.canonical' rel='canonical'/>
<link expr:href='data:view.url + "?m=1"' rel='alternate'/>
<link expr:href='data:view.url params { amp: "1" }' rel='amphtml'/>
</b:if>
4. Simpan dan lihat hasilnya.
Sampai disini sobat sudah beres membuat parameter ?amp=1 pada blog sobat, dan bisa dikostumisasi dengan tag kondisional
Hasil pencarian
Hasil pencarian melalui desktop akan muncul URL Kanonis biasa, hasilnya seperti gambar di bawah ini
Sedangkan pencarian melalui mobile akan diakses halaman AMP, hasilnya seperti gambar di bawah ini
Optimasi Iklan Adsense
Sebagaimana dijelaskan oleh Kang Ady KompiAjaib, setelah membuat parameter ?amp=i ini, perlu dipisahkan antara iklan yang tampil di Halaman AMP dan Non AMP.
amp-ad
Untuk caranya, pertama hapus kode JS amp-ad
seperti dibawah ini
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel and data:view.url == data:view.url params { amp: "1" }'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<b:else/>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<script>
//<![CDATA[
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-1234567890",
enable_page_level_ads: true
});
//]]>
</script>
</b:if>
Sesuaikan google_ad_client
dengan akun Adsense sobat, kemudian rubah semua slot iklan menjadi seperti ini
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and not data:blog.searchQuery and not data:blog.searchLabel and data:view.url == data:view.url params { amp: "1" }'>
<!-- Ini iklan untuk tampilan desktop -->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567890' data-ad-format='rectangle' data-ad-slot='1234567890' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<b:else/>
<!-- Ini iklan untuk tampilan AMP/mobile -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>
Sesuaikan data-ad-client
dan data-ad-slot
sesuai akun dan slot iklan.
Merubah Tampilan pada Non AMP
Biasanya untuk blog AMP menggunakan style AMP secara umum dengan kode seperti ini
<style amp-custom='amp-custom'>
/*<![CDATA[*/
CSS disini
/*]]>*/
</style>
Sobat bisa merubah tampilan pada halaman non AMP dengan penggunaan Tag Kondisional seperti ini
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<style>
/*<![CDATA[*/
CSS disini
/*]]>*/
</style>
</b:if>
Masih ada yang kurang? Silahkan ditambah di kolom komentar