Cara Install Google Accelerated Mobile Pages (AMP) Pada WordPress

Daftar Isi “Cara Install Google Accelerated Mobile Pages (AMP) Pada WordPress“

1. Apa itu AMP?
2. Perbedaan Halaman AMP dengan Non AMP
3. Cara Memasang AMP (Accelerated Mobile Pages) di WordPress
4. Cek Validasi Accelerated Mobile Pages dengan Chrome Console
5. Pro dan Kontra Google AMP (Accelerated Pages Mobile)

1. Apa itu AMP?

AMP (Accelerated Mobile Pages) adalah halaman web yang di desain khusus agar laman tersebut mobile friendly dan meningkatkan kecepatan performa website bila diakses melalui smartphone/tablet.

Pada tahun 2015 yang lalu, tepatnya pada bulan oktober, Google secara resmi merilis produk terbaru mereka yaitu amp project, bersifat open source sehingga bisa digunakan oleh semua orang dengan gratis. Berikut video testimoni user yang memakai teknologi AMP:

AMP merupakan sebuah inovasi baru yang di ciptakan oleh raksasa internet google, dimana project Google AMP ini akan memberi kemudahan bagi pengguna khususnya untuk perangkat mobile phones.

Seperti kita ketahui bahwa saat ini banyak website yang cukup sulit diakses dengan smartphone karena ukuran halaman web yang berat. Hal ini berbanding terbalik dengan banyaknya pembaca berita yang masih menggunakan smartphone dengan spesifikasi minimum akhirnya mobile smartphone menjadi hang atau nge-lag.

Untuk itu AMP (Accelerated Mobile pages) hadir memberi pengalaman bagi pengguna internet untuk kenyamanan dan kecepatan berselancar didunia maya dan juga dapat meningkat SERP pada hasil pencarian gooogle khususnya perangkat mobile.

Kelebihan AMP ini adalah ketika pengunjung mengakses website yang memiliki icon “petir” pada hasil pencarian google, akan dimuat 4x lebih cepat dari biasanya, dan dapat menghemat data hingga 10x lipat.

speed test original vs amp

Agar situs anda mendukung tampilan AMP ini, ada beberapa peraturan khusus yang harus anda terapkan pada blog/website anda. Serpeti menambahkan markup amp pada laman html. Atau Anda bisa melihat panduannya melalui situs resmi ampproject.

Saat ini Ada begitu banyak perusahaan besar yang sudah menggunakan Accelerated Mobile Pages seperti: BBC, Guardian News, Bola.com, Kaskus, CNN, The New York Times, dan lain-lain.

Berikut adalah contoh artikel apabila mendukung tampilan AMP. Cukup menambahkan /amp pada ujung URL artikel.

amp vs non-amp

2. Perbedaan Halaman AMP dengan Non AMP

Perbedaan yang paling mendasar antara halaman AMP dan Non AMP terletak pada sisi onpage. Karena penyebab lambatnya suatu situs bukan karena memiliki banyak gambar tetapi karena halaman tersebut memiliki kode CSS dan javascript yang terlalu banyak.

Untuk itu dengan adanya AMP secara otomatis ia tidak menggunakan CSS atau javascript tema anda, melainkan menggunakan kode CSS dan Javascript dari framework amp itu sendiri. Oleh karena itu, halaman yang menggunakan AMP akan mudah diload dengan cepat.

Perbedaan lain antar menggunakan AMP dan Non AMP adalah penggunaan fitur Content Delivery Network atau CDN. Jika Anda menggunakan framework AMP maka secara otomatis request website diarahkan ke CDN dari AMP.

Framework Accelerated Mobile Pages juga dapat mengurangi jumlah request HTTP yang cukup signifikan hingga 4 kali lipat.

3. Cara Memasang AMP (Accelerated Mobile Pages) di WordPress

1. Download plugin AMP disini.
2. Aktifkan plugin tersebut dan akan langsung otomatis bekerja. Jika menggunakan plugin Yoast – SEO lanjutkan ke step 3.
3. Install Yoast SEO AMP glue plugin.
4. Aktifkan plugin lalu ubah settingan di SEO → AMP settings sesuai themes. Jangan lupa untuk mengisi featured image jika belum ada.
5. Selamat website anda kini sudah mensupport Google AMP.

Beberapa tampilan menu dari plugin Yoast SEO AMP glue:

yoast glue amp 1

yoast glue amp 2

yoast glue amp 3

Catatan:

1. Untuk plugin amp, pada menu dashboard -> appearance -> AMP, terdapat beberapa theme yang belum compatible. Fitur ini digunakan untuk setting tampilan dasar seperti hal-nya header halaman amp.
   

   amp design

   Namun jangan khawatir, merubah header ataupun logo di halaman AMP tentu saja juga dapat dirubah melalui plugin Yoast SEO AMP glue.

