Cara Menerapkan AMP di Situs Anda dan Mendapatkan Kecepatan Pemuatan Supersonik

Anda mungkin ingin menerapkan AMP untuk meningkatkan Kecepatan Halaman. Inilah alasannya

Situs web yang memuat cepat sangat diperlukan. Rentang perhatian manusia sedang menurun – tidak ada yang mau menunggu, terutama jika mereka menggunakan perangkat seluler.

Seberapa cepat kita harus? Google merekomendasikan waktu buka halaman kurang dari dua detik.

Ada banyak langkah populer di seluruh halaman dan domain teknis SEO yang membantu Anda mencapai tujuan.

Namun, salah satu langkah tersebut – Menyiapkan Accelerated Mobile Pages (AMP) untuk versi seluler situs web – digunakan dengan hemat.

Mengapa? Singkatnya, membuat AMP membutuhkan sedikit waktu, tenaga, dan dana tergantung pada seberapa besar sebuah situs web. Pada akhirnya, itu bahkan mungkin tidak sepadan.

Apakah layak bagi Anda untuk berinvestasi di AMP? Jika jawabannya ya, postingan ini akan membantu Anda dengan proses langkah demi langkah untuk menyiapkan AMP secara efektif untuk situs WordPress Anda.

Terapkan AMP Langkah 1: Pilih plugin yang tepat

Opsi plugin

WordPress menawarkan banyak plugin untuk AMP. Saya telah mencoba beberapa dari mereka dengan sukses untuk berbagai tingkat. Salah satunya memberikan hasil yang luar biasa di Google Pagespeed Insights untuk sementara waktu. Tapi itu merusak semua halaman AMP saya di seluler!

Rekomendasi saya

Saya akan merekomendasikan AMP for WP – Accelerated Mobile Pages – plugin WordPress. Plugin ini menyediakan banyak opsi untuk menyesuaikan halaman web seluler. Sisa posting akan tentang pengaturan AMP untuk situs web Anda menggunakan plugin ini.

Setelah Anda menginstal dan mengaktifkan plugin, dashboard WordPress akan menampilkan opsi untuk membuka versi AMP situs web Anda. Anda juga akan melihat plugin baru (AMP) seperti yang disorot pada gambar di bawah ini.

Seperti pada gambar di atas, Anda akan melihat serangkaian opsi, kami akan membahasnya satu per satu.

Mari melompat ke pengaturan.

Terapkan AMP Langkah 2: Penyiapan dasar plugin

Jenis situs web

Pilih opsi yang paling mewakili bisnis Anda. Pilih 'lainnya' jika tidak ada yang cocok, Anda akan mendapatkan opsi untuk mengetikkan jenis situs web Anda setelah itu.

Di mana Anda perlu menerapkan AMP?

Pilih tempat Anda ingin menerapkan AMP. Saat Anda menggunakan AMP, Anda memutuskan untuk menjaga halaman web seluler Anda hampir sepenuhnya HTML. Anda harus melepaskan kode CSS/JS yang mengurangi kecepatan memuat.

Kelemahannya adalah, pengalaman pengguna (UX) terpengaruh. Misalnya, Anda tidak dapat lagi memiliki tombol ajakan bertindak (CTA) yang berputar untuk menarik perhatian pengunjung. AMP memotong kode itu, sehingga menghemat waktu buka halaman. Hal ini pada akhirnya dapat mengakibatkan penurunan tingkat keterlibatan.

Dalam daftar di atas, Anda mungkin ingin memilih untuk memiliki AMP di halaman Anda, atau posting, atau keduanya.

Desain dan presentasi

Di sini, Anda dapat Mengatur Logo Anda , ukuran yang disarankan adalah 120 x 90 piksel. Saya akan merekomendasikan untuk tidak menggunakan logo karena menambah waktu buka halaman. Jika tidak ada logo yang diperbarui pada panel ini, halaman AMP hanya akan memiliki nama situs web sebagai pengganti logo.

