Menginstal AMP di WordPress

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Final product image — What You'll Be Creating

Apa itu AMP?

Oktober lalu, Google mengumumkan AMP sebagai inisiatif open source untuk menyediakan browsing web mobile yang lebih cepat. Seperti dijelaskan oleh TechCrunch, banyak yang melihat AMP sebagai upaya oleh Google untuk bersaing lebih baik dengan Instant Articles dari Facebook dan aplikasi mobile yang semakin memberikan browsing lebih cepat, lebih efisien. Saya cenderung setuju.

Halaman yang dioptimalkan dengan AMP akan muncul di carousel browsing mobile di bagian atas hasil pencarian Google, menggeser artikel HTML tradisional untuk lebih kebawah halaman. Dan mereka akan me-load hampir seketika.

AMP for WordPress - AMPed Google Search Results on Mobile

Jujur, saya skeptis dengan AMP untuk blogger dan penerbit kecil. Kita sering menulis konten besar yang berjuang untuk membuatnya ke puncak hasil pencarian Google. Sekarang, kita harus menerapkan teknologi lainnya lagi pada sumber daya Anda yang terbatas dengan harapan bahwa konten kami muncul di bagian atas. Menariknya, saat kemunculan penerbit media besar, saya tidak melihat posting blog di hasil pencarian AMP dan juga blogger WordPress yang lain:

AMP for WordPress - WordPress Codex Users Not Seeing Posts in Search Results

Saya juga menduga UX yang mengubur hasil pencarian lainnya di bawah carousel akan bekerja dengan baik untuk Google.

Ketika saya bekerja di Microsoft, saya membantu meluncurkan MSN News pada tahun 1995 sebagai bagian dari MSN Online Network yang diluncurkan dengan Windows 95, jawaban Microsoft ke AOL. MSN News memerlukan sebuah aplikasi penampil kustom yang berjalan pada versi platform Media Viewer dari Microsoft, kerangka yang berupaya untuk telah diaktifkan konten CD mereka sebelumnya. Namun, dalam satu tahun, kami harus mempersiapkan untuk web kami dan penggabungan dengan NBC—yang kemudian menjadi MSNBC.com. Kami harus menyesuaikan kerangka penerbitan kami untuk menghasilkan Media View dan HTML secara bersamaan. Hal ini menciptakan beberapa kompleksitas yang baru.

AMP mengingatkan saya pada semua usaha-usaha tersebut. Ini sangat berbeda, sangat dibatasi versi HTML yang memerlukan perubahan besar ke situs Anda dan iklan apapun yang mungkin Anda gunakan.

Plugin AMP WordPress Gratis

Kabar baiknya adalah WordPress telah meluncurkan sebuah plugin AMP gratis yang akan membantu Anda menerapkan AMP tanpa banyak pengembangan tambahan. Namun, ia memiliki banyak keterbatasan. Desain situs Anda sangat dibatasi, dan ada konflik dengan plugin WordPress lainnya, teknik optimasi umum, dan banyak lagi. AMP juga akan menjadi beban tambahan bagi pengembang tema WordPress.

AMP masih di masa perkembangannya, dan saya kecewa bahwa Google memilih untuk menciptakan sebuah kerangka yang sama sekali baru daripada bekerjasama dengan penerbit untuk mengoptimalkan HTML5 agar lebih cepat mengkonfigurasi bagaimana halaman harus di-load, apa yang harus di-load pertama, dan bagaimana untuk meletakkan teks dengan cepat. Ini akan menjadi pendekatan yang lebih mencerahkan. Tapi kemudian, tim Google adalah jenius.

Meskipun mengkhawatirkan saya, dalam tutorial ini saya akan memandu Anda menginstal plugin AMP untuk WordPress dan Yoast SEO Glue untuk plugin AMP, yang memberi Anda kontrol sedikit lebih banyak atas tampilan akhir situs Anda.

Bagaimana AMP Terlihat di WordPress?

Berikut adalah contoh dari halaman AMP dibandingkan dengan halaman HTML asli. Anda dapat menelusuri mereka secara dinamis, untuk yang asli dan di sini untuk versi AMP. Tentu saja, loading halaman jauh lebih cepat dengan AMP.

Gambar dari Halaman HTML5 Asli di JeffReifman.com:

