T2/26/2019

Cara Membuat Page Valid AMP di Postingan Blogger

Jurus Jitu Valid AMP Di Postingan Blogger 

Era sekarang adalah era maju dengan perkembangan AMP nya yaitu Accelerated mobile Pages dengan kecepatan penuh walau sinyal lemot alias 2g. Kita bisa mengaksesnya dengan mudah tanpa kendala. Apalagi secepat kilat gini. Beuh... setara 4g lah.

Untuk para blogger yang baru pindah ke era modern ini yaitu dengan fitur baru google yaitu AMP yang di kolaborasikan dengan AMP projects. 

Jadi bagaimana cara agar page postingan valid AMP ?
Mudah sekali. Seperti yang di jelaskan oleh AMP projects pada website resmi nya. Ada beberapa Tag html yang di ubah oleh mereka agar valid AMP.

Beberapa di antaranya :


Kode Yang Tidak Di Perbolehkan pada page AMP
1. imageanchor="1"
Letaknya pada postingan blog, kamu harus menghapus code ini karena amp-img tidak mendukung "imageanchor"

2. border="0" Border pada <amp-img> tidak akan terdeteksi, jadi agar valid kamu harus menghapus nya juga. Border="0" dianggap AMP tag sampah atau tidak berguna.
3. "style" pada inline html blogger
Jadi di dalam postingan "style" inline ini tetap valid AMP, tapi jika kamu memasangnya di dalam html blogger pada bagian tema > edit html, nah baru itu tidak diperbolehkan.

4. Tidak boleh ada atribut clear
Atribut clear ini tidak berpengaruh di AMP projects. Kalian bisa menggantinya dengan </br> 
Contoh yang salah <br clear="none"/>
Cotoh Yang Benar </br>


Penambahan Pada Tag HTML AMP Agar Lebih Rapih Dan valid
1. Pada Images <amp-img> 
tambahkan tag berikut :

layout="responsive" 

Fungsinya agar Gambar Dalam Posisi Tengah Dengan Width 100%


2. Memakai Noscript pada <img> postingan
Tadi Bilangnya jangan ada <img> ? ya lebih baik ganti <img> ke <amp-img> atau dalam lungkup <noscript>.tapi saya akan memakai dua duanya.

Akan saya jelaskan :

Fungsi dari <noscript> dan di dalamnya ada imgberufngsi agar pada thumnail homepage tidak tidak blank/kosong tapi jika <img> di dala lingkup noscript gambar postingan tidak muncul, maka dari itu kita pasang dua duanya saja

pasang pada bagian atas dengan mode html bukan compose 

<noscript><img width="1080" height="610" alt='gambar' src='urlgambar'/></noscript>

dan di bawah ode </noscript> pasang kode di bawah ini

<amp-img src="URLgambar" width="1080" height="610" layout="responsive" alt="AMP HTML" />

Note : 
- ganti urlgambar dengan url gambar mu
Guunakan Gambar Berektensi HTTPS jangan menggunakan HTTP

Untuk yan mengunakan iframe gamti iframe mu dengan amp-iframe
<amp-iframe width="200" height="100"    sandbox="allow-scripts allow-same-origin"    layout="responsive"   src="urliframe"></amp-iframe>

Note : Ganti urliframe ke urliframe mu.

Mungkin sekian dari saya, semoga bermanfaat pada blogger pecinta amp.

Show/Hide Comment

Muat Lebih Banyak
About Author

Menjadi Seorang Blogger Yang Berguna Untuk Orang Lain Dan Tetap Berbagi Ilmu Walau Hanya Sepotong Kata
Follow Me :
Related Article