2. Jika melihat kesalahan 404 ketika mencoba untuk melihat versi amp, maka di sini yang perlu dilakukan buka menu Settings » Permalinks di admin WordPress Kamu dan klik tombol ‘Save Changes’. Ingat, tidak mengubah apa pun di sini, cukup tekan tombol simpan. Ini hanya berfungsi untuk menyegarkan struktur permalink website.
3. Pada tab AMP Analytics Yoast SEO AMP glue, untuk memasukkan code google analytics perlu dirubah terlebih dahulu ke tagging <amp-analytics> …….. </amp-analytics>
   Contoh :Rubah contoh code analytics yang didapat pada halaman dashboard google analytics yang ada dibawah

   <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   
   ga('create', 'UA-XXXXXXXX-X', 'auto');
    ga('send', 'pageview');
   </script>

   menjadi :

   <amp-analytics type="googleanalytics">
   <script type="application/json">
   {
    "vars": {
    "account": "UA-XXXXX-Y"
    },
    "triggers": {
    "trackPageview": {
    "on": "visible",
    "request": "pageview"
    }
    }
   }
   </script>
   </amp-analytics>

   dan ganti Tracking-ID google analytics, UA-XXXXX-Y, sesuai dengan ID anda yang terdaftar. Sumber informasi dapat dilihat pada halaman developers google.

Jangan khawatir jika tidak terlihat secara langsung hasil setting AMP pada blog atau website, hal ini mungkin memerlukan waktu bagi Google secara otomatis untuk mengindeks Accelerated Mobile Pages dan kemudian menampilkannya di data di Search Console. Untuk melihat status index, anda bisa melihatnya pada menu Search Appearance > Accelerated Mobile Pages

Jika Anda melihat kode sumber dari posting asli, Anda akan menemukan baris ini di HTML source:

<link rel="amphtml" href="http://example.com/url/amp/" />

4. Cek Validasi Accelerated Mobile Pages dengan Chrome Console

Selain dari tampilan website yang lebih sederhana daripada tampilan original-nya, untuk melihat apakah fitur Accelerated Mobile Pages sudah aktif atau belum, Anda bisa menggunakan fitur inspect element dari Google Chrome. Caranya adalah:

1. Buka salah satu postinganmu, kemudian pada akhir URL tambahkan “amp/#development=1” kemudian tekan enter.

url accelerated mobile pages google

2. Tekan Ctrl + Shift + I atau klik kanan pilih inspect maka akan terbuka jendela inspect element. Kemudian pilih tab console. Jika tervalidasi maka hasilnya seperti berikut:

validasi google amp

Cara alternatif lainnya adalah kunjungi halaman validasi oleh google disini

halaman website validasi amp google

5. Pro dan Kontra Google AMP (Accelerated Pages Mobile)

Beberapa ahli SEO mengklaim bahwa AMP akan membantu Website atau blog akan membantu mendapatkan peringkat lebih tinggi di Google Search, dan tentu saja hal itu akan meningkatkan pengalaman pengunjung terutama bagi para pengguna ponsel pada koneksi internet yang lambat. Secara tidak langsung itu akan meningkatkan page views suatu situs. Dan itu merupakan tantangan bagi pemilik situs web, blogger, dan pemasar untuk bisa menerapkan dengan baik teknologi AMP pada Platform mereka masing-masing.

AMP menggunakan Limited HTML, JavaScript, dan CSS. Ini berarti Teman Blogger tidak dapat menambahkan widget dan fitur tertentu ke website AMP ponsel Teman Blogger. Hal ini membatasi kemampuan suatu web atau blog untuk menambahkan smart email optin forms, facebook like boxes, dan dynamic scripts lainnya.

Sementara ini Google AMP mendukung Google Analytics, tapi tidak mendukung banyak platform analisis lainnya. Hal ini juga berlaku untuk pilihan iklan yang terbatas untuk memilih beberapa platform iklan untuk web yang menggunakan AMP. Meskipun AMP memiliki banyak keterbatasan, Google tetap mendorong halaman AMP dengan memberi mereka dorongan dalam pencarian mobile dalam artian akan lebih diutamakan di halaman pertama google.

UPDATE (20 Mei 2017)

AMP for WP – Accelerated Mobile Pages, adalah plugin extension dari plugin core AMP sebelumnya dan secara fitur juga lebih lengkap dari Yoast SEO AMP glue. Hal ini tentu sangat bagus dikarenakan beberapa fitur yang ada dapat menutupi kekurangan dari teknologi AMP diantaranya tidak dapat memasang iklan, tidak terdapat tombol share ke social media, customize design halaman yang lebih lengkap, auto redirect mobile agent dan masih banyak lagi fitur unggulan lainnya.

amp plugin for wp monetize advertising

amp plugin for wp advance setting

Dengan adanya plugin AMP for WP – Accelerated Mobile Pages tentu kita menjadi lebih yakin untuk menerapkan teknologi AMP di website kita tanpa berpikir ulang.

Semoga artikel berjudul “Cara Install Google Accelerated Mobile Pages (AMP) Pada WordPress” bisa bermanfaat dan silahkan jika masih ada yang kurang jelas dapat ditanyakan di kolom komentar dibawah ini.

Silahkan Like Fanspage dan Share artikel ini jika menurut kamu bermanfaat untuk kamu dan orang lain.

Artikel Lainnya