Hi , kali ini saya akan sedikit share tentang AMP project :
(Accelerated Mobile Pages) adalah halaman web yang di desain khusus agar laman tersebut mobile friendly. Salah satu project dari google ini juga dapat memberi pengalaman bagi pengguna internet untuk kenyamanan dan kecepatan berselancar didunia maya
(Accelerated Mobile Pages) adalah halaman web yang di desain khusus agar laman tersebut mobile friendly. Salah satu project dari google ini juga dapat memberi pengalaman bagi pengguna internet untuk kenyamanan dan kecepatan berselancar didunia maya
Kenapa harus AMP ?
- Menurut penelitian oleh beberapa lembaga , website yang di load lebih dari 3 detik akan ditinggal oleh pengunjungnya . Dengan menerapkan AMP pada web tersebut , halaman akan memiliki peningkatan kecepatan akses yang signifikan jika di akses melalui Mobile
- Perangkat mobile merupakan perangkat utama pada saat ini yang digunakan untuk internet / browsing , website tidak hanya cukup Mobile Friendly tetapi harus memiliki kecepatan pada saat diakses
- Website yang menerapkan AMP lebih SEO Friendly , website yang mempunyai kecepatan akses lebih bagus , akan memiliki peluang rangking yang di bagus di mesin pencarian
Keuntungan menggunakan AMP :
- Loading website akan lebih cepat ketika di akses melalui mobile , meskipun dengan koneksi yang lambat
- Web yang menerapkan AMP berpeluang lebih tinggi dalam menduduki TOP Search di mesin pencarian Google
- AMP akan menyesuaikan tampilan di Mobile Device secara otomatis
- Penempatan iklan yang tidak menggangu pengunjung website
Markup yang wajib ada di file AMP :
- Dimulai dengan <!doctype html>
- berisi tag <html ⚡> atau <html amp>
- berisi tag <head> dan <body>
- berisi tag <link rel="canonical" href="$SOME_URL"> untuk mengarahkan ke versi html regular dari dokumen HTML AMP atau ke dirinya sendiri jika tidak ada versi HTML seperti itu
- meta tag <meta charset="utf-8">
- berisi tag <meta name="viewport" content="width=device-width,minimum-scale=1">
- <script async src="https://cdn.ampproject.org/v0.js"></script> untuk library AMP
- dan code amp boiler plate code : https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md
Perbedaan tag HTML biasa dengan AMP :
- <video> menjadi <amp-video>
- <audio> menjadi <amp-audio>
- <iframe> menjadi <amp-iframe>
- <img> menjadi <amp-img>
Setelah membaca sedikit penjelasan AMP di atas langsung saja kita memulai membuat halaman AMP :
Pertama kita siapkan web server local , saya menggunakan XAMPP
Kedua Copy script Template dibawah ini :
Terakhir save file tersebut dengan extention amp.html
Untuk mevalidasi apakah file yang kita buat sudah benar atau belum bisa di cek dari menambahkan #development=1 di url seperti ini jadinya http://localhost/amp/hello-word.amp.html#development=1
dibawah ini contoh file yang sudah berhasil divalidasi
Okey sekian dulu , selamat mencoba AMP Project semoga bisa jadi Alternatif Technology dimasa depan
Terima Kasih :)
Terakhir save file tersebut dengan extention amp.html
Untuk mevalidasi apakah file yang kita buat sudah benar atau belum bisa di cek dari menambahkan #development=1 di url seperti ini jadinya http://localhost/amp/hello-word.amp.html#development=1
dibawah ini contoh file yang sudah berhasil divalidasi
Terima Kasih :)
No comments:
Post a Comment