Pada template amp blogspot yang sering kita temukan hanya mempunyai 1 versi Amp yaitu halaman AMP blogspot tampil di semua perangkat baik desktop, tablet, maupun ponsel.
Sekarang kita dapat membuat halaman AMP secara terpisah dari halaman canonical dengan memanfaatkan URL mobile amp=1 pada URL Blogger. Dengan cara ini maka halaman blog menjadi 2 versi, yaitu versi AMP yang hanya akan tampil pada perangkat mobile saja dan ketika blog di akses menggunakan desktop, halaman sudah bukan AMP lagi.
Lihat gambar dibawah hasil pengujian validasi halaman AMP
Keuntungan membuat halaman AMP hanya pada parameter URL amp=1
Langkah pertama.
Masuk akun Blogger pilih Menu - Tema kemudian klik Edit HTML.
Jika sudah silahkan cari kode di bawah ini.
jika sudah ketemu, ganti kode di atas dengan kode di bawah ini.
Langkah kedua.
Cari kode seperti dibawah ini.
Kemudian ganti dengan kode ini.
Apabila ada tag kondisional seperti ini template blog Anda
ganti dengan
Simpan Tema
Silahkan cek halaman blog dengan pengujian validasi amp.
Jika ingin menampilkan sesuatu/widget yang bukan untuk halaman AMP atau yang ingin hanya tampil di halaman AMP, gunakan tag kondisional berikut
Tag kondisional untuk AMP
Tag kondisional untuk NON AMP
Contoh memasang widget HANYA di halaman posting dan di tampilan AMP
<b:widget id='HTML122' locked='false' title='' type='HTML' version='1'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
* Perhatikan kode yang diwarna
Meskipun kita sudah membuat halaman AMP hanya tampil pada URL amp=1 saja, 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.
Selamat mencoba.
Sekarang kita dapat membuat halaman AMP secara terpisah dari halaman canonical dengan memanfaatkan URL mobile amp=1 pada URL Blogger. Dengan cara ini maka halaman blog menjadi 2 versi, yaitu versi AMP yang hanya akan tampil pada perangkat mobile saja dan ketika blog di akses menggunakan desktop, halaman sudah bukan AMP lagi.
Lihat gambar dibawah hasil pengujian validasi halaman AMP
 |
 |
- Dapat memasukkan script pada halaman non amp (Tampilan Dekstop) dengan menambah tag kondisional amp.
- Dapat memasukkan script adsense in-article pada halaman non amp.
- Tampilan halaman dengan paramater m=1 tetap seperti halaman dekstop, sehingga kode script yang berjalan dihalaman dekstop masih dapat tampil di halaman mobile m=1
Langkah pertama.
Masuk akun Blogger pilih Menu - Tema kemudian klik Edit HTML.
Jika sudah silahkan cari kode di bawah ini.
<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'>
jika sudah ketemu, ganti kode di atas dengan kode di bawah ini.
<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='amp' value='amp'/>
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='amp' value='amp'/>
Langkah kedua.
Cari kode seperti dibawah ini.
<link expr:href='data:blog.url' rel='amphtml'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url' rel='canonical'/>
Kemudian ganti dengan kode ini.
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<link expr:href='data:blog.canonicalUrl + "?m=1"' rel='alternate'/>
<link expr:href='data:blog.canonicalUrl + "?amp=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
</b:if>
<link expr:href='data:blog.canonicalUrl + "?m=1"' rel='alternate'/>
<link expr:href='data:blog.canonicalUrl + "?amp=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
</b:if>
Apabila ada tag kondisional seperti ini template blog Anda
<b:if cond='data:blog.isMobileRequest == "true"'>
ganti dengan
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
Simpan Tema
Silahkan cek halaman blog dengan pengujian validasi amp.
Jika ingin menampilkan sesuatu/widget yang bukan untuk halaman AMP atau yang ingin hanya tampil di halaman AMP, gunakan tag kondisional berikut
Tag kondisional untuk AMP
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
Tag kondisional untuk NON AMP
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
Contoh memasang widget HANYA di halaman posting dan di tampilan AMP
<b:widget id='HTML122' locked='false' title='' type='HTML' version='1'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if></b:if>
</b:includable>
</b:widget>
* Perhatikan kode yang diwarna
merah
Meskipun kita sudah membuat halaman AMP hanya tampil pada URL amp=1 saja, 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.
Selamat mencoba.
Advertisement
