Cara buat blog AMP jadi valid AMP hanya di versi mobile (HP)

Cara buat blog AMP jadi valid AMP hanya di versi mobile (HP)

AMP (Accelerated Mobile Pages) merupakan halaman situs yang dipercepat untuk versi mobile. Setiap situs yang dibuka pada versi mobile akan mendapatkan tambahan ?m=1 di belakang URLnya. Seperti pesan yang dipasang di bawah header situs ini bahwa situs ini dalam upaya pemindahan versi blog ke versi AMP. Jika suatu saat kamu tidak melihat pesan tersebut berarti situs ini sudah selesai dalam proses pemindahan ke versi AMP.

Cara buat template blog AMP jadi valid AMP hanya di versi mobile (HP)

Supervba merupakan situs lama. Kamu bisa lihat di bagian footer / paling bawah, bahwa situs ini sudah mulai rilis pada tahun 2015. Situs ini sudah memiliki artikel hingga ratusan. Dalam upaya pemindahan versi blog supaya valid AMP butuh waktu cukup lama. Ini karena setiap halaman harus dibuat Valid AMP.

Saat artikel ini dipublish pun proses pemindahan blog supaya valid AMP belum selesai. Pada awalnya, ane menggunakan template AMP supaya proses memvalidasi AMP bisa lebih cepat. Tentu saja pilih template AMP yang sudah Valid. Bagaimana mengetahui template AMP sudah valid AMP?. Kamu harus menginstal ekstensi Google Chrome bernama AMP Validator.


Baca jugaPasang iklan Adsense di Blog Valid AMP



Cara kerja AMP Validator

AMP Validator dapat diperoleh di toko Google Chrome. Setelah terpasang kamu akan melihat ikonnya di sudut kanan browser. Ekstensi AMP Validator akan bekerja atau aktif saat kamu membuka situs yang menggunakan template AMP.

Untuk mengecek suatu template AMP valid AMP atau tidak maka buka saja halaman download template AMP. Kalau kamu berada pada halaman download, biasanya ada tombol Demo sama Download bukan. Sebelum Download kamu Lihat Demonya dulu. Begitu halaman Demo template AMP itu terbuka maka ekstensi AMP Validator akan langsung mengecek apakah template AMP itu Valid AMP atau belum. Silahkan jelajahi setiap halaman template AMP itu untuk mengetahui tingkat validnya.



Template AMP yang sudah valid akan membuat ektensi AMP Validator berwarna hijau dan memberi pesan "Valid AMP". Sebaliknya, AMP validator berwarna merah jika template Invalid AMP.

Cara buat blog AMP jadi valid AMP hanya di versi mobile (HP)

Sebagian besar blog yang menggunakan template AMP saat ini adalah valid AMP di versi Desktop dan Mobile, sebuat saja Full AMP. Kekurangan dari template Full AMP adalah keterbatasan jenis iklan adsense yang bisa digunakan. Jelas bisa merugikan penayang adsense. Seperti yang saya alami, iklan jenis Infeed ads, inarticle ads, dan matched content tidak bisa diterapkan di template Full AMP.


Baca jugaUlang Tahun Google Adsense Ke 15, Selamat!



Saya bersyukur karena ada master Kompiajaib yang merilis artikel mengenai Membuat AMP Pada Blogger Hanya Di URL Mobile m=1. Dengan cara ini kamu bisa menampilkan blog AMP yang valid AMP hanya di HP. Template AMP pun tidak berperilaku full AMP sehingga semua jenis iklan adsense bisa diterapkan. Sehingga selain situs dipercepat juga penayang adsense tidak dirugikan secara pendapatan.

Contoh situs yang sudah menerapkan template versi AMP  hanya di perangkat mobile tentunya Kompiajaib dan Jalantikus. Kamu bisa melihat ekstensi AMP Validator berwarna Biru.

Cara buat template blogger AMP jadi valid AMP hanya di versi mobile (HP)

Kalau kamu penasaran, kamu bisa lihat contohnya di pojok kanan situs ini dimana ikon AMP Validator berwarna biru. Yah, tentunya kalau kamu sudah pasang ekstensi AMP Validator pada Google Chrome kamu. Kalau kamu tertarik mencobanya, berikut cara mengubah template Blog menjadi Valid AMP hanya di versi Mobile (HP).

Saran:
Sebaiknya kamu pasang dulu ekstensi AMP Validator di Google Chrome untuk pengecekan otomatis tingkat validitas AMP blog.

1. Pastikan kamu menggunakan template AMP.
Blog AMP kamu tidak harus valid AMP. Kalau blog AMP kamu sudah valid tentu lebih bagus. Contoh seperti situs ini yang walaupun belum valid AMP tapi sudah bisa diterapkan tutorial ini.

2. Cari kode berikut.

<HTML amp='amp' lang='en'> atau <HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'>
.
Letaknya di atas kode </head> atau &lt;head&gt;. Kemudian ganti dengan kode berikut

<HTML expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>

3. Cari kode berikut.

<link expr:href='data:blog.url' rel='canonical'/>

Ganti dengan berikut.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + &quot;?m=1&quot;' rel='amphtml'/>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<link expr:href='data:blog.url' rel='canonical'/>
</b:if>

4. Simpan tema.

Dan selesai......


Baca jugaCara Cepat Buat Sticky Widget di Sidebar Blog Paling Bawah


Sekarang blog kamu tidak Full AMP tapi jadi blog AMP yang Valid AMP hanya di versi Mobile. Mulai saat ini kalau kami buka situs kamu di versi dekstop maka kamu akan melihat ekstensi AMP Validator berwarna biru. Perlu diketahui, kamu cukup klik ikon AMP Validator warna biru untuk berpindah langsung ke versi mobile. AMP Validator pun akan berubah warna jadi merah atau hijau tergantung tingkat validitas AMP blog sobat..

Mulai sekarang kamu bisa menampilkan semua jenis iklan adsense yang kamu butuhkan. Untuk tampilan desktop blog digunakan kode iklan Adsense biasa. Sedangkan untuk iklan tampilan AMP tentunya menggunakan amp-ad.

Terakhir, paling penting kamu harus pastikan bahwa robots.txt tidak memblok URL m=1.


Untuk berikutnya saya akan melanjutkan mengenai cara pasang iklan adsensenya ya.

Akhirnya itulah cara buat blog AMP jadi valid AMP hanya di versi mobile (HP). Semoga bermanfaat. Terima kasih.

Kode HTML Sumber : Kompiajaib

Hai..Terima kasih sudah membaca artikel Supervba. Masih banyak artikel menarik lainnya. Selamat menjelajah di Supervba. Jangan lupa subscribe/berlangganan, terima kasih.

×

Share this:

Reaksi:
Related Posts

Mr. VBA(id)

Author & Editor

Terima kasih sudah berkunjung. SuperVBA sangat bangga bisa menjadi bagian dari ceritamu hari ini.

Show Disqus Comment Hide comment

Disqus Comments

We are very glad that you are here

About Cookies:This website use cookies to ensure you get the best experiences i our website.