WordPress

Cara Setup AMP WordPress yang Benar

Cara Setup AMP WordPress yang Benar

Berdasarkan hasil riset Google, lebih dari 50% query pencarian di seluruh dunia dilakukan melalui perangkat mobile. Karena itulah, kecepatan loading situs WordPress Anda harus diprioritaskan. Untuk mengelola kecepatan situs, Anda bisa memanfaatkan tool Google Accelerated Mobile Pages (AMP).

Di artikel ini, kami akan membahas tentang cara menggunakan AMP WordPress dalam dua metode:

  1. Menggunakan WordPress AMP plugin.
  2. Melalui plugin AMP for WP – Accelerated Mobile Pages.

Selain cara penggunaan, kami juga akan membahas apa itu AMP WordPress dan metode validasinya setelah proses setup selesai.

Pengertian AMP WordPress (Dan Keunggulannya)

Beranda Utama Google AMP WordPress

Google AMP adalah open-source library yang bisa Anda gunakan unuk membuat versi halaman website yang lebih cepat dan mulus di perangkat mobile. AMP mudah digunakan dan bisa diinstall di platform dan framework yang sudah terkelola dengan baik. Di samping itu, Google AMP juga sepenuhnya kompatibel dengan WordPress.

Singkatnya, Google AMP memungkinkan Anda untuk membuat salinan situs menggunakan AMP HTML. Proses penyalinan ini menyingkirkan sebagian besar elemen yang menyebabkan loading website menjadi lebih lambat (JavaScript, script pihak ketiga, dan lain-lain). Setelah itu, Google akan mempersempit situs sehingga waktu loading menjadi semakin cepat. Hasilnya seperti ini:

Contoh Website AMP

Google AMP memiliki kelebihan dan kekurangannya. Berikut beberapa kelebihannya:

  • Memperbaiki SEO (Search Engine Optimization). Kelebihan utama dari Google AMP adalah kecepatan boostingnya. Karena kecepatan halaman adalah faktor terpenting yang berkaitan dengan peringkat situs di Search Engine Results Pages (SERPs), maka hal ini tentu saja memengaruhi tampilan website Anda di mesin pencari. Adanya Google AMP juga akan membuat halaman situs Anda muncul di Google News carousel, yang diprioritaskan untuk tampil sebagai hasil pencarian teratas melalui perangkat mobile (dan juga meningkatkan SEO).
  • Memberikan pengalaman terbaik bagi user. Diperkirakan 33% rencana penjualan gagal karena website tidak dioptimalkan untuk tampilan perangkat mobile. Bahkan studi lebih lanjut menemukan bahwa 57% pengguna internet tidak mau bekerja sama dengan website bisnis yang memiliki tampilan mobile kurang bagus. Dengan Google AMP, Anda bisa lebih mudah membuat halaman web versi mobile yang user-friendly.
  • Memperbaiki performa server. Google AMP memanfaatkan beberapa fitur key optimasi Google. AMP tersebut mengurangi penggunaan bandwidth terhadap gambar sebanyak 50% (tanpa memengaruhi kualitas gambar) dan meningkatkan rendering di sisi server. Dengan mempersingkat waktu loading di server, AMP mampu meningkatkan performa situs.

Berikut kekurangan Google AMP:

  • Batasan Cascading Style Sheets (CSS) dan JavaScript. Meskipun Google AMP bisa meningkatkan kecepatan loading website, tool ini bisa mengakibatkan hilangnya elemen branding. AMP menghapus grafis yang high-definition, animasi yang rumit, dan elemen mencolok lainnya yang menggunakan CSS dan JavaScript.
  • Hanya menampilkan halaman yang di-cache. Nyatanya, sebagian kecepatan yang ada di Google AMP memungkinkan Google untuk menampilkan versi cache dari halaman web Anda. Karena itulah, user tidak punya akses untuk membuka versi terbaru dari konten Anda.
  • Pendapatan iklan dibatasi. Meskipun Google AMP memperbolehkan adanya iklan di situs, proses mengaktifkan iklannya sendiri cukup sulit. Selain itu, Google AMP membatasi platform ad eksternal.

Seandainya kekurangan Google AMP membuat Anda ragu untuk memakainya, mungkin Anda bisa memilih alternatifnya, yakni mengaktifkan desain web yang responsif. Akan tetapi, jika Anda mencari cara tercepat dan termudah untuk mengubah tampilan dan fungsi website menjadi lebih baik di perangkat mobile, maka Google AMP layak untuk diperhitungkan.

Selanjutnya, kami akan membahas dua cara untuk setup AMP WordPress, tentu saja dengan bantuan plugin Accelerated Mbile Pages WordPress.

Cara Setup AMP WordPress Menggunakan 2 Plugin Ini

Untuk mengaktifkan AMP WordPress, Anda membutuhkan plugin. Sebelum melangkah ke proses selanjutnya, kami sarankan Anda untuk membuat backup situs terlebih dulu.

Opsi 1: Gunakan Plugin AMP for WordPress

Plugin AMP for WordPress

Plugin AMP for WordPress merupakan tool yang tepat untuk setup AMP WordPress secara cepat dan mudah. Meskipun versi defaultnya tidak menawarkan fitur dalam jumlah yang banyak untuk kustomisasi AMP di situs, Anda bisa menginstall plugin tambahan. Soal hal ini, akan kami bahas di bagian berikutnya. Namun untuk saat ini, kami hanya akan membahas cara setup plugin AMP for WordPress.

Buka Plugins > Add New di dashboard WordPress. Ketikkan AMP for WordPress di kolom pencarian, dan cari plugin AMP for WordPress. Setelah itu, install dan aktifkan plugin tersebut:

Install dan aktifkan plugin AMP for WordPress

Buka tab baru Appearance > AMP di dashboard. Anda kemudian akan diarahkan ke halaman AMP customizer. Pilih tab Design:

Tab design di WordPress Customizer

Di halaman ini, Anda bisa mengelola tampilan AMP WordPress serta meninjau ulang perubahan yang dilakukan sebelum mengaktifkannya di situs. Anda bisa mengatur teks situs, link, dan warna background. Di samping itu, Anda juga bisa memilih apakah Anda ingin atau tidak menerapkan skema warna gelap (misalnya hitam atau putih) di situs. Jika sudah yakin dengan perubahan yang dilakukan, klik Publish di atas layar.

Anda juga bisa mengatur apakah Anda ingin menampilkan postingan, halaman, atau dua-duanya atau tidak di AMP WordPress. Masuk ke dashboard WordPress dan pilih AMP > General:

Halaman Pengaturan Umum Plugin AMP for WordPress

Beri tanda centang pada box yang ada di bawah Post Type Supper untuk memasukkan berbagai opsi yang ingin Anda tampilkan di AMP WordPress. Setelah itu, klik Save Changes.

Di sana Anda bisa lihat bahwa tidak banyak pilihan kustomisasi yang ditawarkan. Untungnya, ada beberapa WordPress AMP plugin yang bisa Anda gunakan, misalnya Glue for Yoast SEO & AMP untuk mengintegrasikan plugin Yoast SEO ke setup AMP.

Buka Plugins > Add New, kemudian install dan aktifkan plugin Yoast SEO:

Plugin Yoast SEO di WordPress

Lakukan hal yang sama untuk plugin Glue for Yoast SEO & AMP. Setelah itu, buka SEO > AMP melalui dashboard. Putuskan apakah Anda ingin mengaktifkan AMP di postingan dan media atau tidak:

Aktifkan AMP untuk postingan dan media

Klik Save Changes. Anda juga bisa mengonfigurasikan pengaturan tambahan di tab Design. Di tab tersebut, buat ikon untuk situs AMP WordPress Anda, atur skema warna, dan tambahkan custom CSS:

Tab Design Plugin Glue for Yoast SEO & AMP

Jangan lupa untuk menyimpan setiap perubahan yang Anda lakukan setelah mengonfigurasikan situs.

AMP for WordPress merupakan WordPress AMP plugin terbaik jika Anda ingin menambahkan fungsionalitas dasar AMP ke situs. Akan tetapi, jika Anda menginginkan kontrol lebih terhadap tampilan situs AMP WordPress (dan juga untuk mengembangkan fungsionalitasnya), maka plugin Accelerated Mobile Pages milik kami bisa memenuhi kebutuhan Anda.

Opsi 2: Install Plugin AMP for WP – Accelerated Mobile Pages

Plugin AMP for WP - Accelerated Mobile Pages

Jika Anda membutuhkan software antarmuka yang mudah bagi pemula untuk mengonfigurasikan halaman di situs, maka WordPress AMP plugin ini bisa berintegrasi dengan tool tambahan lainnya. Tool ini termasuk WooCommerce (plugin e-commerce terpopuler untuk WordPress), Alexa metrics, OneSignal push button notifications, dan masih banyak lagi.

Untuk menggunakan WordPress AMP plugin ini, langkah pertama yang harus Anda lakukan adalah masuk ke dashboard dan pilih Plugins > Add New. Cari AMP for WP, kemudian install dan unduh plugin tersebut:

Halaman plugin AMP for WP - Accelerated Mobile Pages

Buka tab AMP baru di dashboard WordPress. Anda akan lihat drop-down menu dengan bagian untuk Settings, Design, Extensions, dan lain-lain. Berikut tampilan opsi Settings:

Halaman pengaturan plugin AMP for WP Options

Jika masih bingung, Anda bisa membaca panduan Getting Started di halaman ini. Diharapkan setelah membaca panduan ini, Anda bisa mengonfigurasikan setup AMP WordPress. Setelah itu, aktifkan berbagai opsi di AMP for WP, seperti:

  • SEO: Termasuk pengaturan meta description, integrasi dengan plugin SEO, dan lain-lain.
  • Performa: Terdapat pengaturan tersendiri untuk mengaktifkan dan menonaktifkan toggling file minificationMinification bisa menaikkan kecepatan loading website Anda.
  • Analytics: Di sini Anda bisa mengatur integrasi dengan Google Tag Manager sebagaimana opsi analytics.
  • Komentar: Opsi ini memungkinkan Anda untuk menyertakan atau tidak menyertakan komentar WordPress, Disqus, dan/atau Facebook di AMP WordPress.
  • Pengaturan tingkat lanjut: Di sini Anda bisa memasukan custom HTML untuk headers dan footer, setup mobile direction, serta mengaktifkan dan menonaktifkan retina images.

Klik Save Changes untuk masing-masing pengaturan di atas segera setelah Anda selesai melakukan konfigurasi. Pilih tab Design:

Opsi Tema AMP for WP

Di sinilah biasanya Anda dapat mengkustomisasi tampilan situs AMP WordPress. Pilih tema AMP yang dedicated dari berbagai tema yang terdaftar di drop-down menu Theme Selector.

Setelah memilih tema yang diinginkan, kelola tampilannya sesuai keinginan Anda. Skema warna dan tipografi, opsi tampilan header dan footer, opsi sidebar beranda utama, dan lainnya berada di pengaturan desain (yang dimuat di tab Global). Sementara itu di bagian Social, Anda bisa memilih media sosial mana saja untuk menampilkan situs AMP WordPress.

Jika sudah yakin dengan setiap perubahan serta pengaturan yang dilakukan, klik opsi simpan. Untuk pratinjau situs AMP WordPress, buka Appearance > AMP:

Preview tampilan AMP WordPress

