Membuat Blog Menjadi Dua Tampilan - AMP dan Non AMP HTML

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 dan ditandai tulisan AMP Available, Has access to this site.

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: &quot;1&quot; }' 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: &quot;1&quot; }'>
  <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 + &quot;?m=1&quot;' rel='alternate'/>
  <link expr:href='data:view.url params { amp: &quot;1&quot; }' 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

Perlu diperhatikan, ketika membuat postingan tetap dengan metode pada AMP seperti pada gambar, iframe dll.

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.

Untuk iklan yang muncul di desktop, gunakan iklan adsense biasa, sedangkan pada halaman AMP menggunakan amp-ad

Untuk caranya, pertama hapus kode JS amp-ad seperti dibawah ini

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel and data:view.url == data:view.url params { amp: &quot;1&quot; }'>
<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 {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery and not data:blog.searchLabel and data:view.url == data:view.url params { amp: &quot;1&quot; }'>
<!-- 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: &quot;1&quot; }'>
  <style>
  /*<![CDATA[*/
  
  CSS disini
  
  /*]]>*/
  </style>
</b:if>

Masih ada yang kurang? Silahkan ditambah di kolom komentar