Banyak para blogger dan situs web yang saat ini mencoba berlaih ke halaman AMP untuk mempercepat kinerja web/blog mereka. Akan tetapi banyak pula polemik yang sering terjadi setelah mereka mengubah halaman asli ke versi AMP yang di tampilkan untuk pengguna ponsel.

Pada artikel kali ini, saya akan menunjukkan kepada rekan-rekan bagaimana cara ampuh untuk menonaktifkan Google AMP di blog WordPress dengan beberapa trik.

Apa itu AMP?

Google-AMP-ScreenAccelerated Mobile Pages atau disingkat “AMP” merupakan prakarsa open source yang bertujuan untuk membuat halaman web lebih cepat bagi pengguna ponsel dan meningkatkan pengalaman pengguna.

Hal itu dilakukan dengan menyajikan halaman dengan HTML dan JavaScript minimal. Ini memungkinkan konten dihosting di Google AMP Cache. Google kemudian dapat menyajikan versi tembolok ini kepada pengguna seketika saat mereka mengeklik tautan yang bertanda ⚡ di hasil penelusuran.

AMP HTML

AMP HTML adalah HTML dengan beberapa batasan untuk performa yang andal.

<! doctype html> 
< html  > 
 < head > 
   < meta  charset = "utf-8" > 
   < link  rel = "canonical"  href = "hello-world.html" > 
   < meta  name = "viewport"  content = "width = lebar perangkat, skala minimum = 1, skala awal = 1 " > 
   < style  amp-boilerplate > body { -webkit- animation :- amp-mulai  8 s  langkah-langkah (1 , akhir )  0 s  1  normal  keduanya ; moz animasi : - amp-mulai  8 s  langkah-langkah ( 1 , akhir )  0 s  1  yang normal  kedua ; -ms- animasi : - amp-start  8 s  steps ( 1 , end )  0 s  1  normal  keduanya ; animasi : - amp-start  8 s langkah-langkah ( 1 , akhir )  0 s  1  yang normal  kedua } @ -webkit-keyframes  -amp-start { dari { visibility : hidden } ke { visibility : terlihat }} @ -moz-keyframes  -amp-start { dari { visibility : hidden } ke { visibility : visible }} @ -ms-keyframes  -amp-start { from { visibility :hidden } to { visibility : visible }} @ -o-keyframes  -amp-start { from { visibility : hidden } to { visibility : visible }} @ keyframes  -amp-start { from { visibility : hidden } to { visibility : visible }} </ style > < noscript > < style  amp-boilerplate > body { -webkit-animasi : tidak ada ; -moz- animasi : tidak ada ; -ms- animasi : tidak ada ; animasi : none } </ style > </ noscript > 
   < script  async  src = "https://cdn.ampproject.org/v0.js" > </ script > 
 </ head > 
 < body > Halo Dunia! </ body > 
</ html >

HTML AMP pada dasarnya HTML diperluas dengan properti AMP kustom. Berkas HTML AMP yang paling sederhana terlihat seperti ini:

Meskipun sebagian besar tag di halaman HTML AMP adalah tag HTML biasa, beberapa tag HTML diganti dengan tag khusus AMP. Elemen khusus ini, yang disebut komponen HTML AMP, membuat pola umum mudah diterapkan dengan cara performant.

Misalnya, amp-img tag memberikan srcset dukungan penuh bahkan di browser yang belum mendukungnya. Pelajari cara membuat halaman HTML AMP pertama Anda.

Halaman AMP ditemukan oleh mesin pencari dan platform lainnya melalui <link rel=””> tag HTML. Anda dapat memilih untuk memiliki versi non-AMP dan versi AMP dari halaman Anda, atau hanya versi AMP.

AMP JS

AMP JS perpustakaan menjamin render cepat AMP halaman HTML

AMP JS perpustakaan mengimplementasikan semua praktik kinerja terbaik AMP ini , mengelola pemuatan sumber daya dan memberi Anda tag kustom yang disebutkan di atas, semua untuk memastikan render cepat halaman Anda.

