Tutorial Wordpress, website & toko online

Pengertian AMP Google dan Cara Memasangnya pada WordPress

Cara pasang amp google pada wordpress menggunakan 2 plugin

AMP (Accelerated Mobile Page) adalah “project” yang saat ini gencar dikampanyekan google. Proyek ini bertujuan agar halaman website mobile friendly. Sebenarnya proyek google ini merupakan jawaban, solusi untuk memberi kemudahan pengguna internet yang memakai perangkat mobile. Orang cenderung tidak memiliki waktu yang banyak jika browsing internet menggunakan hp, mereka menginginkan jawaban instan (website berkecepatan tinggi) akan pemecahan masalahnya.

Bagi anda yang mempercayakan cms wordpress sebagai framework website milik anda sangat diuntungkan jika dihadapkan pada pembaharuan. WordPress mempunyai “power community”, memudahkan anda untuk selalu mengikuti perkembangan “teknologi” khususnya website. Hanya butuh 1 plugin dan 30 menit saja untuk menjadikan website anda support AMP google (akan dijelaskan tutorialnya). Lain halnya jika menggunakan opensource cms lain terlebih membuat website dari awal, sudah pasti membutuhkan usaha, waktu, biaya tambahan serta keahlian untuk melakukan ini.

Tampilan AMP hanya akan terlihat jika pengunjung menggunakan perangkat seluler (mobile) ketika mengakses website anda.

AMP vs Mobile Responsive dan Adactive – Pemikiran Google Seperti Apa?

Pasti akan banyak muncul pertanyaan seperti ini, “tampilan saya sudah responsive juga adactive jika di buka menggunakan hp, apakah itu tidak cukup?”. Jawaban dari pertanyaan itu “tidak cukup”, memang benar website anda sudah mendukung perangkat mobile dengan baik. Bagaimana dengan kerumitan, ukuran dan kecepatannya? Bukankah anda menginginkan reputasi, posisi yang baik di mata google? Jika google mendeklarasikan sesuatu apa yang menurutnya baik, seharusnya anda yang berusaha mengambil hatinya segera mematuhinya. Mereka mengeluarkan “statement” AMP tidak berpengaruh signifikan terhadap pencarian. Apakah itu statement yang “sesungguhnya” atau hanya membuat agar tidak terjadi “kerusuhan”? mungkin saja  mereka ingin konversi secara perlahan dari pemilik website dan web developer beralih ke AMP, karena project ini pun masih dalam pengembangan, yang terjadi kedepannya, WHO KNOW?

Pengguna internet yang menggunakan perangkat mobile (hp) terus meningkat mencapai perbandingan di kisaran 60% – 70%, sedangkan sisanya menggunakan perangkat lain PC, laptop, tab dsb. AMP diciptakan atas dasar permintaan pasar, google selalu berusaha memahami keinginan pasar. Adalah suatu hal yang wajar sebagai “market leader” terus mempertahankan posisinya dengan inovasi (this is marketing rule), karena jika tidak “bing” sebagai “chalanger” siap mengambil alih. Penelitian pemasaran mereka ada di pengaruh kecepatan loading website terhadap tingkat bounching rate (pentalan) pengunjung, semakin cepat loading suatu website maka semakin betah pengunjung berlama2. Walaupun tidak berpengaruh signifikan terhadap SEO, hanya 0,1% pengaruh nya saja sangat berarti jika dihadapkan pada persaingan yang teramat ketat.

Haruskah Saya Menggunakan Amp Untuk Website Saya?

Sebelum anda memutuskan untuk memasang AMP pada website wordpress anda, sebaiknya memahami sekilas mengenai kelebihan dan kekurangan project akselerasi kecepatan website pada perangkat seluler ini:

Kelebihan AMP

