Mengulas Accelerated Mobile Pages (AMP)


Laman ini adalah tampilan standar. Akses versi seluler cepat laman ini di: Mengulas Accelerated Mobile Pages (AMP) (untuk menghemat pemakaian data).

Akhir-akhir ini Accelerated Mobile Pages (AMP) sangat ramai diperbincangkan di kalangan pengembang dan pengelola situs web. Sebenarnya apa itu proyek Accelerated Mobile Pages (AMP)? Proyek halaman perangkat seluler cepat adalah proyek sumber terbuka (en: open source) bersama dari inisiatif perusahaan-perusahaan teknologi dan penerbit, untuk meningkatkan ekosistem konten perangkat seluler untuk semua orang; baik itu penerbit, pencipta, dan pengguna. Secara umum halaman AMP diharapkan untuk dapat terbuka dengan sangat cepat (instan), sehingga pengguna situs web dari perangkat seluler dapat menikmati konten dengan nyaman. [1]

Kelebihan dan Kekurangan AMP

Accelerated Mobile Pages bisa diibaratkan versi mini atau versi diet dari halaman HTML situs web. Halaman perangkat seluler cepat tidak mengijinkan beberapa tag html tertentu, membatasi ukuran dan teknik CSS tertentu, serta tidak mengijinkan sama sekali eksternal javascript (js), kecuali menggunakan library yang sudah disediakan. Akibatnya, pengembang situs web harus mengkode ulang website-nya untuk menggunakan tag html khusus AMP dan library javascript AMP (seperti adsense dan analytics). Ini merupakan trade-off antara kecepatan dan “keindahan” tampilan website, belum lagi waktu dan tenaga yang harus dikeluarkan. [2][3]

tampilan-halaman-perangkat-seluler-cepat

Tampilan halaman perangkat seluler cepat KuBisnis

Kabar baiknya, Google mendukung proyek ini dengan menyediakan cache untuk menyimpan versi halaman perangkat seluler cepat situs web anda. Sehingga, ketika ada pengguna yang memilih situs web dari halaman hasil pencarian google, halaman AMP anda akan langsung ditampilkan dari cache Google secepat kilat. Kecepatan ini tentunya akan meningkatkan kepuasan pengguna website anda. Untungnya, Google masih menampilkan iklan dari unit iklan anda, serta menambahkan rel=”canonical” pada cache tersebut. Ini akan menjamin pagerank akan meluncur ke halaman asli website anda.

Google juga akan menampilkan halaman AMP pada carousel di atas hasil pencarian reguler. Akan tetapi, sepertinya sementara ini hanya akan berlaku pada situs web yang berisi artikel berita saja. Kita masih harus mengunggu implementasi untuk jenis website yang lain, seperti blog dan e-commerce.

Pedoman Implementasi AMP

Google memaparkan lima tahap untuk membuat situs web yang ramah AMP, yaitu: [4]

  • Desain: membuat halaman yang menggunakan spesifikasi HTML AMP.
  • Dapat ditemukan: memasang tag tertentu untuk memberi tahu mesin telusur Google bahwa website memiliki versi AMP.
  • Validasi: menguji halaman HTML AMP valid.
  • Data terstruktur: memberi markup data terstruktur pada halaman situs web.
  • Status: memantau laporan AMP pada Search Console untuk menemukan kesalahan.

Pada dasarnya, kita harus mengubah kode HTML website kita menggunakan spesifikasi AMP HTML. Setelah itu pasang tag untuk memberi tahu mesin telusur, misalnya:

<!-- Pasang ini di halaman non-AMP untuk memberi tahu bahwa ada versi AMP -->
<link rel="amphtml" href="https://www.kubisnis.com/mengulas-accelerated-mobile-pages-amp/amp/" />
<!-- Pasang ini di halaman AMP untuk memberi tahu bahwa versi ini adalah versi AMP dari halaman di bawah -->
<link rel="canonical" href="https://www.kubisnis.com/mengulas-accelerated-mobile-pages-amp/" />