Versi gratis AMP for WP menawarkan berbagai fitur. Namun, untuk mendapatkan tampilan dan fitur yang lebih baik, Anda bisa mengupgradenya ke layanan premium. Di layanan premium ini, Anda bisa menerapkan star rating (opsi ini sangatlah tepat untuk review atau penjualan produk atau profil real-estate), berintegrasi dengan AMP WooCommerce Pro, menggunakan custom post types, dan lain-lain:

Halaman ekstensi di AMP for WP

Anda harus membayar untuk mendapatkan tema AMP premium. Untuk melihat opsi ini, buka kembali Design > Themes melalui dashboard. Ada banyak opsi tersedia untuk tipe-tipe website tertentu, seperti situs berita, majalah online, dan masih banyak lagi. Selain itu, juga ada beberapa tema multiguna:

Halaman tema premium AMP for WP

Jika menginginkan lebih banyak fitur premium, pilih Pro plans. Layanan ini menyediakan berbagai paket yang bisa Anda pilih, mulai dari paket Personal (untuk satu situs mulai dari $149 per tahun) sampai ke paket Agency (untuk situs unlimited seharga $499 per tahun).

Cara Validasi Situs AMP WordPress

Setelah mengaktifkan salah satu WordPress AMP plugin, langkah selanjutnya adalah memvalidasi AMP WordPress, memastikannya bisa diakses, dan terhubung ke platform yang mendukung. Validasi juga merupakan cara yang praktis untuk mendeteksi error AMP.

Cara termudah dan tercepat untuk memvalidasi AMP adalah dengan menggunakan tool developer browser. Buka halaman AMP di browser (sebagai contoh, kami menggunakan Google Chrome). Setelah itu, tambahkan ini di akhir URL halaman:

#development=1

Buka console tool developer browser. Untuk Google Chrome, toolnya adalah Chrome DevTools console. Jika error terdeteksi, maka akan ditandai dengan warna merah. Anda juga akan melihat analisa penyebab error tersebut.

Ummnya, error validasi disebabkan oleh prefix yang tidak valid, format dan entry kode yang salah, dan/atau tag yang tidak diperlukan. Di sebagian besar kasus, opsi untuk mengatasi error ini akan ditampilkan dan bisa Anda baca. Pun Google AMP membuat daftar cara untuk mengatasi error validasi yang sering terjadi jika opso auto-fix tidak ada.

Metode validasi AMP lainnya yang juga efektif adalah dengan menggunakan ekstensi AMP Validator untuk Google Chrome dan Opera:

Ekstensi AMP Validator untuk Google Chrome

Tool ini menampilkan overlay error yang simpel (ikon berwarna merah) dan juga penyebabnya. Di samping itu, jika Anda mengaktifkan AMP validator di halaman non-AMP, maka ikon ekstensi berwarna biru akan muncul dan menghubungkan Anda ke versi AMP dari halaman tersebut. Fitur ini menyediakan elemen untuk menilai performa tema sehingga tampilan AMP WordPress Anda terhindar dari error.

Kesimpulan

Meskipun waktu loading website lebih lama beberapa detik, tetap saja hal ini memengaruhi peringkat situs Anda di mesin pencarian (dan juga peringkat konversi). Karena itulah, Anda harus mengetahui cara menggunakan Google AMP untuk meningkatkan kecepatan loading situs jika dibuka di perangkat mobile. Terlebih lagi, konfigurasi dan kustomisas plugin AMP for WordPress sangatlah mudah, sama seperti ketika Anda menggunakan plugin Accelerated Mobile Pages WordPress.

Apakah Anda punya pertanyaan terkait setup salah satu WordPress AMP plugin? Beri tahu kami melalui kolom komentar di bawah ini!

Tambah Komentar

Klik di sini untuk menulis komentar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Gabung bersama ratusan ribu pelanggan di seluruh dunia

dan dapatkan tutorial baru langsung di email Anda

Please wait...

Abone olduğunuz için teşekkürler!

Dapatkan harga hemat!

Web Hosting Gratis Domain mulai dari

Rp.10.275
/bln