Opsi Skema Warna Global akan membantu Anda memilih warna untuk halaman AMP Anda yang muncul di link CTA di halaman, dan di link footer.

Misalnya, saya memilih biru muda sebagai Warna Global saya, seperti yang terlihat pada gambar di bawah.

Pelacakan analitik

Di panel opsi ini, Anda dapat mengaktifkan alat yang Anda gunakan untuk pelacakan. Misalnya, Anda dapat mengaktifkan Google Analytics dengan menambahkan ID Pelacakan. Dengan cara ini data dari halaman AMP akan diperbarui langsung di akun Google Analytics Anda.

Demikian pula, Anda dapat menambahkan beberapa alat pelacakan lain seperti yang tercantum pada gambar di atas.

Pengaturan Privasi

Bilah Pemberitahuan Cookie memungkinkan Anda untuk meminta persetujuan dari pengunjung untuk cookie yang Anda gunakan di situs web. Pada gambar di bawah, kotak dialog berwarna hitam adalah bilah pemberitahuan cookie.

Sumber Gambar – Wawasan Monster

Jika Anda atau basis audiens Anda berasal dari negara GDPR, Anda perlu mengaktifkan pengaturan untuk GDPR – Peraturan Perlindungan Data Umum.

Perlu diketahui, jika harus memilih, Anda hanya dapat memilih salah satu dari dua opsi tersebut, bukan keduanya.

Iklan

Di segmen ini, pilih di mana Anda ingin memposisikan Iklan Anda. Anda dapat menyesuaikan sesuai kebutuhan – Anda dapat memiliki Iklan yang diterbitkan di seluruh situs atau pada satu posting, atau tajuk di antara opsi lainnya.

Anda dapat memilih Jenis Iklan, Ukuran Iklan, dan Data Klien Iklan dan Slot Iklan Data dari Kode Iklan Adsense.

Kompatibilitas pihak ketiga

Entitas terakhir menangkap daftar plugin yang Anda perlukan kompatibilitas AMPnya.

Gravity Form dan Elementor untuk AMP mengharuskan Anda membayar untuk ekstensi. Data Terstruktur, Iklan untuk WP, dan PWA untuk WP adalah plugin gratis. Tiga yang terakhir akan dibahas sedikit lebih rinci nanti di posting.

Terapkan AMP Langkah 3: Lebih banyak setelan AMP

Pengaturan Umum

Tab Umum mencakup opsi yang kami bahas dalam pengaturan dasar. Selain itu, Anda dapat memilih apakah Anda ingin memiliki AMP di halaman arsip, kategori, dan tag.

Mengaktifkan opsi terakhir – Pengambilalihan AMP (Beta) – akan menyebabkan versi desktop dan seluler Anda menjadi sama. Artinya, versi desktop Anda juga akan memiliki halaman AMP.

Saya akan merekomendasikan untuk menonaktifkan opsi ini. Pemuatan halaman biasanya lebih baik di desktop daripada di seluler. Memiliki AMP di desktop berarti menukar UX dengan sedikit peningkatan dalam kecepatan Halaman. Bukan tawaran yang bagus.

Iklan

Bagian ini memiliki opsi yang sama dengan bagian Iklan di pengaturan dasar.

SEO

Jika Anda memilih untuk mengaktifkan Meta Description , teks yang Anda isi di Bagian Head akan diambil oleh Google. Ini akan berbeda dari teks yang Anda isi untuk versi desktop. Saya akan merekomendasikan untuk menonaktifkan pengaturan, dan menjaga Meta Description konsisten di kedua versi.

Tag Metadata OpenGraph adalah potongan kode yang mengontrol bagaimana URL ditampilkan saat dibagikan di media sosial. Bagian ini terlihat untuk versi desktop saat Anda mengatur Judul dan Metadata di plugin SEO Anda. Di bawah ini adalah contoh plugin Yoast SEO.