AMP for WordPress - Jeff Reifman Home Page Without AMP

Tag link berikut ditambahkan ke setiap halaman dalam blok <head>, memberitahu mesin pencari bahwa versi halaman AMP tersedia.

<link rel="amphtml" href="http://jeffreifman.com/2016/01/28/a-new-business-model-for-twitter/amp/" /></head>

Tapi ada juga link kanonik yang mendefinisikan URL halaman sumber untuk dihubungkan:

<link rel="canonical" href="http://jeffreifman.com/2016/01/28/a-new-business-model-for-twitter/" />

Gambar dari Halaman AMP di JeffReifman.com:

AMP for WordPress - Jeff Reifman Home Page With AMP

Menu dan navigasi yang hilang, dan branding sebagian besar hilang (walaupun ada beberapa pilihan), tetapi halaman me-load dengan cepat.

Saya akan memandu Anda mengaktifkan AMP dengan WordPress.

Plugin WordPress AMP

AMP for WordPress - the Plugin Home Page

Anda bisa belajar dan men-download Plugin WordPress AMP dari direktori plugin WordPress. Atau, Anda dapat mencari dan menginstalnya langsung dari Dashboard WordPress Anda.

Langsung pergi ke Plugins > Add New dan mencari AMP. Kemudian, klik Install Now:

AMP for WordPress - Search for AMP plugin and Install button

Setelah diinstal, klik Activate:

AMP for WordPress - Activate the AMP plugin

Setelah diaktifkan, kunjungi setiap posting di blog WordPress Anda dengan ekstensi /amp/. Sebagai contoh, posting Amazon Marketplace Fraud Made Easy adalah salah satu hasil pencarian Google saya paling populer. Berikut adalah apa yang tampak ketika Anda mengunjungi versi AMP di http://jeffreifman.com/2014/03/25/amazon-makes-fraud-easy-in-marketplace/amp/:

AMP for WordPress - An example JeffReifmancom page with AMP

Perekat untuk Plugin Yoast SEO & AMP

Plugin generik AMP dari WordPress menawarkan beberapa penyesuaian. Orang-orang di Yoast SEO telah menciptakan add-on untuk plugin populer mereka yang lebih meningkatkan dukungan AMP Anda.

AMP for WordPress - Glue for Yoast SEO AMP Plugin Homepage

Anda dapat meninjau Perekat untuk Plugin Yoast SEO & AMP, atau instal melalui dashboard WordPress seperti yang kita lakukan sebelumnya untuk plugin AMP. Setelah diaktifkan, seharusnya terlihat seperti ini:

AMP for WordPress - Glue for Yoast SEO AMP

Catatan: Pastikan untuk memiliki plugin Yoast WordPress SEO terinstal dahulu.

Anda dapat memodifikasi setelan AMP melalui menu sidebar Yoast SEO—klik AMP di bagian bawah menu:

AMP for WordPress - Glue for Yoast SEO AMP Menu

Anda akan melihat berbagai cara dari plugin Glue yang memungkinkan Anda untuk meningkatkan implementasi AMP Anda.

Pertama, Yoast memungkinkan Anda untuk memperluas fungsi AMP ke halaman dan jenis halaman lain WordPress. Secara default AMP hanya mengubah posting yang sensitif terhadap waktu—hal ini dirancang terutama untuk artikel berita:

AMP for WordPress - Glue for Yoast SEO AMP Post Types Tab

Catatan: Jika Anda melihat halaman kosong di bawah tab, pastikan Anda memperbarui plugin Yoast SEO yang asli dan itu seharusnya memperbaikinya.

Kedua, Yoast menawarkan beberapa cara yang berguna untuk menyesuaikan branding, desain dan skema warna:

AMP for WordPress - Glue for Yoast SEO AMP Design Tab

Dan akhirnya, mereka menawarkan cara untuk menempatkan kode Analytics bergaya-AMP kustom. Ini tidak cukup sederhana seperti kelihatannya. Perhatikan kode yang saya paste di bawah ini untuk mendapatkannya bekerja:

AMP for WordPress - Glue for Yoast SEO AMP Analytics Tab

Saya menemukan versi AMP untuk menerapkan Google Analytics di sini; cukup menyesuaikan kode akun Anda untuk situs web Anda:

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

