Cara Membuat Halaman AMP Pada Blogger hanya di URL amp=1, Bisa Tampil 2 versi di Non AMP dan AMP
8 Mei 2021
Add Comment
Pada template AMP blogger atau blogspot yang sering kita temukan hanya mempunyai 1 versi AMP yaitu halaman AMP blogspot yang menampilkan di semua perangkat baik desktop, tablet dan ponsel.Sekarang kita dapat membuat halaman AMP secara terpisah dari halaman canonical denga memanfaatkan URL mobile amp=1 pada url blogger baik domain berbayar maupun gratis alias masih blogspot.
Dengan cara ini maka halaman blog atau website anda yang prafrom blogger bisa menampilkan menjadi 2 versi, yaitu AMP yang hanya ditampilkan pada prangkat mobile saja dan ketika website atau blog di akses menggunakan desktop, halaman sudah bukan AMP lagi.
Perlu kita ketahui, dua versi AMP yang akan kita buat ini, bisa dibuat ditampilkan di Non AMP dan di AMP. Jadi sangat wajib untuk kita coba.
Keuntungan membuat halaman AMP hanya pada parameter URL amp=1
- 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.
Cara Membuat Halaman AMP Pada Blogger Hanya Di URL amp=1 diperlukan template blogspot yang telah valid AMP dan seting tema selular pilih Tampilkan tema desktop di perangkat seluler. Selanjutnya lakukan sedikit perubahan untuk 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.
<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'/>
Langkah kedua.
Cari kode seperti dibawah ini.
<link expr:href='data:blog.url' rel='amphtml'/>
<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>
Apabila ada tag kondisional seperti ini di template blog kamu
<b:if cond='data:blog.isMobileRequest == "true"'>
Ganti dengan
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
Jika ada lebih dari 1, ganti semua. Lalu 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='HTML81' 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" }'>
<!-- 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.
Semoga artikel ini berguna untuk anda. Selamat mencoba.
0 Response to "Cara Membuat Halaman AMP Pada Blogger hanya di URL amp=1, Bisa Tampil 2 versi di Non AMP dan AMP"
Posting Komentar
Jangan melakukan SPAM... Aturan tidak ada link dan bicara kotor dalam komentar Sobat.