Cara Memadukan Template AMP dan Non AMP

Daftar isi [Tampil]

Terinspirasi dari Kang Ismet akhirnya saya mencoba memadukan template AMP dan Non AMP jika kalian berkunjung ke blog kang ismet maka akan melihat perpaduan antara dua template yaitu AMP dan Non AMP. 

Sebenarnya template yang dipakai oleh kang ismet ini adalah template Median UI AMP karya Jagodesain akan tetapi template tersebut sudah modifikasi. 

Saya coba otak atik template tersebut akhir nya bisa menjadi beberapa mode yaitu versi AMP dan Non AMP. Sebetulnya template ini hanya satu aja akan tetapi parameternya ada 3, yaitu tanpa m=1, menggunakan ?m=1 dan ?amp=1.

Apa itu AMP HTML? 

Pada artikel sebelumnya saya pernah menjelaskan mengenai AMP HTML agar lebih jelasnya kalian bisa langsung aja lihat artikel saya Apa Itu AMP? Mengenal AMP HTML. Template tersebut berbeda dari non AMP yang dimana ada beberapa aturan khusus pada template AMP yang dimana sudah tidak bisa ubah, mulai dari Optimasi Artikel menggunakan tag tertentu sampai Optimasi Google Adsense.


Cara Membuat Blog Menjadi AMP HTML

Agar bisa parameter =amp1 tentu template yang harus digunakan harus sudah valid AMP HTML, kalau blog sudah valid AMP maka saat di cek pada tool valid AMP tentu akan ada bulatan yang bewarna hijau, apabila diakses di mobile maka akan tanda petir pada saat di cari. 


Cara Membuat Template Valid AMP HTML


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'/>
Selanjutnya Hapus kode diatas, kemudian ganti dengan kode di bawah ini (sengaja saya tambahkan rel='alternate' untuk penjelasannya silahkan baca disini) 
<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 diingat, ketika membuat artikel tetap harus dengan metode pada AMP seperti pada gambar, iframe dll.

Optimasi Iklan Adsense

Pada blog Kompiajaib sudah dijlaskan kalau kita sudah mengubah parameter amp=1 maka jenis iklan yang dipakai tersebut ada 2 yaitu untuk AMP dan Non AMP. Jika diakses menggunakan dasktop sebaiknya menggunakan iklan jenis biasa dan untuk Mobile nya menggunakan versi AMP caranya dengan menghapus kode amp-ad,  maka seperti ini kode iklan nya

<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>
Jangan lupa data-ad-client dan data-ad-slot sesuai akun dan slot iklan milik anda.

Edit CSS Tampilan pada Non AMP

AMP sendiri memiliki style khusus yang berbeda dengan Non AMP, style tersebut bisa dilihat dibawah 

<style amp-custom='amp-custom'>
/*<![CDATA[*/

 CSS disini
 
/*]]>*/
</style>
Agar bisa dirubah menjadi Non AMP maka bisa menggunakan 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>

Apa disini masih ada yang kurang, langsung aja tanya di kolom komentar. Terimakasih 

Sudar