Kelebihan AMP secara umum sangat ramah bagi pengunjung yang datang dari perangkat mobile :

  • Pastinya website anda akan bertambah cepat hingga bisa saja mencapai 4x lipatnya.
  • Ukuran website berkurang hingga mencapai 10x lipatnya.
  • Lebih diprioritaskan google di hasil pencarian, khususnya pencarian lewat hp.
  • “Search Impression” penayangan iklan berbayar akan meningkat (google adword misalnya)
  • Kesederhanaan tampilan mempermudah pengunjung untuk memahami isi konten website.

Kekurangan AMP

AMP memiliki kekurangan pada tampilan serta belum lengkapnya fasilitas pendukungnya dikarenakan masih dalam proses pengembangan.

  • Fungsi-fungsi website banyak yang menjadi tidak berjalan diantaranya disebabkan kurangnya dukungan stylesheet dan javascript external.
  • Sistim iklan yang terpasang di website akan berubah (anda diharuskan mengatur kembali periklanan website anda di setingan AMP)

Fleksibilitas, AMP dapat diatur untuk terpasang di semua konten website atau halaman, post, media tertentu saja. Dengan demikian jika ada halaman yang fungsinya belum didukung AMP maka anda tidak perlu memasangkannya di halaman tersebut, anda bisa memasangnya di halaman lain (misal blog dan artikel).

Langkah dan Tahapan Memasang Amp Pada WordPress Anda

Untuk memasang Projek Mobile Friendly ini anda diwajibkan menggunakan plugin ini, Plugin AMP for WP untuk pengaturan fungsi dan tampilannya. Anda juga dapat menambahkan pluginnya jika menggunakan Yoast SEO dengan plugin Pendukung YOAST, juga menambahkan pendukung woocommerce jika menggunakan plugin woocommerce. Semua yang anda butuhkan bisa didapatkan di wordpress.org,  hanya 1 plugin saja yang wajib di pasang dan sudah saya sebutkan, sedangkan sisanya terserah anda.

  1. Pastikan semua baik tema maupun plugin sudah anda perbaharui ke versi terbaru untuk menghindari hal-hal yang tidak diinginkan.
  2. Setelah plugin (AMP for WP) diaktifkan silahkan anda masuk ke pengaturannya pada tab dashboard AMP>>>getting started.
  3. Lakukan tahapan-tahapan yang saya jelaskan disertai gambar di bawah ini.

Tahap 1 tab general / pengaturan umum

Untuk pengaturan logo silahkan atur suka2 sesuai selera anda, namun ada 2 pengaturan pada tab general yang anda harus perhatikan.

  1. AMP on Page => Merupakan penentuan “default” apakah semua halaman, baik itu page dan pos otomatis menampilkan versi AMP atau tidak. pilihannya ada dua dan sangat tergantung anda. Jika semua dan sebagian halaman2 dari website anda putuskan utk menggunakan AMP maka klik on, jika hanya sedikit saja klik off. Jangan lupa save change permalink jika melakukan perubahan pada pengaturan ini (Pengaturan >>> Permalink).
  2. Individual AMP Page => sebaiknya setting “show by default”, setiap meta box pada halaman pengaturan akan sama dengan defaultnya. Ini adalah option apakah halaman atau pos “show” atau “hide” menampilkan atau tidak AMP. Pengaturannya ada di pengaturan masing2 halaman dan post biasanya di atas featured image letaknya

Tahap 2 Home Page / Beranda

Pada tab pengaturan home page menentukan apakah halaman beranda anda menampilkan versi AMP atau tidak.

  1. Apakah AMP tampil di halaman beranda atau tidak?
  2. Jika tidak, akan menggunakan halaman blog (archive) posting2 anda, jika ya akan menampilkan halaman lain khusus untuk beranda AMP.
  3. Halaman mana yang akan di tampilkan sebagai beranda AMP.

Ada kalanya halaman tampil baik di tampilan sebenarnya, tapi kurang enak pada tampilan akselerasi mobile AMP, kemudahan mengenai masalah ini anda bisa menuju ke setiap pengaturan halaman, disana sudah disediakan meta box / kolom pembuatan konten yang khusus akan ditampilkan jika halaman tersebut anda putuskan mendukung AMP.