Anda dapat menemukannya dengan masuk ke bagian Editor dari setiap posting atau halaman, gulir ke bawah. Setelah Anda melihat bagian untuk Yoast, klik tab 'Social', lalu Anda dapat memilih platform media sosial pilihan.

Plugin AMP memungkinkan Anda untuk memilih plugin SEO pilihan pada panel opsi yang sama. Dalam contoh di atas, Yoast adalah plugin yang dipilih. Semua data yang Anda masukkan ke Yoast untuk versi Desktop akan disalin ke versi AMP.

Anda akan melihat opsi untuk Hapus Pengindeksan Halaman Paginasi dan Kompatibilitas Alat Inspeksi URL.

Halaman yang diberi halaman harus diindeks tetapi hanya sebagai kanonik. Saya akan merekomendasikan untuk menonaktifkan pengaturan ini.

Kompatibilitas Alat Inspeksi URL mendorong pencarian yang lebih transparan untuk Anda. Ini memberikan laporan terperinci tentang perayapan, pengindeksan, dan penyajian informasi di akun Google Search Console Anda. Saya akan merekomendasikan untuk tetap menyalakannya.

Dukungan Elemen

Opsi AMPforWP PageBuilder akan memungkinkan Anda membuat halaman individual untuk versi AMP, berbeda dari versi desktop. Ini berguna ketika Anda ingin memiliki teks atau CTA yang sedikit berbeda untuk halaman AMP.

Misalnya, jika Anda memiliki CTA 'Hubungi Kami' untuk desktop tetapi Anda lebih suka pengunjung seluler menghubungi Anda, Anda dapat mengaktifkan opsi ini dan membuat halaman terpisah.

PWA

Sesuai deskripsi AMP untuk WP Plugin – Progressive Web Apps (PWA) mengubah situs web Anda menjadi aplikasi web dan memberi pengunjung pengalaman seperti aplikasi seluler asli.

Ini adalah peningkatan desain. Mengaktifkan modul adalah masalah pilihan.

Pertunjukan

Panel Kinerja menggali lebih dalam tentang pengoptimalan kecepatan halaman.

Ini memungkinkan Anda untuk mengecilkan CSS/JS untuk mengurangi penggunaan bandwidth tanpa memengaruhi UX atau fungsionalitas. Leverage Browser Cache memungkinkan Anda mempercepat waktu buka untuk pengunjung yang kembali. Saya akan merekomendasikan untuk tetap mengaktifkan kedua opsi.

Mengaktifkan Optimize CSS akan memicu fitur goyangan pohon dari pengoptimalan CSS. Anda dapat tetap mengaktifkannya jika Anda tidak memiliki plugin lain yang sudah melakukan pekerjaan itu.

Analisis, Data Terstruktur, Bilah Pemberitahuan, dan GDPR

Bagian ini memiliki opsi yang sama seperti yang tercakup dalam pengaturan dasar.

Pemberitahuan Dorong

Jika Anda ingin mengatur pemberitahuan push, Anda dapat memilih salah satu di antara OneSignal, iZooto dan Truepush .

Dalam contoh di atas, saya telah memilih OneSignal. Namun, untuk pilihan apa pun, Anda akan melihat bagian untuk memasukkan ID APP, opsi untuk mengaktifkan pemberitahuan push untuk Halaman. Selain itu, Anda harus memilih di mana Anda ingin memposisikan notifikasi (misalnya di bagian bawah halaman), dan teks apa yang ingin Anda tampilkan.

Formulir Kontak

Ini memungkinkan Anda memilih salah satu dari 3 plugin untuk mengoptimalkan AMP – Formulir Kontak 7, Formulir Gravitasi, dan Formulir Ninja.

Ketiganya mengharuskan Anda membayar untuk perpanjangan. Jika CTA Anda berfokus terutama pada formulir, sebaiknya berinvestasi dalam ekstensi.

Komentar

Layar ini memungkinkan Anda memilih di mana Anda ingin komentar yang dibuat pengguna ditampilkan di situs web Anda. Anda juga dapat memilih sumber untuk menampilkan komentar.

Pilih pengaturan yang paling sesuai untuk Anda.

Artikel Instan

Artikel Instan adalah fitur di Aplikasi Facebook untuk pengguna seluler yang memungkinkan Anda menghosting artikel situs web Anda.

Manfaat mengaktifkan fitur ini adalah waktu buka yang lebih cepat dibandingkan dengan memiliki artikel yang sama di situs web Anda. Karena artikel dimuat dalam Aplikasi, Anda mendapatkan kecepatan memuat hingga 10 kali lebih cepat.

Namun, karena konten tetap ada di Facebook, Anda mungkin kehilangan beberapa lalu lintas situs web. Ini adalah trade-off antara kecepatan halaman dan lalu lintas situs web. Saya akan merekomendasikan untuk tidak melakukannya.

Jika Anda memilih untuk tetap mengaktifkannya, Anda akan melihat pengaturan di bawah ini.

Setelah memasukkan ID Halaman Facebook Anda, Anda dapat menyesuaikan pengaturan artikel. Pengaturan yang memerlukan penjelasan lebih lanjut adalah – Crawler Ingestion .

Saat tautan artikel Anda yang dihosting di situs web Anda dibagikan di Facebook, perayap Facebook mencari tag ia:markup_url . Jika ada, Facebook akan menyerap artikel Anda dan membuat artikel instan di halaman Facebook Anda.

Peralatan

Opsi Halaman AMP Individual memungkinkan Anda memilih apakah Anda ingin menampilkan halaman AMP secara default atau tidak. Saat Anda memilih Tampilkan secara Default , semua halaman Anda akan menampilkan versi AMP. Namun, Anda dapat memilih untuk menyembunyikan AMP untuk setiap postingan atau halaman.

Untuk melakukannya, buka halaman mana saja dan klik Edit Halaman . Di tab Pengaturan di sebelah kanan, Anda dapat menemukan opsi untuk mematikannya.

Demikian pula, Anda dapat memilih untuk Menyembunyikan versi AMP untuk kategori dan postingan yang dipilih.

Query Monitor adalah panel alat pengembang untuk WordPress. Jika Anda seorang pengembang, yang perlu melihat kueri di halaman, Anda harus tetap mengaktifkan setelan.

Pengaturan Lanjut

Panel opsi Pengaturan Lanjutan memiliki sejumlah pengaturan yang sebagian besar sudah cukup jelas.

Saya akan merekomendasikan untuk tetap mengaktifkan pengaturan default kecuali Anda adalah pengembang WP atau telah menyewa seorang ahli untuk merancang situs web Anda.

perdagangan elektronik

Jika Anda memiliki toko online, Anda dapat menyesuaikan versi AMP Anda untuk WooCommerce . Jika Anda terutama menjual aset digital, Anda dapat mengaktifkan opsi Dukungan Unduhan Digital Mudah . Kedua opsi mengharuskan Anda untuk mengaktifkan ekstensi berbayar.

Panel Terjemahan

Panel ini memungkinkan Anda memilih terjemahan yang tepat untuk kumpulan kata yang umum digunakan ke dalam bahasa pilihan Anda.

Misalnya, Anda perlu mengetikkan terjemahan untuk Lihat Versi Non-AMP yang sesuai dengan audiens Anda.

Untuk terjemahan multibahasa, Anda dapat mengaktifkan metode Terjemahan Gunakan file POT . File POT (Portable Object Template) adalah template untuk file PO. Mereka adalah file teks biasa yang berisi terjemahan. Setiap bahasa memiliki ekstensi file sendiri. Misalnya Perancis memiliki po.fr.

