Cara Membuat Blog Menjadi Valid AMP di WordPress

Cara Membuat Blog Menjadi Valid AMP di WordPress | tirailangit.com – Terhitung mulai bulan Juli 2018, ada perubahan algoritma Google mengenai pengindeksan mesin pencari dimana kecepatan situs merupakan salah satu indikasi penting dalam perangkingan situs.

Berdasarkan penelitian Google, blog dengan format AMP terbukti bisa meningkatkan CTR dan Viewability sehingga akan meningkatkan penghasilan Adsense kamu.

Hal inilah yang “memaksa” saya untuk beralih ke format AMP pada seluruh blog yang saya miliki.

.. meskipun sejujurnya, saya kurang suka dengan tampilan AMP karena theme premium yang saya miliki jadi berubah drastis.

Percuma dung yaa beli theme premium tapi tidak bisa memaksimalkan fiturnya..?

Tapi lagi-lagi kita harus mengikuti maunya Google agar blog kita mampu bersaing di mesin pencari.

Nah, pada artikel ini saya akan mengulas bagaimana cara mengubah blog konvensional menjadi format AMP.

Cara Membuat Blog Valid AMP (Laman Seluler Dipercepat) di WordPress

Sebelum cerita lebih jauh, kenali dulu apa itu AMP?

Apa itu AMP?

AMP (Accelerated Mobile Pages) adalah halaman web yang didesain khusus agar laman tersebut mobile friendly dan sangat cepat diakses melalui browser smartphone.

Salah satu project dari Google ini juga dapat memberi pengalaman bagi pengguna internet untuk kenyamanan dan kecepatan berselancar di dunia maya.

Banyak pengunjung yang mengeluh saat mengakses halaman web yang terasa lambat melalui HP. Dengan dukungan laman AMP, dapat mempercepat loading situs hingga 4 kali lebih cepat dari biasanya dan hemat data internet hingga 10 kali lipat.

Selain itu, situs dengan laman AMP dapat meningkatkan SERP pada hasil pencarian Gooogle khususnya di perangkat mobile.

Dengan AMP, penggunaan kode HTML, Javascript sangatlah terbatas sehingga Google mengijinkan konten tersimpan di Google AMP Cache.

Hal ini lah yang membuat halaman website loading lebih cepat.

Apa Kelebihan dan Kekurangan Menggunakan Format AMP?

Kelebihan Menggunakan AMP :

• Meningkatkan pengalaman pengguna HP yang memiliki koneksi internet lemot, pengguna tetap bisa mengakses halaman web dengan cepat;
• Meningkatkan peringkat di hasil pencarian Google;
• Google AMP menjadikan blog terasa ringan karena hanya menggunakan kode HTML, JavaScript, dan CSS yang terbatas;

Ini statistik salah satu blog saya yang telah saya terapkan AMP, terlihat ada kenaikan trafik setelah 1 bulan saya menggunakannya.

Kekurangan Menggunakan AMP :

• Karena keterbatasan kode HTML, JavaScript dan CSS yang digunakan, kamu tidak bisa menambah widget dan fitur tertentu ke blog AMP;
• Membatasi kemampuan blog untuk menampilkan pop-up form email, slider dan facebook box serta script dinamis lainnya;
• Google AMP hanya mendukung Google Analytics, tidak platform analisis lainnya;
• Pilihan platform iklan yang terbatas;
• Sebagian pengguna mengatakan ada potensi kehilangan trafik beberapa saat dan sulit untuk kembali ke halaman konvensional.

Bagaimana Cara Membuat Blog Mendukung Valid AMP?

Agar situs mendukung tampilan AMP, ada beberapa aturan khusus yang harus diterapkan. Tapi jangan khawatir, ada cara mudah untuk mengubah format blog menjadi AMP tanpa perlu mempelajari coding-coding yang buat pusing.

Ada beberapa plugin yang bisa digunakan untuk pemasangan AMP di blog WordPress, diantaranya :

1. AMP for WordPress; dan
2. AMP for WP – Accelerated Mobile Pages.

Saya telah mencoba keduanya, manakah yang lebih powerful?

.. adalah AMP for WP – Accelerated Mobile Pages by Ahmed Kaludi, Mohammed Kaludi.

Jadi pada artikel ini saya hanya membahas cara membuat blog AMP dengan AMP for WP – Accelerated Mobile Pages.

1. Cara Memasang AMP for WP – Accelerated Mobile Pages

Langkah pertama, pasang plugin tersebut :