Tahap 3 Design / Tampilan

Tahap pengaturan tampilan memungkinan anda mengatur visual dari website

  1. Menampilkan preview / edit secara langsung mirip edit tampilan tema (tidak usah terlalu fokus disini, fokuslah ke pengaturan di bawahnya).
  2. Pilihan tempelate design yang akan anda pilih, pemilihan ini menentukan pilihan2 dibawahnya. Untuk website thidiweb memilih design tempelate no 3.
  3. Warna dari button / tombol serta anchor link.
  4. Warna background website anda.
  5. Jika ya berarti menampilkan slider di halaman beranda (hanya bekerja jika halaman beranda anda blog / archive).
  6. Maksimal 4 gambar featured dari kategori post terbaru anda yang ditentukan akan ditampilkan di slider.
  7. Jika website anda memasang sertifikasi SSL maka boleh anda nyalakan, jika tidak jangan dinyalakan untuk saat ini karena struktur AMP anda akan terdeteksi error oleh google.
  8. Ikon telepon di header.
  9. Masukan nomor telepon yang tersambung jika ikon telepon di klik pengunjung.
  10. Warna dari ikon telepon.
  11. Menampilkan atau tidak “powred by AMP” di footer.
  12. Menampilkan foto author / penulis artikel pada halaman.

Tahap 4 Single Post & Page

Tahap pengaturan yang menentukan apa saja tampil pada halaman dan post

  1. Sticky berisi tombol berbagi ke berbagai sosmed yang bisa digunakan pengunjung untuk membagikan post, page serta konten anda ke berbagai sosial media yang mereka miliki.
  2. Link menuju posting sebelumnya dan berikutnya
  3. Menentukan related post (post terkait) diambil dari kategori atau tag.
  4. Menentukan jumlah post terkait yang akan ditampilkan.

Tahap 5 Pengaturan Sosial Media

Tahapan ke 5 terdiri dari dua bagian yaitu pengaturan berbagi dan pengaturan akun sosial media milik anda yang terhubung ke website.

Sosial Media Share

Tidak ada yang istimewa pada bagian ini, hanya saja anda perlu memfokuskan ke pengaturan facebook. Saat ini pengaturan facebook masih memerlukan pengaturan manual dengan memasukan ID yang dibutuhkan. Id facebook tersebut didapatkan dengan mengikuti register app ID facebook, langkah-langkah nya bisa anda ikuti disini. Jika pusing lewat dulu saja, lanjut ke pengaturan selanjutnya.

Integrasi Sosial Media yang Anda Miliki

Pada bagian ini tidak ada yang istimewa juga, anda hanya perlu memasukan alamat url sosial media yang ingin anda integrasikan dengan website.

Tahap 6 Pengaturan Struktur Data

Tahap ini anda diharuskan mengatur struktur dari tampilan

  1. Masukan logo website anda
  2. Masukan gambar yang akan ditampilkan jika suatu posting, halaman misalnya tidak mempunyai gambar fitur
  3. Tentukan ukuran gambar pada posting dan halaman (jika tidak ingin ambil pusing sudah biarkan saja setting defaultnya).

Tahap 7 Pengaturan Diskusi dan Komentar

Diskusi dan komentar pengunjung sebenarnya anda perlukan, setidaknya sarana komunikasi antara anda dan pembaca tulisan yang anda buat. Popularitas konten pun setidaknya terlihat dari hal ini.

  1. Jika anda tidak mengaktifkannya maka ketika pengunjung mengklik tombol komentar akan dialihkan ke halaman mobile friendly.
  2. Setting saja default nya menggunakan url https://xyz.disqus.com
  3. Jika website anda tidak memiliki sertifikasi SSL maka sebaiknya nyalakan saja.

Tahap 8 Pengaturan Lanjutan (Advance)

