Cara Membuat Website AMP

Cara Membuat Website AMP , Kini saatnya Anda mempercepat website Anda dengan menerapkan teknologi AMP. Teknologi AMP atau Accelerated Mobile Pages adalah salah satu teknologi yang dikembangkan untuk pengguna mobile agar dapat membuka sebuah website tak hanya cepat tapi juga instan.

AMP ini pertama kali dikenalkan oleh Google sebagai framework open source yang dapat membuat seorang publisher website dapat meningkatkan kecepatan dan user experience pengunjung.

Memanfaatkan teknologi AMP menurut Google dapat mempercepat webise Anda 4 detik lebih cepat.Menarik sekali bukan?

Teknologi AMP sendiri terdiri dari tiga yaitu AMP Website, AMP Storeis, AMP Ads, dan AMP Email.

Kali ini kami akan mengulas bagilmana cara menerapkan teknologi AMP di website Anda.

Teknologi dibalik Google AMP.

Sebelum masuk memulai dan mengetahui cara membuat website AMP, Anda perlu mengetahhui teknologi apa yang ada di balik Google AMP itu sendiri.

Secara umum dan ringkas Google AMP berfungsi untuk membuat loading lebih cepat bagi pengguna mobile. Untuk menerapkan teknologi ini sebenarnya teknologi yang digunakan bukan yang sangat canggih atau sulit. Google mennggunakan AMP HTML dan AMP JS yang merupakan turunan dari HTML dan JS.

Artinya memang halaman dengan teknologi AMP sebenarnya hanya halaman HTML biasa dengan beberapa tambahan dan set khusus.

Oleh karena itu, ketika Anda ingin membangun sebuah halaman website AMP, Anda tidak perlu mempelajari bahasa pemrograman baru. Cukup HTML dan JS. Selain itu Anda juga perlu memahami tentang CDN.

Secara umum teknologi yang digunakan untuk membangun AMP ini terbagi menjadi 3 bagian yaitu:

AMP HTML

Merupakan bagian dari bahasa pemrograman HTML biasa (Hyper Text Markup Languege) namun dengan beberapa tags dan propeties yang dibatasi dan di costume sedemikian rupa. Jika Anda sudah familiar dengan HTMl pasti tidak kesulitan ketika akan mengembangkan website AMP.

Aturan yang harus diterapkan dalam AMP HTML adalah:

Harus dimulai dengan <!doctype htm> lalu disusul dengan top-level tag <html ⚡> atau <html amp> sebagai identifikasi bahwa konten tersebut menerapkan AMP.
Memiliki <head> dan <body> tags
Memiliki <meta charset=”utf-8”> tag sebagai anak pertama setelah tag <head>
Memiliki tag <script async src=https://cdn.ampproject.org/v0.js></script> diantara tag <head> untuk memasukan dan memuat library AMP JS
Memiliki tag <link rel=”canonical” href=”$SOME_URL”) di dalam tag <head>
Memiliki tag <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>untuk membuat halaman AMP yang responsive
Memiliki AMP bilerplate code untuk menyembunyikan kontek sampai AMP JS selesai di muat.

AMP JS: merupakan framework Java Script untuk halaman mobile. Sebagian besar AMP JS ini mengatur handling resource dan loading secara asynchronous. Jika Anda sudah terbiasa dengan pemrograman Java Scrips, mempelajari AMP JS ini juga tidak akan mengalami kesulitan yang berarti. Yang perlu diingat, third party Javascrip tidak dapat digunakan ketika membangun website AMP.
AMP CDN: adalah Optimal Content Delivery Network yang membuat Page dengan AMP tersimpan di cache sehingga meningkatkan performa kecepatan dari website. CDN sendiri adalah kumpulan server global di berbagai data center tersebar di selluruh dunia untuk mengirimkan konten dari server ke website. CDN meningkatkan kecepatan data dengan mengrimkan dari server terdekat dari pengunjung.

Ketika Anda sudah memiliki website dan ingin menerapkan teknologi AMP ini, ada beberapa cara yang bisa di laukan.

