Ditulis oleh: Ditulis pada: 3/14/2018
Membuat halaman AMP itu bisa dilakukan dengan 2 cara, yaitu: membuat hanya 1 versi AMP yang tampil di semua perangkat baik desktop, tablet, maupun ponsel, dan yang kedua adalah membuat halaman AMP yang terpisah dari halaman canonical.Salah satu contoh 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 pada Blogger juga kita bisa membuat halaman AMP yang terpisah dari halaman canonical dengan memanfaatkan URL mobile
m=1 pada URL Blogger. Dengan cara ini maka AMP hanya akan tampil pada perangkat mobile saja.Dengan membuat AMP pada Blogger dengan hanya menampilkan AMP hanya pada URL mobile
m=1 ini maka ikon AMP validator di ekstensi browser pada tampilan desktop dan tablet akan berwarna biru dengan ikon link seperti pada blog-blog Wordpress yang menggunakan plugin AMP.Ikon AMP validator di ekstensi browser pada tampilan desktop dan tablet yang berwarna biru dengan ikon link ini menunjukan halaman yang sedang dilihat bukan halaman AMP namun halamannya menunjukan bahwa halaman AMP untuk halaman tersebut tersedia. Dengan mengklik ikon biru tersebut maka pengunjung akan dialihkan ke halaman AMP.
Maka jika pada Blogger kita membuat halaman AMP hanya pada URL mobile
m=1 maka ketika pengunjung mengklik ikon biru ekstensi AMP validator pada tampilan desktop, maka pengunjung akan dialihkan ke URL m=1 sebagai halaman AMP.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 beberapa perubahan kecil untuk membuat AMP hanya pada URL mobile m=1.1. Langkah Pertama
Silahkan cari kode berikut ini atau kode yang mirip seperti berikut ini
<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'>
Kemudian silahkan ganti dengan kode di bawah ini
<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>
2. Langkah Kedua
Silahkan cari kode berikut ini atau kode yang mirip seperti berikut ini
<link expr:href='data:blog.url' rel='canonical'/>
Kemudian silahkan ganti dengan kode di bawah ini
<b:if cond='data:blog.isMobileRequest == "false"'>
<link expr:href='data:blog.canonicalUrl' 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.canonicalUrl' rel='canonical'/>
</b:if>
Setelah ini silahkan simpan perubahan pada templatenya. Dengan 2 langkah tadi kita sudah membuat halaman AMP hanya tampil pada URL mobile
m=1 saja.
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.
Dan untuk masalah postingan, meskipun kita sudah melakukan perubahan tadi tetapi kita tetap membuat postingan dengan format AMP seperti sebelumnya.
Yang kemudian perlu kita lakukan adalah mengoptimalkan iklan Adsense. Kita akan membuat iklan Adsense terpisah menjadi iklan tampilan desktop dan iklan tampilan AMP/mobile.
Untuk iklan tampilan desktop maka yang digunakan adalah kode iklan Adsense biasa dan untuk iklan tampilan AMP menggunakan
amp-ad.
Yang pertama dilakukan adalah memisahkan js ad, silahkan cari kode js berikut.
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
Silahkan hapus kode tersebut kemudian silahkan simpan kode berikut 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 Anda.
Kemudian silahkan rubah semua slot iklan menjadi seperti berikut.
<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>
Silahkan sesuaikan kode
data-ad-client dan data-ad-slot nya sesuai dengan kode iklan Anda.
Dan pastikan
robots.txt blog Anda tidak memblok URL m=1. Selesai... selamat mencoba.