Di antara pengoptimalan terbesar adalah kenyataan bahwa hal itu membuat segala sesuatu yang berasal dari sumber eksternal tidak sinkron, jadi tidak ada yang bisa menghalangi apa pun dari rendering.

Teknik kinerja lainnya termasuk sandboxing semua iframe, pra-perhitungan tata letak setiap elemen di halaman sebelum sumber daya dimuat dan penonaktifan pemilih CSS yang lamban.

AMP Cache

Google AMP Cache dapat digunakan untuk melayani cache AMP halaman HTML.

Google AMP Cache adalah jaringan pengiriman konten berbasis proxy untuk memberikan semua dokumen AMP valid. Ini mengambil halaman HTML AMP, menyimpannya, dan meningkatkan kinerja halaman secara otomatis. Saat menggunakan Google AMP Cache, dokumen, semua file JS dan semua gambar dimuat dari sumber yang sama dengan menggunakan HTTP 2.0 untuk efisiensi maksimum.

Cache juga dilengkapi dengan sistem validasi built-in yang memastikan bahwa halaman tersebut dijamin berhasil, dan itu tidak bergantung pada sumber daya eksternal. Sistem validasi menjalankan serangkaian pernyataan yang mengkonfirmasikan markup halaman memenuhi spesifikasi HTML AMP.

Versi lain dari validator disertakan dengan setiap halaman AMP. Versi ini dapat mencatat kesalahan validasi secara langsung ke konsol browser saat halaman ditampilkan, memungkinkan Anda melihat bagaimana perubahan kompleks pada kode Anda dapat mempengaruhi kinerja dan pengalaman pengguna.

Masalah Yang sering muncul pada halaman AMP

Akan tetapi semenjak banyaknya problem dari pemuatan halaman AMP saat itu banyak pula pemilik situs web, para blogger, dan publikasi online telah berhenti menggunakan halaman AMP. Banyak dari mereka mengeluh dan berbagi alasan di balik keputusan mereka untuk menonaktifkan halaman AMP.

Berikut adalah beberapa masalah yang dimiliki oleh banyak influencer, blogger, dan pengembang.

> Penurunan Tarif Konversi Secara drastis

AMP menggunakan kumpulan HTML / JS yang membatasi. Pemilik situs tidak dapat berbuat banyak untuk mendorong pengguna berlangganan , mengisi formulir kontak , atau membeli barang.

> Tayangan Laman Bawah oleh Pengguna Ponsel

AMP tidak menampilkan menu navigasi , sidebars, atau fitur penemuan konten situs web Anda. Hal ini menyebabkan penurunan tayangan laman yang signifikan oleh pengguna ponsel.

Sebenarnya beberapa pakar pengalaman pengguna menyarankan agar tombol tutup di atas benar-benar mendorong pengguna untuk kembali ke penelusuran Google setelah membaca artikel anda daripada menjelajah situs web / blog anda.

> Keterlibatan Pengguna yang Lebih Rendah

Banyak situs web berkembang pada interaksi pengguna, seperti klik untuk melihat widget , rating pengguna, komentar, dan sebagainya. Google AMP menyulitkan pemilik situs web agar pengguna tetap terlibat dan berinteraksi dengan konten mereka.

Haruskah Anda mengambil langkah untuk Menonaktifkan Google AMP?

Jawaban atas pertanyaan ini sebenarnya tergantung pada keputusan serta kinerja situs anda. Jika pengguna ponsel memaksimalkan audiens Anda, mungkin anda masih ingin menggunakan AMP.

Di sisi lain, jika Anda telah mencoba Google AMP, dan hal itu telah berdampak negatif terhadap tingkat konversi Anda, maka Anda mungkin harus menonaktifkan Google AMP di situs Anda.

Berlawanan dengan kepercayaan populer, Google tidak menghukum situs web karena tidak menggunakan AMP. Anda tetap dapat meningkatkan kecepatan dan kinerja situs web Anda di seluler agar dapat bersaing untuk pemirsa penelusuran seluler.

Pendapatan iklan menurun drastis

Keluhan yang sering sekali muncul di forum adalah setelah mereka mengubah halaman asli ke versi AMP berdampak negatif dari segi berkurangnya jumlah pendapatan iklan yang tampil di laman blog atau web melalui perangkat ponsel.

