Batas Catatan - Template AMP - Blogger - Mengutip dari website kompiajaib.com 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.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>
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.
Baca Selengkapnya....
0 Response to "Membuat template AMP hanya ada di tampilan HP/Mobile m=1"
Post a Comment