Sebenarnya kita tidak perlu me-redirect manual ke versi halaman perangkat seluler cepat, karena Google akan melakukan hal itu secara otomatis dari laman hasil penelusurannya. Tetapi, apabila kita menyukai versi AMP situs web tersebut, kita dapat juga melakukan redirect menggunakan htaccess atau metode yang lainnya. Ini untuk memastikan pengunjung yang langsung mengakses website maupun yang datang dari mesin telusur lain, juga menikmati versi halaman perangkat seluler cepat yang telah dengan susah payah dibuat.

Setelah itu pengembang yang menggunakan Chrome dapat melakukan validasi manual dengan menambahkan “#development=1” pada bagian belakang URL, misalnya:

like-fb-kubisnis

Apabila Anda menyukai artikel KuBisnis, bantu KuBisnis untuk tumbuh di www.facebook.com/KuBisnis/

 https://www.kubisnis.com/mengulas-accelerated-mobile-pages-amp/amp/#development=1

Kemudian, akses developer console dengan kode cepat CTRL + SHIFT + I. Apabila tidak menemukan masalah, maka versi AMP sudah siap untuk diluncurkan.

validasi-halaman-amp

Validasi halaman AMP

Untuk dapat tampil pada carousel mesin telusur, kita juga harus memiliki data terstruktur yang untuk schema.org/Article, schema.org/NewsArticle, atau schema.org/BlogPosting. Apabila semua sudah selesai diimplementasikan, inilah saatnya memeriksa apakah ada error pada halaman AMP atau tidak.

kesalahan-halaman-amp

Kesalahan halaman AMP

Pemasangan AMP pada WordPress

Untuk dapat memiliki versi halaman perangkat seluler cepat pada post WordPress, kita cukup menginstall plugin AMP dari Automattic. Plugin ini secara otomatis menyediakan versi AMP, walaupun masih terbatas pada pos blog saja. Plugin ini dapat mempermudah pengguna WordPress untuk menyelesaikan tahap desain dan tahap penemuan. Akan tetapi Plugin ini masih dalam tahap pengembangan, sehingga kita harus sedikit mengubah dan menambahkan beberapa filter (tergantung plugin apa yang sebelumnya ada pada WordPress kita).

Apabila WordPress menggunakan plugin Yoast SEO, maka install juga Glue for Yoast. Ini berguna untuk menambahkan metadata yang telah diatur pada halaman non-AMP yang menggunakan plugin Yoast SEO. [5] Setelah semua plugin dipasang, kemudian lakukan validasi seperti biasa untuk memeriksa apakah halaman AMP sudah valid.

Masalah Validasi Yang Mungkin Terjadi

Berikut ini adalah beberapa hal yang penulis ketahui dapat membuat validasi gagal, yaitu:

  • Cloudflare (server): Non aktifkan fitur Cloudflare yang dapat mengubah kode halaman situs web, seperti rocket loader dan aplikasi pihak ketiga (pada pengaturan server Cloudflare). Caranya cukup tambahkan “https://*.KuBisnis.com/*/amp/” -> Apps, Performance, Security: Off, pada “Page Rules.”
  • Cloudflare (plugin): Apabila kita mengaktifkan fitur SSL, plugin Cloudflare juga diketahui membuat validasi gagal karena menggunakan protokol URL relatif. Kita dapat menambahkan filter untuk mengubah “src=//” menjadi “src=https://”
  • W3 Total Cache: Plugin ini akan memodifikasi halaman AMP kita. Non-aktifkan minify pada halaman AMP dengan mengisikan “.*/amp/” pada kolom “Never minify the following pages.”

Pengujian Halaman Perangkat Seluler Cepat (AMP)

pengujian-amp-gtmetrix

Pengujian AMP dengan GTMetrix (kiri non-AMP, kanan AMP)

pengujian-amp-pingdom

Pengujian AMP dengan Pingdom (atas non-AMP, bawah AMP)