Saya yakin Yoast akan terus memperbarui plugin Glue dari waktu ke waktu seperti fungsionalitas plugin AMP yang berkembang.

Secara keseluruhan, cukup sederhana untuk memulai ini. Tetapi tidak.

Debugging Kesalahan AMP

Beberapa hari setelah saya memasang AMP, saya menerima email yang ramah dari Google Search Console yang melaporkan 10 halaman dengan kesalahan. Yang sebenarnya, setiap posting AMP di situs saya rusak.

AMP for WordPress - Email from Google Search Console

Saya login ke Google Search Console untuk melihat halaman dengan kesalahan dan melihat ini:

AMP for WordPress - List of Pages with AMP Errors in Google Search Console

Saya mengklik salah satu halaman:

AMP for WordPress - Page Detail of AMP Error in Google Search Console

Kemudian, saya klik Open Page dan melihat kesalahan yang lebih rinci. Pada dasarnya, Anda dapat melakukan ini secara manual dengan menambahkan /amp#development=1 ke URL, seperti: http://jeffreifman.com/2014/02/24/how-to-secure-your-mac-from-potential-theft/amp/#development=1. Dan kemudian, buka konsol JavaScript di browser Anda:

AMP for WordPress - JavaScript Console Showing AMP Page with Error

Ternyata semua halaman situs web yang diaktifkan-AMP saya di JeffReifman.com telah rusak karena kesalahan: Tag 'script' adalah terbatas kecuali dalam bentuk tertentu. Namun, pada PublishingwithWordPress.com, ada tidak ada kesalahan:

AMP for WordPress - JavaScript Console Showing AMP page without errors

Dalam seri yang akan datang di Envato Tuts+, saya menjelaskan bagaimana saya berhasil menyesuaikan JeffReifman.com untuk mencapai 100 di Google PageSpeed. Ini diperlukan menggunakan fitur kustom W3 Total cache untuk menempatkan beberapa fitur JavaScript yang diminimalkan di dekat bagian bawah halaman sebelum </body>. AMP tidak mengijinkan ini, dan plugin AMP WordPress tidak mampu menyaringnya.

<script type="text/javascript" src="http://c4.jeffreifman.com/wp-content/cache/minify/000000/68b0b/default.include-footer.952e41.js?d4992f"></script></body>

Saya perlu melakukan penelitian lebih lanjut untuk menentukan apakah W3 Total Cache akan mematikannya bagi saya untuk jalur tertentu seperti /amp/ (mungkin) atau jika saya harus mencari solusi lain. Menempatkan skrip ini kembali di <head> akan merusak Google Page Speed saya. Menariknya, saya juga baru saja menemukan bahwa menggunakan Google iklan DFP di situs saya juga merusak Google Page Speed. Google adalah master pencarian yang menantang, dan hal itu tidak membuatnya mudah untuk menggunakan semua teknologinya bersama-sama.

Saya bertanya-tanya mana yang lebih penting: peringkat Google Page Speed, dukungan AMP, atau perkembangan saya dan waktu debugging.

Penutup

Terus terang, saya tidak yakin halaman AMP blog Anda akan pernah melihat cahaya di dekat bagian atas pencarian, atau saya yakin Anda akan berhasil mendapatkan banyak pendapatan dari mereka tanpa kustomisasi tambahan. Google tampaknya akan menyesuaikan AMP untuk penerbit media besar dengan sumber daya terbaik mengoptimalkan pandangan untuk merek, estetika dan pendapatan.

Pada dasarnya, AMP adalah jalur dari web dioptimalkan berharga yang dipertanyakan bagi komunitas open-source, sementara Instant Articles dari Facebook adalah untuk kaum elit yang dipilih dari taman bertembok "besar". Saya lebih suka melihat Google membangun model loading yang diprioritaskan dalam HTML5 dengan skrip yang menyertainya.

Bagi saya, AMP hanya membuatnya lebih sulit bagi penerbit kecil untuk tetap relevan. Saya senang WordPress berupaya untuk membantu, dan saya yakin desainer tema juga, tapi masih banyak kekurangan. Saya pikir Google telah melewatkan tanda yang benar-benar membantu siapa pun kecuali penerbit web terbesar di sini.