Cara Membuat Halaman AMP Pada Blogger Hanya Di URL Mobile m=1
Cara Membuat Halaman AMP Pada Blogger Hanya Di URL Mobile m=1 - Kalau kita mengguanakan blog AMP, kita bisa membuat halaman AMP dengan 2 cara, yaitu membuat halaman AMP dengan 1 versi yang akan tampil di semua perangkat baik desktop, tablet, maupun ponsel, dan yang kedua kita bisa membuat halaman AMP secara terpisah dari halaman canonical.
Contohnya membuat hanya 1 versi AMP yang tampil di semua perangkat, yaitu seperti yang sering kita temui pada template-template Blogger AMP atau pada template-template Blogger AMP yang sekarang kita gunakan.
Namun, sekarang pada Blogger juga kita sudah bisa membuat halaman AMP yang terpisah dari halaman canonical dengan memanfaatkan URL mobile m=1 pada URL Blogger. Dengan cara ini maka halaman AMP hanya akan tampil pada perangkat mobile saja. Jadi ketika blog di aksese menggunakan desktop, halaman sudah bukan AMP lagi.
Baca juga — Membuat URL Parameter ?amp=1 Kusus Untuk Halaman AMP
Nah, jika Anda ingin mencobanya, mari kita ikuti caranya berikut ini. Untuk membuat halaman AMP pada Blogger hanya pada URL mobile m=1 ini, yang kita perlukan yaitu blog yang tentunya sudah valid AMP. Kemudian kita akan melakukan sedikit perubahan untuk membuat halaman AMP hanya pada URL mobile m=1.
Cara Membuat Halaman AMP Pada Blogger Hanya Di URL Mobile m=1
1. Yang Pertama
Silahkan cari kode seperti ini atau kode yang mirip seperti dibawah ini
<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'>Jika sudah ketemu, silahkan ganti dengan kode dibawah ini
<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>2. Yang Kedua
Silahkan cari kode berikut ini atau kode yang mirip seperti berikut ini
<link expr:href='data:blog.url' rel='canonical'/>Kemudian ganti dengan kode berikut ini
<b:if cond='data:blog.isMobileRequest == "false"'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + "?m=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>Kemudian, klik Simpan Tema.
Nah, dengan 2 langkah tadi kita sudah bisa membuat halaman AMP hanya tampil pada URL mobile m=1 saja. Namun belum selasai, masih di editor HTML.
Walaupun kita sudah membuat halaman AMP hanya tampil pada URL mobile m=1 saja, tapi di sini kita tidak perlu melakukan perubahan pada layout yang sebelumnya pada template blog karena element-element AMP tetap akan bekerja pada tampilan desktop meskipun kini sudah bukan menjadi halaman AMP lagi.
Dan untuk membuat postingan, meskipun kita sudah melakukan perubahan tadi tetapi kita tetap harus membuat postingan dengan format AMP seperti sebelumnya.
Kemudian yang harus kita lakukan adalah mengoptimalkan iklan Adsense. Kita juga akan membuat iklan Adsense secara terpisah menjadi iklan tampilan desktop dan iklan tampilan AMP kusus di mobile.
Untuk kode iklan tampilan desktop maka yang harus digunakan adalah kode iklan Adsense biasa, dan kode untuk iklan tampilan AMP menggunakan amp-ad.
Yang pertama dilakukan adalah memisahkan js amp-ad, silahkan cari kode js seperti berikut.
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>Jika sudah ketemu, hapus kode tersebut kemudian ganti dengan kode dibawah ini, dan simpan di atas kode </head> atau </head><!--<head/>-->
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "true" 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 {"static_page","error_page"} and data:blog.isMobileRequest == "false" 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-1234567890",
enable_page_level_ads: true
});
//]]>
</script>
</b:if>Silahkan sesuaikan kode google_ad_client sesuai akun Adsense Anda.
Selanjutnya rubah semua slot iklan menjadi seperti dibawah ini.
<b:if cond='data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<!-- 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:if>
<b:if cond='data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<!-- 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 sesuaikan juga kode data-ad-client dan data-ad-slot nya sesuai dengan kode iklan Anda.
Klik simpan Tema. Selesai...
Menambahkan parameter pada url menggunakan kode ? – contoh: https://warim.blogspot.com/?amp=1.
Lalu untuk menambahkan dua parameter, setipa parameter dipisahkan dengan kode & – contoh: https://warim.blogspot.com/?amp=1&m=1. Begitu juga parameter ketiga dan seterusnya harus di pisah dengan kode &.
Komentar