Skip to main content

follow us

Cara Membuat Postingan Valid AMP

Pada dua minggu lalu saya memutuskan untuk migrasi dari responsif menuju AMP, hal tersebut dilakukan karena mengikuti anjuran google untuk mempercepat loading blog agar dengan mudah di akses terutama oleh smartphone

Seperti kita ketahui fitur AMP dapat mempercepat loading blog 10x kali lipat dibandingkan non amp. Awalnya saya menganggap amp sama seperti responsif kenyataan itu salah selain template yang harus sudah valid AMP HTML, ternyata postingan  juga harus mengikuti kaidah amp jika tidak maka akan terjadi error

Hal hasil saya harus mengedit satu persatu postingan sebelumnya agar support amp mulai dari mengganti kode gambar hingga membuang beberapa kode yang tidak diperbolehkan. Tentunya hal ini akan menjadi sebuah masalah baru apabila blog kita sudah banyak sekali postingan, namun berbeda dengan blog baru kita langsung bisa membuat postingan valid amp tanpa harus mengeditnya terlebih dahulu asalkan template yang digunakan sudah support amp

Maka dari itu disini saya akan coba membahas tentang tutorial cara membuat dan mengedit postingan supaya valid amp. Langkah pertama anda harus lakukan adalah dengan memperlajari terlebih dahulu kode - kode amp, baca disini AMP Project. Setelah mengetahui kode yang diperboleh di AMP, langkah selanjutnya yaitu mengedit dan mengatur gambar atau thumbanil supaya valid amp

 1. Gambar thumbanil

Untuk memunculkan gambar pada halaman pertama / homepage di AMP caranya sangat mudah, Anda tunggal memasukan kode dibawah ini pada saat akan melakukan posting

Spoiler:

<noscript><img width="1080" height="610" alt='gambar' src='url-gambar-anda'/></noscript>
 2. Memasukan gambar tambahan

Berbeda dengan thumbail gambar ini tidak akan muncul pada halaman / homepage blog anda, tetapi gambar ini hanya muncul didalam postingan saja. Oleh karena itu supaya gambar di dalam postingan valid amp anda tinggal memasukan kode ini bawah ini saja

Spoiler:

<amp-img src="url-image-disini" width="1080" height="610" layout="responsive" alt="AMP HTML"></amp-img>
Note : aturlah wight (lebar) dan heigt (tinggi), AMP HTML sesuai dengan selera pada gambar anda selain thumbanil, karena biasanya (thumbanil) mengikuti ukuran homepage anda


Mungkin hanya itu saja apabila ada kekurangan dan kelebihan harap di maklum. Jika kurang jelas atau kesulitan dalam memvalidisasi postingan agar amp anda bisa menghubungi saya langsung melalui via fb

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar