Tedi Eka

Tag: AMP

  • Kelebihan dan Kekurangan Blog dengan Template AMP (Based on experience)

    Kelebihan dan Kekurangan Blog dengan Template AMP (Based on experience)

    Kelebihan dan kekurangan dari template blog AMP, Itulah yang akan saya bahas pada artikel ini. Meskipun fitur AMP (Accelerated Mobile Pages) sudah diluncurkan oleh google dari tahun 2016 lalu, namun masih banyak kegalauan dihati para blogger untuk memutuskan apakah harus mengganti template blognya dengan template valid AMP atau tidak.

    Pertanyaan tentang perlukah menggunakan template AMP?
    Apa saja kelebihan dan kekurangannya apabila menggunakan template AMP?

    Pertanyaan itu semua yang menjadikan saya bimbang dulu. Kalau saya sendiri ditanya perlukah menggunakan template AMP? Jawaban saya perlu! apabila pengunjung dominan dari perangkat mobile, sedangkan apabila pengunjung seimbang atau lebih banyak dari desktop tidak usah ganti. Meskipun sekarang jamannya mobile pertimbangkan matang-matang untuk siap mengedit semua postingan apabila mengganti ke AMP. Apabila sudah yakin silahkan ganti dengan template yang valid amp.

    Kemudian terkait kelebihan dan kekurangan yang dimiliki oleh blog AMP, berikut beberapa kelebihan dan kekurangannya yang pernah saya rasakan selama menggunakan template AMP.

    A. Kelebihan Blog yang Menggunakan Template AMP:

    1. Tampilan blog tetap terload seperti halaman asli meskipun jaringan buruk

    Meskipun blog dibuka mengggunakan jaringan lemah akan tetap terload sesuai alamat url yang asli bukan melalui googleweblight sehingga halaman web akan tampil sempurna tanpa rusak. Seperti yang kita ketahui biasanya halaman blog non amp apabila diakses dengan jaringan yang tidak memadai akan dialihkan ke halaman googleweblight. Namun hal ini tidak terjadi apabila halaman blog sudah valid AMP. Inilah salah satu kelebihan yang paling oke dari fitur AMP.

    2. Loading halaman instan

    Kelebihan blog yang valid amp kedua adalah kecepatan akses yang semakin didepan. Loading halaman yang instan sehingga pengalaman pengguna akan tetap terjaga meskipun jarigan buruk. Memang fitur ini dikhususkan untuk pengguna mobile jadi wajarlah kalau akses via mobile yang diutamakan.

    Bagaimana bisa amp membuat halaman blog menjadi lebih cepat?

    Salah satu komitmen fitur AMP adalah memastikan konten di blog kita diakses lebih cepat. Blog dengan fitur amp akan meminimalisir penggunaan css, html dan terutama javascript sehingga waktu pemuatan halaman akan menjadi lebih sedikit. Selain itu halaman blog amp akan menyimpan cache blog, kemudian akan dimuat kembali sehingga browser tidak perlu lagi mengunduh berulang kali untuk mengakses halaman blog.

    3. Meningkatkan pengunjung dan mengurangi bounch rate blog

    Bagaimana caranya?

    Kelebihan amp yang lain adalah meningkatkan pengunjung blog dan menurunkan bounch rate. Seperti yang kita tahu bounch rate (rasio pentalan pengunjung) sangat bergantung pada kecepatan sebuah web atau blog. Semakin cepat akses blog tersebut maka bounch rate semakin kecil dan otomatis pengunjung akan semakin betah menjelajah di blog kita.

    Kalau ada dua artikel dengan judul yang sama antara blog amp dan bukan, tentu pengunjung akan memilih blog yang loadingnya lebih cepat yaitu amp. Oleh karena itu secara perlahan pengunjung akan bertambah. Terlebih lagi untuk blog yang pengunjungnya lebih banyak dari perangkat mobile. Tentu kehadiran template valid amp ini sangat berpengaruh.

    4. Menaikkan peringkat blog/website

    Kelebihan menggunakan template amp selanjutnya adalah bisa menaikkan peringkat blog! Banyak factor yang mempengaruhi peringkat sebuah blog atau web di mesin pencari, salah satunya adalah kecepatan aksesnya. Bagi pengguna template blog valid amp tentu hal ini sudah otomatis teratasi. Dengan menggunakan template amp loading blog akan semakin cepat, sehingga hal ini akan menjadi nilai tambah dalam penentuan peringkat di mesin pencari daripada yang non amp.

    Peluang kamu untuk mendapatkan peringkat lebih besar jika menggunakan amp. Karena blog sangat responsive dan loading super kenceng.

    5. Index blog semakin tinggi

    Pengalaman yang mengesankan selama saya menggunakan template AMP adalah meningkatnya status indekx google terhadap blog saya. Page index dan struktur template terindeks dengan sangat cepat dan terus naik. Saya lupa screen shoot status page index google terhadap blog saya saat menggunakan template AMP, yang jelas lebih tinggi dari saat saya menggunakan template biasa. Silahkan kamu buktikan sendiri.

    6. Menggunakan template AMP memberikan kepuasan tersendiri

    Selain beberapa kelebihan yang saya sebutkan di atas, kelebihan yang lain yang saya rasakan adalah saya mempunyai kepuasan tersendiri dalam menggunakan template amp. Terlebih lagi apabila blog valid amp secara keseluruhan dari postingaan, gambar dasn sebagainya. Pasti terasa puas dan semangat untuk ngeblog tumbuh lagi. Wajarlah amp kan masih baru, ibarat orang yang baru dibelikan barang baru pasti rasanya demen banget. Terlebih lagi kalau barangnya sempurna tidak ada cacat.

    Meskipun template amp memiliki banyak kelebihan, tetap saja ada kekurangannya. Namun kekurangan ini tidak seberapa dibandingkan kelebihannya. Berikut beberapa kekurangan yang dimiliki oleh template amp menurut saya.

    B. Kekurangan Blog yang Menggunakan Template AMP

    1. Penggunaanya masih sangat ribet untuk pemula terutama platform blogger

    Css dalam amp berbeda dengan template biasa. Pemasangan kode javascript juga berbeda, upload gambar postingan, penggunaan style penulisan artikel dan lain-lain. Jadi untuk pemula minimal paham letak kode karena kebanyakan serba harus manual. Kebanyakan main kode beda dengan template non amp yang tersedia pengaturannya tinggal klik. Itu untuk blogger, tapi apabila menggunakan wordpress tinggal pasang plugin amp beres sudah valid amp blognya.

    Namun jangan khawatir, semua sudah tersedia panduannya baik di blog para master amp seperti kompiajaib dan di situs pengembangnya yaitu amp project. Hanya perlu mempelajarinya secara perlahan. Awalnya memang susah tapi lama kelamaan akan terbiasa juga.

    Baca juga: Cara Mudah Membuat Tabel Postingan Valid AMP

    2. Tidak support google pagespeed [Sekarang sudah support]

    Mungkin kamu heran apabila menggunakan template amp, kemudian mengecek skor speednya di pagespeed. Hasilnya kuning! Jangan heran karena tools tersebut belum support amp. Apabila kamu ingin mengecek kecepatan loading halaman blog amp lebih baik gunakan gtmetrix aja. Itu hanya kekurangan sedikit, mungkin nantui kedepannya akan suportt amp.

    3. Banyak terjadi error apabila diterapkan pada blog lama yang sebelumnya menggunakan template non amp.

    Saya dulu pernah mengganti blog ini dengan template amp. Meskipun saya sudah tahu akan banyak terjadi error, saya tetap teguh menggantinya dan harus mengedit postingan satu persatu yang jumlahnya 100an lebih. Kemudian saya mengantinya lagi ke non amp dan harus mengedit postingan lagi. Kurang kerjaan kan? Haha

    Tapi berkat kurang kerjaan itu saya menjadi tahu tentang dunia amp. Saran saya kalau ingin menggunakan template amp gunakan untuk membangun blog yang baru saja atau blog yang mempunyai sedikit postingan supaya tidak capek ngeditnya.

    Cukup itu saja kelebihan dan kekurangan yang saya rasakan selama menggunakan template amp. Terkait masalah yang lain seperti penghasilan bertambah atau justru menurun, saya juga belum tahu. Karena saya menggunakan template amp sebelum keterima adsense. Alasan saya pribadi mengganti template amp ke nonamp adalah karena adsense juga. Mungkin apabila ingin membuat blog baru saya akan memilih template amp lagi.

    Mungkin ada kelebihan dan kekurangan blog AMP yang lain yang belum saya sebutkan, silahkan mari berbagi diklom komentar! Semoga bermanfaat.

  • Cara Setting Plugin AMP for WP di WordPress

    Cara Setting Plugin AMP for WP di WordPress

    Mungkin Anda sudah tidak asing lagi dengan plugin AMP for WP. Plugin ini adalah plugin AMP terbaik untuk saat ini. Namun ternyata masih banyak yang belum tahu bagaimana cara setting plugin AMP for WP yang benar.

    Tentang plugin AMP For WP

    AMP for WP – Accelerated Mobile Pages adalah salah satu plugin pertama wordpress yang mendukung teknologi AMP. Plugin ini bukan keluaran dari google. Plugin ini dikembangkan oleh Ahmed dan Muhammed Kaludi. Meskipun teknologi AMP sendiri adalah iniasi dari google, namun plugin ini bisa dikatakan lebih baik dari plugin AMP official dari google (saat ini).

    Baca juga: Kelebihan dan kekurangan blog AMP

    Apa saja fungsi Plugin AMP For WP

    Hampir semua fungsi AMP didukung oleh plugin ini. Bahkan kita tidak perlu susah payah untuk membuat sebuah website bisa valid AMP. Cukup aktifkan plugin ini maka otomatis webiste Anda akan valid amp. Beberapa fungsi utama plugin ini adalah:

    1. Valid AMP untuk semua halaman baik homepage, post, page, archives dll
    2. Kompatible dengan plugin Yoast, Rank Math, All in One dan plugin seo lainnya.
    3. Pilihan tema yang menarik
    4. AMP Page Builder
    5. Support page builder lain seperti Divi, Elementor dll
    6. AMP ads Advanced
    7. AMP cache
    8. Sudah support AMP Optimizer
    9. dll

    AMP for WP ini ada dua versi yaitu versi premium dan free. Jika Anda berlangganan versi premium maka Anda akan mendapatkan lebih banyak lagi fitur AMP yang menarik.

    Apa bedanya dengan plugin AMP lain?

    Perbedaan mendasar yang saya rasakan adalah tampilan temanya. Di plugin AMP for WP, kita bisa mengatur sendiri desain tema yang digunakan. Tidak seperti plugin official AMP dari google, yang hanya memberikan tema default sangat sederhana.

    Untuk lebih lengkapnya, berikut saya rangkum beberapa kelebihan dan kekurangan dari dua plugin amp tersebut.

    Plugin AMP Official

    Kelebihannya sangat mudah digunakan, Anda hanya perlu mengaktifkan pluginnya maka halaman website akan langsung valid AMP.

    Sedangkan kekurangannya, Anda tidak memilik banyak kendali atas tampilan website AMPnya.

    Sebagai contoh coba lihat gambar dibawah ini. Ini adalah pengaturan tampilan yang ada di plugin AMP official. Sangat sederhana! Anda hanya bisa mengatur warna header, link dan pilihan dark atau light.

    Plugin AMP for WP

    Beda halnya dengan AMP official, jika menggunakan plugin AMP for WP kita bisa bebas mengatur tampilan website versi AMPnya. Mulai dari tema, warna, posisi dll. Tersedia juga fitur untuk menyisipkan iklan, kode analytic, dan redirect otomatis ke amp.

    Untuk kekurangannya saya belum bisa pastikan. Bisa dibilang hampir tidak ada. Karena plugin ini sudah menyediakan hampir semua hal yang dibutuhkan tentang AMP.

    Ini adalah salah satu contoh pengaturan dari segi desain yang bisa Anda lakukan.

    Coba perhatikan mulai dari header hingga footer halaman blog Anda bisa disesuaikan dengan plugin ini.

    Cara setting plugin amp for wp yang benar

    Sebenarnya cara setting AMP for WP ini tidaklah sulit. Di website resminya juga tersedia panduannya secara detail. Namun jika Anda malas membuka satu persatu panduannya, silahkan ikuti panduan detailnya berikut ini.

    Install Plugin AMP for WP

    1. Silahkan install pluginnya melalui dashboard wordpress. Masuk ke menu Plugin > Add New > cari AMP for WP – Accelerated Mobile Pages for WordPress. Kemudian install.
    2. Setelah terinstall klik Settings seperti pada gambar berikut.
      Setting amp for wp

    Menu Setup

    Cara setting plugin AMP for WP
    • Website type: saya memilih blog karena jenis website saya blog. Sesuaikan dengan jenis web Anda apakah Blog, News, Ecommerce atau yang lainnya.
    • Where do you need AMP: Saya memilih mengakitfkan di semua halaman wordpres seperti Home, Post, Page, Archives (sesuai selera).
    • Design and Presentation: Silahkan upload logo Anda ukuran 120×90 dan tentukan warna dominan web (theme-color).
    • Analytic Tracking: Masukkan kode tracking google analytic. Contoh UA-XXXXX-X
    • Privacy Settings: Saya pilih off, karena target blog saya Indonesia jadi tidak masalah. Jika Anda mengelola blog bule, silahkan diaktifkan.
    • Advertisement: Lewati terlebih dahulu, kita akan mengaturnya nanti melalui menu Settings.
    • 3rd Party Compatibility: Jika Anda sudah menggunakan plugin yoast, rank math atau yang lainnya. Silahkan pilih plugin tersebut. Abaikan struktur data pada daftar recommended plugin. Karena kita akan mengambil struktur data dari plugin SEO yang sudah ada

    Menu Settings

    Mulai dari sini cara setting plugin AMP for WP akan saya jelaskan apa yang menurut saya penting saja. Jadi nanti ada beberapa hal yang tidak saya jelaskan. Silahkan Anda tanyakan di komentar jika mengalami kesulitan.

    1. General

    Silahkan Anda upload logo blog ukuran 190×36 px. Kemudian aktifkan pilihan Resize dan geser bar resize logo seperti gambar di bawah ini. Hal ini untuk mengatasi error serve image with low resolution di bagian Best Practices lighthouse pada logo blog.

    resize logo AMP

    2. Advertisement

    Ada 6 pilihan yang bisa digunakan yaitu iklan bawah header, bawah footer, atas artikel, bawah artikel, bawah judul, dan atas postingan terkait. Aktifkan juga pilihan Optimize For Viewability untuk mempercepat loading iklan.

    3. SEO

    Aktifkan meta description dan open graph meta tags. Kemudian pada bagian seo plugin integration saya pilih Yoast, karena saya menggunakan yoast. Lebih jelasnya seperti gambar ini.

    Perhatikan juga bagian Advanced Indexing pada pilihan Remove Paginated Pages Indexing. Silahkan nonaktifkan pilihan ini jika halaman artikel web dibagi kedalam beberapa halaman (seperti halaman web tribunnews).

    4. Page Builder

    Ini adalah builder yang digunakan untuk mempermudah kita membuat desain blog AMP tanpa menyentuh kode. Saya sendiri tidak membutuhkan ini, karena menurut saya tema AMP yang disediakan sudah mencukupi.

    Kecuali jika ingin membuat web full AMP dengan template custom, saya akan sangat merekomendasikan untuk mengaktifkan fitur ini.

    5. PWA

    Progressive Web Apps (PWA) adalah teknologi yang membuat situs menjadi aplikasi web dan memberikan pengalaman seperti aplikasi seluler asli kepada pengguna. Ini adalah fitur yang sangat bermanfaat untuk diaktifkan jika web Anda adalah ecommerce.

    Tapi jika hanya blog artikel biasa, fitur ini tidak akan banyak bermanfaat. Karena pengunjung pasti tidak akan mau menginstall aplikasi web tersebut. Tujuan mereka hanya mendapatkan informasi secepat mungkin.

    Alasan lain saya tidak mengaktifkan fitur ini adalah karena akan menurunkan performance (kecepatan) website meskipun tidak terlalu besar. Jadi daripada mengorbankan performance web untuk fitur yang sedikit manfaat, saya lebih memilih menonaktifkannya. Semua itu tergantung lagi pada pilihan Anda!

    6. Performance

    Dibagian performance enhancement saya aktifkan semua supaya loading web versi amp lebih cepat.

    7. Analytics

    Sesuaikan pengaturannya seperti gambar. Kemudian masukkan lagi kode tracking js (UA-XXXXXX-X) ke dalam kode json seperti gambar berikut.

    Google analytic amp

    8. Structured Data

    Untuk struktur data halaman post, saya menggunakan BlogPosting karena tipe web saya adalah Blog, sedangkan untuk yang lain menggunakan WebPage.

    Apakah bisa menggunakan struktur data Article? Bisa, tidak masalah! Article adalah struktur data umum.

    Struktur data

    Upload juga gambar untuk default post image dan video. Hal ini sebagai cadangan jika artikel Anda tidak menyertakan gambar sama sekali.

    9. Notice Bar & GDPR

    Silahkan aktifkan Notice Bar jika Anda ingin menampilkan notifikasi cookie kepada pengunjung. Aktifkan juga GDPR (General Data Protection Regulation) apabila pengunjung web ada yang berasal dari negara EEA (European Economic Area).

    10. Push Notification

    Aktifkan jika web Anda menggunakan push notification baik itu one signal, iZooto, dan Truepush.

    11. Contact Form

    Aktifkan apabila web menggunakan Contact Form 7, Gravity Form atau Ninja Form agar valid AMP. Setelah diaktifkan akan muncul petunjuk selanjutnya. Silahkan ikuti hingga konfigurasi selesai.

    12. Comment

    Plugin AMP fro WP support komentar WordPress, Disqus, Facebook, Vuukle dan Spot.IM. Saya sendiri lebih suka menggunakan komentar WordPress, karena bisa terindeks mesin pencari google dan masuk ke dalam struktur data isi komennya.

    Kenapa tidak menggunakan komentar Disqus ? WordPress kan rawan spam?

    WordPress juga bisa aman dari spam kok, bahkan tanpa menggunakan plugin. Contohnya adalah blog saya ini.

    13. Instant Article dan Tools

    Saya biarkan default karena memang tidak saya gunakan.

    14. Advance Setting

    Bagian paling penting adalah aktifkan Mobile Direction agar pengunjung dari smartphone bisa dialihkan ke versi AMP (supaya akses blog lebih cepat). Kemudian aktifkan juga Search result Page in AMP agar hasil pencarian versi mobile di google yang muncul adalah versi AMP.

    Untuk lebih lengkapnya silahkan lihat gambar berikut.

    Advanced-setting-amp-for-wp

    Terakhir jika Anda mengaktifkan pilihan Remove Category Base di plugin SEO. Misal url kategori yang semulanya domain.com/category/namakategori menjadi domain.com/namakategori. Maka pada bagian advanced settings AMP for WP harus diaktifkan pilihan Auto Add AMP in Menu URL dan Category base remove in AMP.

    Oiya sebagai informasi tambahan, sekarang di plugin AMPforWP versi 1.0.77.7 sudah support AMP Optimizer (SSR). Fitur ini bisa meningkatkan performa web AMP khususnya masalah LCP.

    AMP Optimizer (SSR)

    Menu Design

    Pada bagian menu Design kita hanya perlu mengaktifkan dan menonaktifkan pilihannya saja. Karena setiap orang punya selera desain berbeda-beda, maka saya tidak akan memberikan tutorialnya disini.

    Namun ada bagian menarik di menu Desain plugin AMP ini. Yaitu kita bisa memasukkan css custom untuk merubah tampilan web AMP. Fitur ini ada di bagian Global > Advance. Silahkan coba masukkan css yang Anda inginkan di kotak yang sudah disediakan seperti gambar berikut.

    Custom css AMP for WP

    Apa bedanya AMP for WP versi gratis dan premium?

    Sebenarnya yang versi gratis saja sudah cukup jika hanya untuk membuat halaman web valid AMP dengan tampilan yang lumayan oke. Namun untuk menikmati beberapa fitur lainnya yang lebih kompleks, kita harus membelinya secara premium.

    Berikut beberapa fitur yang ada di plugin AMP for WP versi premium

    1. Advanced AMP ads: Fitur ini memungkinkan kita untuk menempatkan iklan dimana saja pada halaman AMP. Versi free juga ada slot untuk iklan tapi sangat terbatas.
    2. AMP cache: Layanan cache khusus yang bisa meningkatkan kecepatan halaman AMP.
    3. Support elementor dan Divi: Buat kamu yang menggunakan page builder tidak usah khawatir jika menggunakan AMP premium. Karena AMP for WP sudah support dengan page builder ini. Jadi desain template yang Anda buat di elementor maupun divi akan sama dengan versi AMPnya.
    4. Support Woocommerce
    5. Mendapatkan pilihan tema AMP yang lebih banyak.
    6. Support komentar, pop up dll.

    Untuk lebih lengkapnya tetang fitur AMP for WP premium silahkan baca pada link berikut: https://ampforwp.com/membership/

    Berapa harga versi premiumnya?

    Untuk penggunaan personal harganya $149. Ini adalah harga yang paling murah. Masih mahal ya?

    Okelah jika Anda ingin mencoba versi premiumnya dan ingin harga yang lebih murah kamu dapat membelinya di tedieka.com hanya dengan harga 150ribu 80ribu pertahun atau 150ribu untuk lifetime..

    *Saya tahu tidak semua orang familiar dengan plugin AMP for WP. Oleh karena itu saya tidak hanya menginstall pluginnya, tetapi saya juga akan membantu secara gratis jika mengalami masalah dalam penggunaan plugin ini.

    Apakah licensi nya asli?

    Tentu saja asli, karena nanti anda akan melihat sendiri licensinya seperti gambar berikut.

    Licensi amp for wp

    Jika ingin mencobanya silahkan hubungi saya melalui kontak yang ada pada blog ini. Saya akan dengan senang hati membantu Anda jika mengalami kesulitan dalam penggunaanya.

    Apakah ada perubahan setelah menggunakan AMP for WP?

    Perubahan setiap blog mungkin berbeda-beda ya, hanya saja selama saya menggunakan plugin ini sekitar seminggu justru cenderung lebih baik. Silahkan lihat gambar grafik berikut ini.

    Setelah menggunakan AMP

    Demikian tutorial cara setting plugin AMP for WP semoga bermanfaat.