Tahap pengaturan lanjutan adalah tahap terakhir dari tutorial pengaturan agar AMP anda layak terpasang.

  1. Jika tidak di “on” kan maka halaman arsip blog menampilkan halaman website responsive, bukan AMP.
  2. Secara otomatis akan mengalihkan setiap pengunjung yang menggunakan perangkat hp, jika tidak dinyalakan halaman AMP akan muncul hanya jika pengunjung datang dari hasil pencarian google.
  3. Mengadakan atau menghilangkan “link to Non-AMP” ke halaman versi responsive website.

Pengaturan Lainnya Yang Tidak Disebutkan

Pengaturan lainnya sebenarnya tidak kalah pentingnya, sebaiknya anda pelajari keseluruhan setting jika mempunyai waktu luang. Pengaturan seperti Analystic untuk mengintegrasikan dengan google analystic, Advertisement untuk mengatur segala sesuatu tentang iklan bagi anda yang memonetize website dengan program afiliasi ads seperti adword misalnya, translation Panel untuk mengisi sendiri terjemahan2 konten, menu, hingga Notification sebagai popups dan lain sebagainya.

Pengujian AMP Website Anda

Untuk memastikan pengaturan yang sudah anda lakukan berjalan dengan baik maka silahkan uji halaman website anda, sebelumnya sangat disarankan bagi anda untuk memiliki akun google webmaster search console.

  1. ketik “/amp” dibelakang url halaman yang ingin anda uji (misal : https://thidiweb.com/amp)
  2. Masukan url yang ingin anda uji menggunakan tool google validator, jika tidak ada error maka nantinya tampilan website anda berbeda dengan sebelumnya di hasil pencarian google perangkat seluler (terlihat logo petir).


Web Design | SEO | Digital Marketing
Jl Dieng IV no 27 cimahi selatan, kota Cimahi 40534
(022)54418169 – 08893612887 (WA) – D6476796 (BBM)

info@thidiweb.com.


10 thoughts on “Pengertian AMP Google dan Cara Memasangnya pada WordPress

  1. packaging berkata:

    Terimakasih info dan sharingnya gan, sering baca ttg AMP hanya saja belum ada penjelasan detail seprti ini. sukses selalu

    1. thidi berkata:

      baik…terima kasih sudah berkunjung, dan senang bisa membantu anda….salam…

  2. zaenal arifin berkata:

    artikel yang baik sangat membantu, trimakasih slam kenal.
    https://www.jualboiler.com/

    1. thidi berkata:

      terima kasih sudah berkunjung…salam kenal juga…

  3. furnijid berkata:

    2019 saya baru baca dan saya coba, ternyata tutorialnya udah beda
    AMP for wp harus upgrade versi premium

    1. thidi berkata:

      Benar ekali pasti berbeda di setiap update, tp intinya sama saja…kalo versi gratis saya cek barusan masih bisa…^^

  4. sbobet88 berkata:

    Saya ada pertanyaan untuk admin thidiweb nih, menurut anda sendiri bagus amp atau responsive mobile ? Ada konten atau informasi terbaru tidak ? Harusnya informasi-informasi penting seperti ini terus di perbarui agar para pembaca dapat ikut perkembangannya juga. Tapi saya pribadi sangat suka konten kakak… Thx..

    1. thidi berkata:

      Jika website anda berisi informasi sederhana / blog disarankan menggunakan AMP…tp jika website anda berupa onlineshop atau web lainnya yang mempunyai fungsi yang complex, maka disarankan menggunakan responsive…sebenarnya anda tidak menggunakan amp pun tidak apa=apa asalkan konten dan kecepatan web anda sangat baik..

  5. Swuragil berkata:

    Sangat lengkap pembahasannya, terima kasih banyak, sangat membantu. Saya sudah instal plugin AMP, tetapi saat ini belum banyak url versi AMP yang terindeks.

    1. thidi berkata:

      Baik, senang sekali jika artikel kami bermanfaat…dan terima kasih sudah membaca dan berkunjung…salam sukses…^^

Beri Komentar Anda ...