Bang Jonie ~ Proyek Google’s Accelerated Mobile Pages (AMP) telah diluncurkan dan sudah dapat dilihat di beberapa lokasi pengguna pada halaman hasil pencarian Google. Lalu apa itu AMP Google dan bagaimana cara kerja AMP Google ini? Berikut ulasannya.
Cara kerja AMP Google ini sendiri adalah mengurangi penggunaan HTML, CSS dan Javascript sehingga memungkinkan publisher dapat dengan mudah meningkatkan kecepatan loading halaman web di perangkat mobile.
Meskipun pengembang berpengalaman dapat membuat kinerja sebuah situs sama dengan yang dihasilkan AMP ini, namun AMP adalah sumber daya siap pakai yang memang khusus dibuat untuk kebutuhan tersebut.
Apa itu AMP Google ?
Pertengahan bulan Oktober 2015 lalu Google mengumumkan sebuah framework baru yang disebut Google AMP atau lebih tepatnya AMP HTML atau Accelerated Mobile Pages. AMP adalah sebuah framework yang dirancang khusus untuk memudahkan developer membuat sebuah halaman web yang dapat diakses dengan cepat diperangkat mobile.Cara kerja AMP Google ini sendiri adalah mengurangi penggunaan HTML, CSS dan Javascript sehingga memungkinkan publisher dapat dengan mudah meningkatkan kecepatan loading halaman web di perangkat mobile.
Meskipun pengembang berpengalaman dapat membuat kinerja sebuah situs sama dengan yang dihasilkan AMP ini, namun AMP adalah sumber daya siap pakai yang memang khusus dibuat untuk kebutuhan tersebut.
Cara Kerja AMP Google
Ada tiga hal penting yang harus dipahami untuk membuat web untuk AMP Google.
Seperti halnya gambar demikian juga untuk video, ada tag khusus yang harus digunakan jika Anda ingin mengembed video ke halaman web Anda yaitu amp-video. Khusus untuk video dari Youtube tag yang dgunakan adalah amp-youtube.
Ada juga dukungan untuk media slideshow melalui amp-carousel dan gambar lightboxes menggunakan amp-image-lightbox, seperti halnya yang digunakan media-media sosial Twitter, Instagram, Facebook, Pinterest dan Vine melalui komponen entend mereka sendiri.
Agar Google (dan teknologi lain yang mendukung Proyek AMP) dapat mendeteksi versi AMP dari artikel Anda, Anda harus memodifikasi versi asli dari halaman web Anda. Halaman artikel asli harus menyertakan tag berikut, pada dasarnya disebut link canonical back AMP:
Pada situs resminya di halaman AMP Discovery page juga menyebutkan bahwa beberapa platform yang mendukung AMP membutuhkan meta data Schema.org untuk menentukan jenis konten halaman. (Saat ini contoh halamannya dapat Anda lihat di GitHub.)
Selain itu, meta data Schema.org "merupakan syarat utama untuk membuat konten Anda layak tampil di Search Carousel Google." Jadi, jika Anda ingin mendapatkan manfaat di masa depan dari Google dengan menerapkan AMP, pastikan Anda mendapatkan skema yang tepat!
1. AMP HTML
Sebuah subset HTML, bahasa markup ini memiliki beberapa custom tags, properti dan terdapat banyak pembatasan-pembatasan didalamnya dibandingkan dengan HTML biasa. Jika Anda sudah familiar dengan HTML biasa tidak sulit untuk membuat halaman web dengan AMP HTML.2. AMP JS
Framework JavaScript untuk meningkatkan kinerja halaman web untuk perangkat mobile. Sebagian besar penggunaannya adalah dengan metode loading asynchronous. Perlu dicatat bahwa JavaScript dari pihak ketiga tidak dapat berjalan dengan AMP. Contoh penggunaannya dapat dilihat berikut ini:<script async src="https://cdn.ampproject.org/v0.js"></script>
3. AMP CDN
CDN (Content Delivery Network), akan mengambil halaman AMP Anda lalu menyimpannya dalam cache mereka dan secara otomatis meningkatkan optimasi beberapa kinerja web Anda.
Membuat Web Untuk AMP
AMP tidak membolehkan elemen Javascript dari pihak ketiga, kemungkinan penggunaan kolom komentar seperti Disqus, Facbook sudah tidak mungkin diimplementasikan lagi. (Mungkin bisa dilakukan dengan iframe). Kelihatannya memang harus menulis ulang template situs yang sudah ada.Multimedia
Untuk multimedia harus ditangani secara khusus. Misalnya, penggunaan komponen tag untuk gambar pada halaman web AMP berbeda dengan html biasa. Kalau di HTML biasa kita menggunakan img namun di AMP tag img sudah berubah menjadi amp-img. Selain itu jika Anda menggunakan gambar animasi sperti GIF Anda harus menggunakan komponen tag AMP yang lebih panjang amp-anim.Seperti halnya gambar demikian juga untuk video, ada tag khusus yang harus digunakan jika Anda ingin mengembed video ke halaman web Anda yaitu amp-video. Khusus untuk video dari Youtube tag yang dgunakan adalah amp-youtube.
Ada juga dukungan untuk media slideshow melalui amp-carousel dan gambar lightboxes menggunakan amp-image-lightbox, seperti halnya yang digunakan media-media sosial Twitter, Instagram, Facebook, Pinterest dan Vine melalui komponen entend mereka sendiri.
Agar Google (dan teknologi lain yang mendukung Proyek AMP) dapat mendeteksi versi AMP dari artikel Anda, Anda harus memodifikasi versi asli dari halaman web Anda. Halaman artikel asli harus menyertakan tag berikut, pada dasarnya disebut link canonical back AMP:
<link rel="amphtml" href="http://www.example.com/blog-post/amp/">
Pada situs resminya di halaman AMP Discovery page juga menyebutkan bahwa beberapa platform yang mendukung AMP membutuhkan meta data Schema.org untuk menentukan jenis konten halaman. (Saat ini contoh halamannya dapat Anda lihat di GitHub.)
Selain itu, meta data Schema.org "merupakan syarat utama untuk membuat konten Anda layak tampil di Search Carousel Google." Jadi, jika Anda ingin mendapatkan manfaat di masa depan dari Google dengan menerapkan AMP, pastikan Anda mendapatkan skema yang tepat!