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.

Beralih ke AMP

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.

Apa Kelebihan dan Kekurangan Menggunakan Format AMP

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;
    Cara buat blog valid AMP
  3. Setelah aktif, bakal muncul menu AMP di sisi kiri menu WordPress;
    Cara buat blog valid amp

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.

Cara Pengaturan AMP for WP - Accelerated Mobile Pages
  • 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.

Cara Pengaturan AMP for WP - Accelerated Mobile Pages
  • 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..

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

.. 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

Cara Pengaturan AMP for WP - Accelerated Mobile Pages
  • 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.

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

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

e. Performance

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

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

f. Analytics

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

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.

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

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.

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

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..

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

Aktifkan Mobile Redirection dan Change Internal Links to AMP; dan

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

.. 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.

Cara Pengaturan AMP for WP - Accelerated Mobile Pages

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.

Cara Mengatur Tampilan / Design Blog AMP

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

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

Cara Mengatur Tampilan / Design Blog AMP

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

Cara Mengatur Tampilan / Design Blog AMP

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.

Cara Mengatur Tampilan / Design AMP

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

Advanced

Tambahkan Custom CSS di bagian Advanced.

Cara Mengatur Tampilan / Design AMP

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

Cara Mengatur Tampilan / Design AMP

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.

Cara Mengatur Tampilan / Design AMP

Navigation Menu Design

Bagian ini adalah desain dari Menu itu sendiri.

Cara Mengatur Tampilan / Design AMP
  • 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..

Cara Mengatur Tampilan / Design AMP

Header Settings

Cara Mengatur Tampilan / Design AMP
  • 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;

Cara Mengatur Tampilan / Design AMP

d. Homepage

Bagian ini merupakan pengaturan di laman depan blog.

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

Cara Mengatur Tampilan / Design AMP

Kemudian aktifkan Readmore Link;

Cara Mengatur Tampilan / Design AMP

.. hingga halaman depan blog kamu menjadi seperti ini :

Cara Mengatur Tampilan / Design AMP

Sisanya abaikan saja.

e. Single

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

Single Post Design

Pilih yang ini..

Cara Mengatur Tampilan / Design AMP

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.

Cara Mengatur Tampilan / Design AMP
  • 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..

Cara Mengatur Tampilan / Design AMP

h. Social

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

Pilih Position » Single Sidebar (left side);

Cara Mengatur Tampilan / Design AMP

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

4. 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 :

Cara Mengatur Tampilan / Design AMP

Kalau berhasil, Validation Status : PASS.

5. 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.

Mengecek Pengindeksan Google AMP di Google Search Console

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

Mengecek Pengindeksan Google AMP di Google Search Console

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

Mengecek Pengindeksan Google AMP di Google Search Console

6. 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.

Mengecek Pengindeksan Google AMP di Google Search Console

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.

Mengecek Pengindeksan Google AMP di Google Search Console

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..!

niagahoster

#1 HOSTING TERBAIK INDONESIA

Diskon 40% + Domain dan SSL Gratis

Type: Shared Hosting
Upgrade: Cloud VPS
Layanan Support: 8/10
Rata-rata Uptime: 99,97%
Rata2 Page Load Time: 1,416 ms

Pilihan terbaik untuk website/blog WordPress

*Garansi 30 hari uang kembali

Host dengan Niagahoster


Langit

Pecandu IT, pencinta seni fotografi dan penikmat kopi.. :)

9 Comments
  1. Setelah lama sekali ga ada postingan akhirnya ada lagi.

    Oya mas jnengan pasang histat apa tidak?
    Bagaimana dengan penghasilan adsense?perbandingan sebelum dan sesudah pemasangan 🙂

    Makasih banyak, tutorialnya selalu luengkapp

    1. Saya ga pasang histat mas, sy pakai statistik yg diberikan JetPack aja. Utk penghasilan adsense msh blm terasa perbedaan mas.. Pengunjung bertambah tp jumlah klik msh tetap. Mgkn msh perlu optimasi penempatan iklan di sana sini

  2. Maaf mas.. coret2 d blog ini…
    gmn cara membuat menu navigasi?? Karena di saya cuma ada search, all right reserved, dan sosial media… Sy ingin menambahkan kategori…

  3. Mas mau tanya, saya sudah ikuti semua tutorial diatas dan berhasil, semua artikel saya menjadi valid AMP, iklan tayang, recent post tayang, author tayang.

    Tetapi kenapa ketika saya membuat artikel baru iklan tidak tayang, tidak ada first image, tidak ada author dan tampilan agak sedikit berbeda dengan artikel sebelumnya?

  4. Siap terimakasih mas. Oya make analytic jg app engga mas?

    Sambil menunggu tulisan yg dijanjiin berikutnya 😀🙏
    Lebih khusus tulisan optimasi iklan amp

Leave a Reply

Your email address will not be published.