Kita tahu bahwa halaman AMP sangat terbatas tampilannya termasuk slot iklan dan ukurannya.

Tutorial Menonaktifkan halaman AMP

Langkah ke-1: Menonaktifkan Google AMP Di WordPress

Ada beberapa plugin WordPress yang memungkinkan Anda menambahkan dukungan AMP ke situs web Anda. Pengaturan dasar tetap sama terlepas dari plugin apa yang Anda gunakan.

Hal pertama yang perlu Anda lakukan adalah menonaktifkan plugin AMP. Cukup kunjungi halaman plugin dan klik pada link deaktivasi di bawah plugin AMP.

jpg

Menonaktifkan plugin akan menonaktifkan dukungan AMP di situs Anda.

Langkah ke-2: Menyiapkan pengalihan

Menonaktifkan plugin AMP akan menghapus versi AMP dari artikel Anda dari situs web, tapi itu saja tidak cukup secara khusus jika AMP Anda aktif selama lebih dari seminggu.

Ada kemungkinan bagus bahwa Google telah memiliki laman yang tersimpan dalam indeks mereka, dan akan terus menampilkan laman tersebut di hasil penelusuran.

Untuk memperbaiki masalah ini, Anda perlu mengalihkan pengguna yang datang ke halaman AMP ke halaman non-AMP biasa.

saya akan menunjukkan dua metode berbeda untuk menyiapkan pengalihan untuk Google AMP. Anda bisa memilih salah satu yang paling sesuai untuk Anda.

Metode 1 – Menggunakan Redirect Plugin

Pertama Anda perlu menginstal dan mengaktifkan plugin Redirection, lihat gambar dibawah untuk mengunduh plugin yang saya gunakan:

png

Untuk lebih jelasnya, lihat panduan langkah demi langkah tentang cara memasang plugin WordPress di bawah ini.

Setelah aktivasi plugin, buka halaman »Redirection Tools untuk mengatur pengalihan.

Pertama, tambahkan kode berikut di kolom URL sumber:

/(.*)\/amp

Di bidang URL target, Anda perlu menambahkan URL situs web Anda dengan format berikut:

http://example.com/$1

Jangan lupa ganti example.com dengan nama domain milik web atau blog anda sendiri.

Sekarang periksa kotak centang Regex dan pilih Redirections di bawah menu drop down Group.

Terakhir klik tombol ‘Add Redirect’ untuk menyimpan perubahan Anda.

Lihat contoh gambar penerapannya dibawah ini:

png

Sekarang Anda bisa mengunjungi halaman AMP di situs Anda untuk melihat apakah pengalihan bekerja dengan benar.

Hasil Pengujian:

Cara diatas ini telah saya buktikan dan ternyata sangat ampuh mengalihkan halaman AMP ke versi halaman NON-AMP

Metode 2 – Secara manual Set Redirects in .htaccess

Jika Anda tidak ingin menggunakan plugin untuk mengatur pengalihan, Anda dapat mengatur pengalihan menggunakan file .htaccess di akun hosting WordPress Anda.

Pertama, Anda perlu terhubung ke situs web Anda menggunakan klien FTP atau File Manager di cPanel tempat anda hosting situs atau blog anda. Setelah terhubung, silahkan anda cari file .htaccess di folder akar situs anda dan bisa mengeditnya disana dan jangan lupa untuk mencentang tampilkan halaman tersembunyi pada pilihan sebelum memasuki direktori utama HTML.

Cukup tambahkan kode berikut di bagian bawah file .htaccess Anda:

// Redirect AMP to non-AMP
RewriteEngine On
RewriteCond %{REQUEST_URI} (.+)/amp(.*)$
RewriteRule ^ %1/ [R=301,L]

Jangan lupa simpan perubahan anda dan upload file kembali ke server anda.

Anda sekarang dapat mengunjungi versi AMP dari setiap posting di situs anda untuk memastikan pengalihan berfungsi sebagaimana mestinya.

saya harap artikel ini bisa membantu anda menemukan solusi untuk menonaktifkan Google AMP di WordPress.

Iklan