Mari kita coba menguji halaman perangkat seluler cepat dengan dua situs pengujian yang umum digunakan, yaitu GTMetrix dan pingdom. Terlihat bahwa halaman AMP tentu saja lebih cepat karena 70% lebih kecil daripada halaman non-AMP. Akan tetapi pengujian ini hanyalah sebagai gambaran saja, karena memang tujuan AMP bukan hanya untuk meningkatkan kecepatan situs web dari sisi server kita saja. AMP akan lebih bermanfaat nantinya ketika pengguna menggunakan cache dari Google. Apabila anda bertujuan untuk meningkatkan skor pada kedua situs di atas, AMP bukanlah solusi yang tepat.

Kesimpulan dan Saran

Secara umum penulis menyukai tampilan bersih dan cepat dari halaman AMP. Tidak dipungkiri bahwa hal ini akan jauh memperbaiki pengalaman pengguna situs KuBisnis apabila mengakses situs ini menggunakan perangkat seluler. Karena itu situs web ini mengalihkan halaman non-AMP ke halaman AMP secara default (apabila versi AMP-nya tersedia). Sayangnya tidak semua fitur dapat diimplementasikan dengan baik, bahkan halaman perangkat seluler cepat situs ini tidak memiliki menu (belum ada ide menu akan diletakkan di posisi mana).

Pemilik situs web yang tidak terbiasa koding sayangnya harus menunggu plugin AMP berfungsi sempurna atau menunggu platform yang digunakan mengimplementasikan AMP. Anda tidak perlu khawatir karena proyek ini masih dalam tahap pengembangan. Google pun terkenal pernah mengabaikan proyeknya, misalnya Google+ authorship. Sehingga, tidak menjadi jaminan nantinya AMP akan dapat bertahan dalam perkembangan teknologi ke depan.

Lain halnya dengan penggunaan SSL, versi AMP tidak mendapatkan penambahan nilai dalam search engine results page (SERP). Oleh karenanya, implementasi ini tidak cocok digunakan untuk search engine optimization (SEO) website. Implementasi ini lebih bertujuan untuk meningkatkan kenyamanan pengguna situs Anda pada perangkat seluler.

Referensi
  1. “What Is AMP?,” Accelerated Mobile Pages Project, https://www.ampproject.org/docs/get_started/about-amp.html (accessed March 3, 2016).
  2. Critchlow, W., 2015, “What You Need to Know About Accelerated Mobile Pages (AMPs) – Whiteboard Friday,” SEOmoz, Inc., https://moz.com/blog/accelerated-mobile-pages-whiteboard-friday (accessed March 3, 2016).
  3. Shapiro, P., 2016, “How To Get Started With Accelerated Mobile Pages (AMP),” Search Engine Land, http://searchengineland.com/get-started-accelerated-mobile-pages-amp-240688 (accessed March 3, 2016).
  4. “Pedoman Google Penelusuran untuk laman AMP,” Google, https://support.google.com/webmasters/answer/6340290?hl=id (accessed March 3, 2016).
  5. de Valk, J., 2016, “Setting up WordPress for AMP: Accelerated Mobile Pages,” Yoast BV., https://yoast.com/setting-up-wordpress-for-amp-accelerated-mobile-pages/ (accessed March 3, 2016).

Kutip artikel ini:
Kontributor KuBisnis, 2016, "Mengulas Accelerated Mobile Pages (AMP)," Artikel KuBisnis, https://www.kubisnis.com/mengulas-accelerated-mobile-pages-amp/ (diakses pada 24 Sep 2018).

Artikel Terkait:

Artikel ini bukan yang Anda butuhkan?
Anda dapat mengisi komentar di bawah untuk memberitahu kami topik atau judul artikel yang Anda inginkan.
Anda juga bisa mengirimkan komentar pada KuBisnis di akun fb/twitter/google kami di @KuBisnis.
Topik dengan voting komentar terbanyak akan mendapatkan prioritas dibuatkan artikel.

Tinggalkan sebuah komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Kode Verifikasi * Time limit is exhausted. Please reload CAPTCHA.