Bagi pengguna CMS wordpress Anda dapat memanfaatkan plugin yang ada untuk otomatis membuat website wordpress memiliki teknologi Amp.

Nah untuk selain CMS sebelum memulai menambahkan teknologi ini, sebaiknya Anda tetap mengelola setidaknya dua versi page, satu page yang mobile frendly biasa, satu lagi untuk yang versi AMP.

Berikut cara mengimplementasikan AMP dan membuat website Anda memiliki teknologi AMP

Buat Halaman Template AMP

Sebelum melihat detail tentang membuat template ini, sebaiknya Anda mempelajari dokumentasi AMP untuk informasi lebih lengkap tentang bahasa pemrograman yang digunakan.

Untuk tahap dasar pertama adalah dengan membaut sebuah halaman template untuk AMP. Untuk membuat template ini Anda dapat menggunakan banyak template yang sudah tersedia atau bisa melakukan programming dari awal. Selain itu Anda juga dapat menkonversi halaman HTML website biasa Anda menjadi format AMP. Dokumentasi untuk konversi dan pilihan-pilihan template bisa di cek di website AMP’s Quickstart guide link https://www.ampproject.org/docs/getting_started/quickstart#

Hal penting yang perlu diperhatikan saat membangun halaman template AMP adalah:

Pastikan semua simple.
Ketika membuat halaman template untu AMP pastikan sesuai dengan kode spesifikiasi AMP
Saat menggunakan CSS, masukan sebanyak-banyaknya tag <amp*> costum untuk membuat layout Anda terlihat cantik.
Tetap tambahkan navigasi di website AMP
Jangan lupa untuk validasi halaman AMP aja, sebab jika ada satu error atau peringatan saja bisa jadi halaman AMP Anda tidak bisa diakses dengan baik.
Validasi adalah satu step paling penting dalam mmembangun sebuah halaman AMP.

Test halaman AMP Anda

Jika sudah membuat halaman AMP, tahapan testing menjadi salah satu hal yang sangat krusial. Sebab dari testing ini Anda bisa mengetahui keberhasilan menyajikan halaman AMP, apakah sudah sesuai keinginan atau belum.

Anda dapat menggunakan tool pengujuan AMP di link berikut: https://search.google.com/test/amp

Gunakan Markup data terstruktur baik untuk halaman AMP Anda dan halaman website Anda
Pastikan file robots.txt yang Anda miliki di server tidak memblokir halaman AMP

Cara membuat halaman AMP di CMS

Sistem Pengelolan Konten/ CMS saat ini bisa diubah menjadi situs yang memiliki teknologi AMP sehingga lebih cepat dan instan. Anda bisa menerapkan AMP di CMS seperti WordPress maupun Joomla. Cara untuk menyesuaikannya bisa dengan menggunakan plugin, atau dengan menyesuaikan file HTML.

Namun pastikan file HTML AMP Anda sesuai dengan skema URL situs Anda dan selalu buat markup data yang terstruktur.

Berlatih untuk membuat halaman AMP

Anda dapat terus meningkatkan kemampuan membuat website AMP dengan berlatih menggunakan Codelab yang dibangun Google. Anda dapat mempelajari cara membangun halaman Amp secara detail dan lengkap dengan membuka link berikut https://codelabs.developers.google.com/codelabs/accelerated-mobile-pages-foundations/#0

Jangan lupa untuk pelajari bagaimana menambahkan video, integrasi dengan sosial media, gambar carousel, dan analisis dengan mengikuti tutorial di halaman codelabs di atas.

Itulah cara bagaimana menerapkan teknologi AMP di website Anda. Menerapkan teknologi AMP pada website Anda dapat memberikan banyak keuntungan dan nilai lebih terutama bagi pengunjung. Sebab kecepatan dan tawaran keinstanan yang diberikan memang sangat menarik orang.

Namun penting untuk Anda memperhatikan bahwa harus benar-benar teliti dan hati-hati ketika mengkonversi website yang sudah ada dengan teknologi AMP, jangan sampai kesalahan kecil membuat website Anda rusak tidak dapat diakses. Semoga bermanfaat.

Teknologi dibalik Google AMP.

AMP HTML