Terapkan AMP Langkah 4: Desain

Tema

Sama seperti untuk versi desktop situs web Anda, Anda dapat memilih tema untuk versi AMP.

Ada empat opsi gratis untuk dipilih.

• Cepat
• Desain Satu
• Desain Dua
• Dan, Desain Tiga

Selain itu, setiap halaman dan postingan memiliki bagian yang memungkinkan Anda membuat desain sendiri.

Inilah cara Anda dapat menemukannya. Buka halaman atau posting, dan klik 'Edit Halaman' di bilah alat atas. Gulir ke bawah untuk melihat layar di bawah ini.

Jika Anda memilih kotak centang Use Builder , template yang Anda buat akan ditampilkan, jika tidak, template gratis yang Anda pilih akan ditampilkan.

Jika Anda sedang membangun template Anda sendiri, Anda memiliki modul di bawah ini untuk dipilih.

Ingat, AMP pada dasarnya adalah halaman HTML. Anda tidak bisa mendapatkan banyak tombol kustomisasi atau mewah.

Harap diperhatikan: Anda harus memilih tema. Plugin membutuhkannya untuk memilih ikon dan struktur – bahkan ketika Anda membuat desain Anda sendiri. Anda dapat masuk ke detail lebih lanjut di langkah ini saat menerapkan AMP.

Global

Panel opsi ini memungkinkan Anda menyesuaikan versi AMP Anda.

Anda dapat memilih warna pilihan seperti di atas. Selain itu, Anda dapat memilih Google Font . Namun, saya akan merekomendasikan untuk tidak menggunakannya karena Google Font meningkatkan waktu buka, mengalahkan tujuan AMP.

Selanjutnya, Anda dapat memilih untuk tetap mengaktifkan Sidebar dan Infinite Scroll jika Anda ingin halaman web Anda terlihat seperti itu. Namun, dari perspektif kecepatan halaman, Anda harus tetap mematikannya.

Perpustakaan Ikon Font akan sama dengan tema yang Anda pilih di awal panel Desain.

Tajuk

Panel opsi Header, memungkinkan Anda memutuskan tata letak header Anda dan bagaimana tampilan menu navigasi Anda.

Ini juga memungkinkan Anda menambahkan Tombol Panggil Sekarang. Ini adalah tombol yang berguna untuk pengguna seluler.

Anda dapat memilih untuk menampilkan tautan Non-AMP Anda di Header. Namun, jika audiens Anda tidak berorientasi pada SEO secara teknis, mereka mungkin tidak mengklik tautan tersebut.

Anda juga dapat mengaktifkan bilah Pencarian . Ini bermanfaat jika Anda memiliki situs web blogging.

Opsi Header Tingkat Lanjut memungkinkan Anda untuk lebih spesifik dengan pengaturan bagian header Anda. Ini masalah pilihan. Namun, perlu diingat untuk tidak menambahkan kode, karena akan berdampak negatif pada kecepatan pemuatan halaman.

Beranda, Single, Footer, Halaman, Berbagi Sosial, Tanggal dan Lain-lain

Panel opsi ini, seperti halnya header, sepenuhnya merupakan masalah pilihan desain. Anda dapat memilih pengaturan yang paling sesuai untuk Anda.

Menyimpulkan

Langkah-langkah di atas akan membantu Anda menerapkan AMP secara efektif di situs web Anda. Setelah Anda menyimpan perubahan, periksa versi AMP di ponsel Anda, atau, dengan menambahkan '/ amp' setelah URL.

Gambar di bawah menangkap fitur halaman AMP Anda.

VISUAL HALAMAN AMG

KAKI

Di sana Anda memilikinya. Ikuti langkah-langkah ini untuk menerapkan AMP, dan untuk mendapatkan halaman super cepat bebas kesalahan yang dimuat dalam waktu kurang dari 2 detik untuk pengunjung ponsel.