1. Plugin » Add New;
2. Cari plugin AMP for WP – Accelerated Mobile Pages;

   

3. Setelah aktif, bakal muncul menu AMP di sisi kiri menu WordPress;

   

Sampai tahap ini, pemasangan plugin AMP telah selesai.

2. Cara Pengaturan AMP for WP – Accelerated Mobile Pages

Silahkan masuk ke Settings;

Pada bagian ini kamu akan menemukan :

• General;
• Page Builder;
• Advertisement;
• SEO;
• PWA;
• Performance;
• Analytics;
• Structured Data;
• Notice Bar & GDPR;
• Push Notifications;
• Contact Form;
• Comments;
• Instant Articles;
• Hide AMP Bulk Tools;
• Advance Settings;
• Commerce;
• Translation Panel;

a. General

Branding

Pada bagian ini kamu bisa memasukkan logo blog dan menentukan jenis postingan apa yang akan didukung oleh AMP.

• Logo » pilih logo blog kamu;
• Resize » Aktifkan;
• Resize Method » Flexible Width;
• Resize Your Logo » sesuaikan dengan ukuran logo yang kamu inginkan.

AMP Support

Pada bagian ini, tentukan artikel dan bagian apa saja yang akan didukung oleh AMP.

• Aktifkan » Posts, Pages, Homepage, Archieves [Category & Tags];

.. sisanya abaikan saja.

b. Page Builder

Pada bagian Page Builder, kamu bisa membuat sendiri tampilan laman depan dari blog kamu atau biasa disebut juga landing page.

Lihat video tutorialnya di bawah ini :

Saya sendiri masih belum menggunakan fitur ini karena kurang cocok untuk jenis blog yang saya miliki.

Landing page lebih cocok untuk website atau jenis blog yang statis, bukan dinamis.

c. Advertisement

Advertisement Positions

Bagian Advertisement adalah fitur yang disediakan untuk meletakkan iklan adsense di blog kamu.

Pada bagian ini saya hanya mengaktifkan AD #6 (Above the Related Posts (Single Post)) saja karena sisanya saya menggunakan plugin Ad Inserter.

AD #6 berfungsi untuk meletakkan iklan di atas Related Posts atau Artikel Terkait. Hal yang tidak bisa dilakukan Ad Inserter untuk iklan berjenis AMP.

Untuk memasang iklan Adsense caranya cukup mudah, tinggal aktifkan saja pada slot AD yang kamu inginkan..

.. kemudian pada bagian :

• Ad Size » tentukan ukuran dari iklan Adsense;
• Data AD Client » masukkan ID dari Google Adsense kamu;
• Data AD Slot » masukkan kode slot dari iklan Adsense yang kamu inginkan;
• Responsive Ad Unit » sebaiknya aktifkan agar iklan kamu menjadi responsif.

Data AD Client dan Data AD Slot bisa didapat dari kode iklan Adsense :

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-281585xxxxxxxxxx"
data-ad-slot="8256250467"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ad Performance

• Aktifkan » Optimize For Viewability agar iklan loading lebih cepat.

d. SEO

SEO Plugin Integration

Pilih SEO Plugin yang kamu gunakan apakah Yoast atau All ini One SEO, sisanya plugin AMP ini akan menyesuaikan yang terbaik untuk kamu.

Jangan lupa aktifkan juga URL Inspection Tool Compatibility pada bagian Advanced Indexing.

e. Performance

Aktifkan Minify pada bagian Performance Enhancement untuk meningkatkan kecepatan loading situs.

f. Analytics

Aktifkan Google Analytics dan isi Tracking ID sesuai ID dari Google Analytics milik blog kamu.

Tracking ID bisa didapatkan dari script Tracking Code Google Analytics.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-5274xxxx-x"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

Selanjutnya aktifkan juga IP Anonymization.

g. Contact Form

AMP for WP – Accelerated Mobile Pages sudah mendukung Contact Form 7, tapi fitur ini tidak gratis, kamu harus menebusnya dengan harga $39,99.

Gimana kalau tidak ingin berbayar?

Tetap menggunakan Contact Form 7 tapi form hanya bisa diakses melalui laman konvensional bukan AMP.

Saya sendiri tidak mengaktifkan fitur ini karena harganya yang mahal dan masih belum sebanding dengan manfaat yang saya dapatkan. Contact Form di halaman konvensional masih dirasa cukup.

h. Comments

Pada bagian Comments, kamu bisa menentukan pada bagian apa saja kolom komentar dimunculkan.

Biasanya saya hanya mengaktifkan kolom komentar pada bagian Posts saja (artikel) sementara Pages saya nonaktifkan.

Pada bagian Discussion, tentukan kolom komentar apa saja yang aktif.

AMP for WP – Accelerated Mobile Pages menyediakan kolom komentar untuk :

• WordPress Comments;
• Disqus;
• Facebook Comments;
• Vuukle Comments; dan
• Spot.IM Conversation.

Blog kamu akan berubah menjadi blog konvensional (bukan AMP) pada saat pengunjung memberikan komentar, kecuali kamu menggunakan fitur premium (berbayar) dari plugin ini.

i. Advance Settings

Advance Settings merupakan pengaturan lanjutan dari plugin ini, jadi sebaiknya hati-hati saat menggunakannya.

Kalau kamu ingin blog kamu benar-benar full AMP saat diakses melalui perangkat mobile, ikuti pengaturan ini..

Aktifkan Mobile Redirection dan Change Internal Links to AMP; dan

.. aktifkan juga Auto Add AMP in Menu URL.

Pengaturan ini akan membuat seluruh link di blog kamu menjadi /amp saat diakses melalui HP sehingga pengunjung akan selalu disuguhkan blog dengan format AMP.

j. Translation Panel

Sesuai namanya, bagian ini adalah bagian untuk menerjemahkan Error 404, Related Posts, Show more Posts dan lainnya ke bahasa Indonesia sesuai keinginan kamu.

Kalau tidak paham artinya ya silahkan Google Translate.

3. Cara Mengatur Tampilan / Design Blog AMP

Mengatur tampilan berada pada menu Design.

Pada Design kamu akan menemukan :

• Themes;
• Global;
• Header;
• Homepage;
• Single;
• Footer;
• Page;
• Social;
• Date; dan
• Misc.

a. Themes

Pada bagian ini kamu bisa memilih themes dan layout dari blog AMP kamu.

Saya merekomendasikan untuk menggunakan Swift, tampilannya lebih menarik dan dinamis.

Kalau ingin versi Pro (berbayar), scroll ke bawah dan kamu akan menemukan themes premium.

b. Global

Pada bagian Global, kamu bisa menentukan jenis Font yang kamu inginkan atau abaikan saja jika kamu suka dengan font bawaan dari plugin AMP ini.

Selain Font, kamu juga bisa menambah Custom CSS di sini.

Color Scheme & Typography

Saya menggunakan jenis font Poppins milik Google jadi saya harus melakukan verifikasi terlebih dahulu di Google Font API key.

General

Aktifkan Sidebar sementara Homepage Sidebar tetap nonaktif.

Mengaktifkan Homepage Sidebar membuat tampilan depan blog terlihat miring ke kiri sehingga tampak jelek.

Advanced

Tambahkan Custom CSS di bagian Advanced.

Contohnya saya menambahkan CSS Baca Juga seperti pada artikel ini agar border pada artikel terkait ini muncul di halaman AMP saya seperti ini :

c. Header

Pada bagian Header, tentukan design Header, Menu dan Header Settings di sini.

Header Design

Pilih Header Type sesuai keinginan kamu, di sini diberikan 3 opsi.

Navigation Menu Design

Bagian ini adalah desain dari Menu itu sendiri.

• Menu Type » hanya ada 1 pilihan, kamu tidak bisa memilih bentuk lain;
• Menu Search » aktifkan kalau kamu ingin memunculkan kolom pencarian di Menu;
• Menu Copyright » aktifkan untuk memunculkan Copyright di Menu ;
• Alternative Menu » untuk menampilkan menu alternatif, saya memilih menonaktifkan fitur ini.

Ini dia maksudnya Alternative Menu..

Header Settings

• Call Now Button » menampilkan icon telepon agar pengunjung blog dapat melakukan panggilan ke nomor telepon ke nomor yang telah kamu tentukan;
• Non-AMP link in Header » mengaktifkan fitur ini artinya membuat semua link pada Header menjadi versi non-AMP, artinya saat pengunjung blog mengklik Home / Beranda, maka pengunjung akan diarahkan ke halaman non-AMP;
• Search » memunculkan kolom pencairan di Header;
• Sticky Header » membuat header menjadi melayang atau menggantung.

Ini dia maksudnya Call Now Button;

d. Homepage

Bagian ini merupakan pengaturan di laman depan blog.

Aktifkan Excerpt untuk menampilkan kutipan atau paragraf awal dari setiap artikel.;

Kemudian aktifkan Readmore Link;

.. hingga halaman depan blog kamu menjadi seperti ini :

Sisanya abaikan saja.

e. Single

Di sini kamu bisa mendesain tampilan pada setiap artikel yang tayang..

Single Post Design

Pilih yang ini..

Single Elements

• Featured Image » noaktifkan atau sesuai selera;
• Published Date » aktifkan;
• Lightbox for Images » nonaktifkan;
• Dropcap » nonaktifkan;
• Breadcumb » aktifkan, pilih Breadcumb Type » Category;
• Tags » aktifkan;
• Categories and Tags Links » nonaktifkan;
• Sticky Social Icons » aktifkan;
• Excerpt » nonaktifkan;
• Next-Previous Links » aktifkan
• Author Name » aktfikan atau sesuai selera;
• Author Bio » aktfikan atau sesuai selera;
• Post Pagination » aktifkan, Post Pagination Type » Numbering.

Related Post Settings

• Related Post » aktifkan
• Related Post Design » pilih VERTICAL
• Related Post by » pilih sesuai selera, Tags atau Categories. Saya sendiri memilih berdasarkan Tags;
• Image » nonaktifkan atau sesuai keinginan kamu;
• Excerpt » aktifkan;
• Link to Non-AMP » nonaktifkan;
• Sort Related Post Randomly » sebaiknya aktifkan;
• Number of Related Post » 4 atau sesuai selera;
• By X Last Day » nonaktifkan;
• In Content Related Post » aktifkan kalau kamu ingin menampilkan artikel terkait ditengah-tengah artikel.

f. Footer

Bagian ini untuk mengatur desain dari footer.

• Menu » aktifkan;
• Link to Non-AMP page in Footer » aktifkan;
• Back to Top link » aktifkan;
• Make “View Non-AMP” link nofollow » nonaktifkan.

g. Page

Nonaktifkan seluruhnya..

h. Social

Bagian ini untuk menampilkan tombol sharing ke sosial media yang kamu inginkan.

Pilih Position » Single Sidebar (left side);

.. sisanya, aktifkan sharing media sosial yang kamu inginkan.

Cara Menguji Apakah Blog Sudah Valid AMP

Setelah AMP terpasang di blog, coba uji apakah blog kamu sudah valid AMP.

Buka link berikut :

https://validator.ampproject.org/;

Selanjutnya salin dan tempel salah satu link artikel di blog kamu ditambahin dengan /amp/ sehingga linknya menjadi seperti ini :

https://www.namadomain/permalink-artikel/amp/

Seperti ini contohnya :

Kalau berhasil, Validation Status : PASS.

Mengecek Pengindeksan Google AMP di Google Search Console

Setelah blog kamu sukses menggunakan format AMP, tunggu sekitar 2-3 hari sampai robot Google merayapi blog kamu kembali.

Artikel yang telah terindeks sebagai AMP akan muncul pada laman Search Appearance » Accelerated Mobile Pages di Google Search Console.

Sementara bagi pengguna New Search Console, link artikel yang telah terindeks akan muncul pada laman AMP seperti ini..

Setiap laman yang telah terindeks sebagai AMP, akan muncul logo petir di hasil pencarian Google via HP seperti ini..

Menambahkan Plugin Glue for Yoast SEO & AMP

Jika sudah menggunakan Yoast SEO, sebaiknya install plugin “Glue for Yoast SEO & AMP“.

Glue for Yoast SEO & AMP adalah plugin add-on untuk Yoast SEO dan AMP plugin.

Setelah aktivasi, buka halaman SEO » AMP untuk mengkonfigurasi pengaturan plugin ini.

Plugin ini memungkinkan kamu untuk mengaktifkan dukungan AMP untuk jenis posting lainnya.

Pada tab desain, kamu dapat memilih warna dan pilihan desain. Kamu juga dapat mengunggah logo dan gambar Header standar yang akan digunakan saat posting tidak memiliki fitur gambar sendiri.

Selanjutnya beralih ke tab Analytics untuk menambahkan ID Google Analytics kamu.

Setelah selesai, jangan lupa untuk mengklik tombol Save Changes untuk menyimpan perubahan yang telah kamu lakukan.

Sampai tahap ini, membuat blog kamu mendukung Google AMP telah selesai. Pada artikel selanjutnya saya akan ngebahas bagaimana cara memasang iklan Adsense pada blog AMP.

Demikian Cara Membuat Blog Menjadi Valid AMP di WordPress.

Semoga bermanfaat..!