Cara Membuat Halaman AMP Hanya di Versi Mobile m=1 - InformasiAjib

Cara Membuat Halaman AMP Hanya di Versi Mobile m=1

Saat ini template-template AMP sangat dibutuhkan bagi beberapa blogger yang lebih mengutamakan kecepatan loading yang tinggi untuk menjaring banyak pengunjung yang menggunakan perangkat mobile. Kebanyakan template yang beredar saat ini yang bisa dibeli di beberapa blogger kenamaan indonesia itu memiliki halaman AMP yang akan aktif jika di akses menggunakan 2 perangkat baik Desktop dan juga Mobile.


Sebenarnya para blogger juga bisa membuat halaman AMP menjadi terpisah alias untuk versi mobile saja m=1. Maksudnya AMP akan aktif jika diakses menggunakan perangkat Mobile saja. Bagi blog-blog yang sudah menerapkan AMP hanya pada versi mobile saja akan bisa ditandai dengan icon berwarna biru pada extensi AMP browser Chrome.

Jika icon biru tersebut di klik maka akan secara otomatis berpindah ke halaman AMP mobile. bagi para blogger yang menggunakan Platform Wordpress tentu akan sangat mudah mengaktifkan ini karena bisa menggunakan Plugin yang tersedia. Akan tetapi bagi para pengguna Platform Blogger harus melakukan beberapa perubahan didalam tema blognya secara manual yang artinya kita harus memasang dan mengeditnya sendiri.

Untuk membuat halaman AMP hanya tampil pada versi Mobile saja dan terpisah dengan halaman canonical maka hal pertama yang harus dipastikan bahwa blog harus sudah dalam keadaan Valid AMP terlebih dahulu. Selanjutnya kalian Ikuti dan simak Tutorial singkat dibawah ini dengan seksama.

Cara membuat AMP hanya di versi mobile saja m=1

Tahap Pertama :
  • Cari kode seperti dibawah ini pada tema blog kalian
<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'>
  • Ganti kode tersebut menggunakan kode dibawah ini
<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>

 Tahap kedua :
  • Cari kode seperti dibawah ini 
<link expr:href='data:blog.url' rel='canonical'/>
  •  Ganti dengan kode berikut ini
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + &quot;?m=1&quot;' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>
Sampai disini, kita sudah berhasil membuat halaman AMP di versi mobile saja. Dan langkah selanjutnya kita hanya perlu melakukan optimisasi pada iklan Google Adsense. Kode iklan untuk tampilan desktop kita tetap menggunakan kode iklan aslinya. Dan untuk iklan versi Mobile AMP kita menggunakan versi AMP yaitu amp-ad.

Tahap Ketiga :
  • Cari dan kemudian hapus kode dibawah ini
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
  •  Lalu pastekan kode dibawah ini di atas  </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'><script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/></b:if><b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'><script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/><script>//<![CDATA[     (adsbygoogle = window.adsbygoogle || []).push({          google_ad_client: "ca-pub-88347453737564",          enable_page_level_ads: true     });//]]></script></b:if>
  •  Untuk tulisan berwarna kuning kalian ganti dan sesuaikan dengan milik kalian.
  • Terakhir kalian ganti semua kode slot iklan Google menjadi seperti dibawah ini :
<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and not data:blog.searchQuery'>
<!-- Ini iklan untuk tampilan desktop -->
<ins class='adsbygoogle' data-ad-client='ca-pub-131313131313' data-ad-format='rectangle' data-ad-slot='112233445566' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and not data:blog.searchQuery'>
<!-- Ini iklan untuk tampilan AMP/mobile -->
<amp-ad data-ad-client='ca-pub-13131313131313' data-ad-slot='112233445566' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
  <div overflow=''/>
</amp-ad>
</b:if>
  •  Tulisan berwarna kuning kalian sesuaikan dengan milik masing-masing.
  • Selesai.
Show Comments

0 Response to "Cara Membuat Halaman AMP Hanya di Versi Mobile m=1"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel