Cara Setting AMP For WP (Accelerated Mobile Pages) - imsahadi.com Cara Setting AMP For WP (Accelerated Mobile Pages)
Skip to content Skip to sidebar Skip to footer

Cara Setting AMP For WP (Accelerated Mobile Pages)

Cara Setting AMP For WP (Accelerated Mobile Pages) dapat dilakukan dengan sangat mudah kalau memang sudah mengetahui langkahnya. Bagi Anda yang masih bingung tentang cara membuat halaman AMP di Wordpress ini, Anda bisa menyimak tutorial dari kami.

Mengoptimalkan kinerja loading dari situs Wordpress Anda menjadi salah satu prioritas yang sangat penting. Demi memberikan pengalaman pengguna yang lebih baik, Anda dapat membuat halaman situs Wordpress Anda valid dengan AMP.

AMP bekerja untuk meningkatkan loading halaman pada versi Mobile dengan mengurangi beberapa element yang ada. Hal ini melihat dari perkembangan pengguna yang sekarang banyak mengakses situs web dari smartphone. Tentunya melihat itu, AMP menjadi ide yang bijak untuk memenuhi kebutuhan pengguna.

Kalau Anda belum membuat situs Anda valid dengan AMP, Anda dapat memulai itu sekarang juga. Melalui postingan ini, kami akan mencoba memberikan Anda panduan sederhana tentang bagaimana Anda menjadikan situs Anda mendukung halaman AMP secara penuh.

Meski Anda tidak paham dengan kode, itu tidak perlu Anda pikirkan terlalu rumit. Intinya Anda memiliki niat bahwa Anda siap memulai pekerjaan ini. Semenjak diluncurkannya project AMP, banyak blogger yang masih belum mau mencoba peluang gratis ini. Ya, meski ada plugin AMP gratis yang bisa menjadi pilihan, para blogger masih berpikir untuk tidak mau membuat halaman AMP pada situs mereka.

Termasuk kami yang sebelumnya masih tetap pada prisip dengan memanfaatkan fitur template Wordpress yang kami beli. Tema Wordpress premium yang kami gunakan sudah mendukung fitur Mobile friendly dan sangat responsive ketika diakses dibeberapa perangkat modern. 

Maka dari itu, dari pada kami membuat halaman AMP yang terpisah, mending menggunakan fitur yang ada dari template tersebut. Tapi setelah melihat perkembangan dari AMP ini, banyak terlihat yang menduduki peringkat mesin pencari dipenuhi dengan situs yang mendukung AMP.

Dari situlah kami memutuskan untuk membuat situs kami menjadi AMP dan dengan dukungan plugin gratis. Sekarang dari pengalaman ini kami akan mencoba berbagi tips kepada Anda tentang bagaimana cara setting AMP For WP (Accelerated Mobile Pages) di Wordpress.

Tutorial membuat halaman AMP ini menggunakan plugin AMP for Wordpress dari Ahmed Kaludi. Bagi Anda yang ingin mengetahui tentang cara setting AMP di Wordpress menggunakan plugin AMP project contributors, Anda dapat menyimak tips kami dipostingan lainnya.

Kedua plugin ini memiliki peran yang sama tapi berbeda fitur maupun dukungan. Plugin AMP for WP tersedia dengan fitur gratis dan juga premium. Tapi, Anda juga dapat menggunakan plugin ini dengan versi gratis. Ketika nanti Anda tertarik untuk melakukan upgrade ke premium, itu bisa menjadi urusan belakang.

AMP for WP versi dari Ahmed Kaludi menyediakan fitur lengkap dan tentu mudah untuk disesuaikan. Anda dapat mengubah situs Wordpress Anda valid AMP dengan beberapa menit saja. Termasuk tema AMP, dan Anda dapat memilih untuk menggunakan tema mana yang Anda suka dan sesuai dengan situs Anda.

Meski ada pilihan plugin AMP gratis yang lainnya, intinya Anda sudah mengetahui mana yang terbaik yang ingin Anda pertahankan untuk situs Wordpress Anda. Cara setting AMP For WP (Accelerated Mobile Pages) di Wordpress bisa Anda mulai dengan langkah sederhana. Untuk mengetahui lebih lanjut mengenai langkah ini, Anda dapat mengikuti panduan yang akan saya jelaskan.

Berikut Cara Setting AMP For WP (Accelerated Mobile Pages) di Wordpress Dengan Benar

1. Pertama, pastikan Anda sudah login ke Dashboard Wordpess dengan username dan password yang Anda miliki. Setelah itu pada menu Plugins, Anda klik Add New. Dikolom pencarian ketikkan saja AMP, sehingga muncul plugin yang dimaksud yaitu AMP for WP (Accelerated Mobile Pages). Kemudian Install Now lalu Activate.

Cara Setting AMP For WP

2. Setelah plugin aktif maka akan masuk ke halaman Setup. Anda dapat memilih Advance Setup untuk segera masuk kemenu Settings > General > Branding seperti berikut.

Setup AMP For WP
  • Logo, upload logo untuk situs AMP Anda atau bisa menggunakan logo yang sudah ada. Resize aktifkan, Ressize Method pilih saja Flexible Width. Resize Your Logo tentukan ukuran logo Anda untuk menyesuaikan agar pas dilayar.
  • AMP Support, aktifkan Posts, Page, Homepage. Anda juga bisa memilih mengenai mana saja dari blog Anda yang akan dimuat dengan halaman AMP. Kalau Anda hanya menginginkan postingan saja, aktifkan saja posts.
  • Archives [Category & Tags], sebagai saran, aktifkan saja keduanya. Jangan lupa klik Save Changes jika semua pengaturan dihalaman Branding ini sudah selesai.

3. Selanjutnya Anda masuk ke bagian Advertisement. Dihalaman ini Anda akan menemukan beberapa konfigurasi untuk menerapkan slot iklan Anda yaitu ada 6. Aktifkan salah satunya atau dimana Anda ingin memasang iklan.

settings bagian Advertisement
  • Saya contohkan dengan mengaktifkan bagian AD #1 Below the header (SiteWide) seperti diatas.
  • Pada AD Type, Anda dapat memilih tipe dari iklan yang ingin Anda pasang di AMP. Di tutorial ini saya menggunakan Adsense.
  • Pada AD Size, tentukan ukuran iklan Anda.
  • Data AD Client, Anda tinggal memasukkan data client Adsense Anda seperti ca-pub-1234567862456703.
  • Data AD Slot, masukkan data atau kode slot dari iklan Anda tersebut seperti 1234565432.
  • Aktifkan Responsive Ad unit dan Optimize For Viewability, lalu klik Save Changes untuk menyimpan perubahan Anda.

4. SEO, Aktifkan Meta Description. Pada SEO Plugin Integration, pilih plugin SEO dari yang Anda gunakan. Kemudian, aktifkan juga URL Inspection Tool Compatibility lalu klik Save Changes.

5. Performance, Anda dapat mengoptimalkan kinerja situs AMP Anda dengan pengaturan dihalaman ini. Silahkan Anda aktifkan Minify, Laverage Browser Caching dan Optimize CSS. jika sudah lalu klik Save Changes.

6. Analytics, dihalaman ini Anda dapat mengatur kode pelacakan situs Anda pada AMP dan sudah tersedia beberapa pilihan. Kalau Anda mengunakan Google Analytics, Anda tinggal memasukkan kodenya.

  • Aktifkan Google Tag Manager,masukkan kode Anda seperti UA-12394509-2 pada kolom Tag Manager ID (Container ID). Aktifkan juga pada pilihan IP Anonymization. klik Save Changes.

7. Comments, dimana Anda ingin menampilkan komentar pada sitsu AMP Anda. Kalau memang dihalaman Posts dan Pages, Anda bisa mengaktifkannya. Tapi saya saya sarankan untuk hanya dibagian Posting saja.

  • Discussion, pada pengaturan ini Anda akan menemukan beberapa plugin komentar seperti Wordpress, Disqus atau Facebook. Anda dapat memilih dari salah satu yang Anda suka. Tapi kalau Anda suka dengan sistem komentar bawaan. Aktifkan WordPress Comments, User Avatar No follow button. Klik Save Changes jika sudah sesuai dengan selera Anda.

8. Tools, pada halaman ini, Anda akan menemukan dua pilihan dalam memulai pengaturan. Anda dapat mengecualikan beberapa Category atau Tags sesuai dengan kebutuhan Anda.

9. Advance Settings, ada banyak sekali pengaturan yang harus Anda sesuaikan. Pastikan Anda teliti untuk setiap pilihan yang ada.

  • Aktifkan Mobile Redirection dan Tablets agar situs Anda benar-benar valid dengan halaman AMP pada kedua perangkat tersebut. Aktifkan juga Search Result Page in AMP, Change Internal Link to AMP dan Category Description.
  • Aktifkan Auto Add AMP in Menu URL. Untuk yang lainnya biarkan default atau Anda dapat menambahkan. Kalau saya sendiri belum mau mengatur, sisanya biar mengikuti perkembangan nanti. Klik Save Changes kalau Anda sudah merasa ok dengan konfigurasi seperti yang telah saya sarankan.

10. Translation Panel, pada bagian ini Anda dapat mengubah kata-kata untuk setiap konfigurasi yang ada. Contoh, kata Related Posts ingin dirubah ke Artikel terkait. Begitu juga dengan beberapa diantaranya, tentunya Anda mengerti tentang mengubah kata-kata tersebut. Misalkan teksnya bahasa inggris ingin Anda rubah ke bahasa Indonesia, Anda tinggal menyesuaikannya.

11. Sekarang kita masuk ke bagian Design > Theme. Anda dapat menentukan theme untuk AMP Anda. Tapi saya sarankan untuk memilih Swift sebagai default. Terlebih lagi, tema ini gratis dan bisa Anda gunakan sementara. Kalau Anda menginginkan yang lebih bagus, Ada dapat memulai upgrade ke PRO. klik Save Changes jika sudah menentukan template AMP Anda.

menentukan template AMP

12. Global, Anda dapat mengatur Color Schema. Begitu juga dengan Fonts untuk AMP Anda. Kalau Anda menginginkan Google fonts, Anda bisa mengaktifkannya dan melakukan Verify. Saya sendiri tidak memilih untuk mengaktiflkan Fonts karena saya masih menggunakan bawaan. Ini opsional dan Anda dapat menentukan sendiri. Gulir kebawah lalu aktifkan Sidebar. Pada Custom CSS, Anda dapat menambahkan CSS khusus jika Anda menginginkannya. Klik Save Changes jika sudah.

13. Header, sekarang Anda masuk ke pengaturan header. Pada Header Type, pilih diantara yang ada dan selera Anda sendiri. Navigation Menu dan Menu Search aktifkan. Gulir kebawah lagi lalu aktifkan Search. Pada Header Design Options, Anda bisa mengubah warna background serta elements header Anda sesuai selera. Tapi, akan lebih bagus lagi menyamakan dengan template Wordpress yang Anda gunakan. Klik Save Changes jika sudah.

14. HomePage, silahkan aktifkan Excerpt dan Read More Link. Sedangkan untuk yang lainnya, biarkan saja default.

15. Single, pada pengaturan Single Design, ada dua pilihan tampilan dan Anda dapat menentukan yang pertama sebagai saran dan yang paling banyak digunakan.

  • Pada Single Elements, untuk Featured Image ini opsional sesuai kebutuhan. Anda bisa memilih aktif atau tidak. Gulir kebawah lalu aktifkan Author Name, Published Date, Breadcrumbs. Breadcrumbs Type, pilih saja Category.
  • Gulir lagi kebawah dan aktifkan Category, Tags, Next-Previus Link.
  • Author Bio aktifkan serta Author Name dan Author Image, Author Description.
  • Post Pagination aktifkan, pada pilihan Post pagination type pilih Numbering. Aktifkan Recent Post below Related, Recent post date, Image, Excerpt.
  • Aktifkan Related Posts Settings, Related Post Design pilih Vertical. Untuk Related Post by, silahkan sesuaikan pilihan Anda apakah ingin menggunakan Tags atau Category. Aktifkan juga Image kalau ingin menampilkan Related post dengan disertai gambar. jangan lupa Sort Related Posts Randomly aktifkan. Number of Related Post silahkan tentukan jumlah yang ingin ditampilkan.
  • Kalau Anda ingin menampilkan Related post didalam postingan, aktifkan In-Content Related Post.

16. Footer, pada Footer Type, biarkan saja default karena cuma satu pilihan. Untuk yang lainnya, Aktifkan Menu, Link to Non-AMP page in Footer, Back to Top Link. Klik Save Changes jika sudah.

17. Social Sharing, aktifkan saja Social Share. pada pilihan Position, tentukan dengan Single Sidebar (Left Side). Aktifkan Smart Sorting Share Buttons dan Addthis Inline Share. Pada Position, sesuaikan dengan Below Content. Aktifkan Sticky Social Sharing bar. Kemudian tentukan media sosial mana yang ingin Anda terapkan disitus AMP Anda. Jangan lupa klik Save Changes untuk menyimpan perubahan yang Anda buat.

Setelah semua cara setting AMP For WP (Accelerated Mobile Pages) sudah Anda selesaikan, Anda bisa membuka tab baru pada browser Anda. Kunjungi saja alamat https://validator.ampproject.org. Setelah halaman terbuka, Anda dapat memasukkan salah satu link postingan Anda.

  • Contoh: https://www.imsahadi.com/egnova-template-blogger-news-magazine/amp
  • Ini bertujuan untuk mem-validasi halaman AMP situs Anda apakah benar-benar sudah valid. Ketikkan saja URL postingan Anda dengan ditambahkan amp dibelakangnya. Kemudian klik VALIDATE. Jika notifikasi yang muncul adalah Validation Status: PASS, ini berarti halaman AMP situs Wordpress Anda sudah valid.
cek validator amp

Sebagai tambahan untuk memperjelas semua langkah diatas yaitu tentang Cara Setting AMP For WP (Accelerated Mobile Pages) di Wordpress, Anda juga dapat menyimak tutorial berikut.

Membuat halaman Wordpress Anda valid dengan AMP sebenarnya sangat mudah untuk dilakukan. Itu kalau Anda sudah mengetahui langkahnya. Namun dengan adanya plugin ini, Anda bisa dengan mudah membuat halaman AMP untuk situs Wordpress Anda secara cepat tanpa harus memahami coding.

Catatan: Semua konfigurasi yang saya berikan pada tutorial ini merupakan cara standar yang sudah diterapkan. Anda dapat mengubah setelan plugin AMP ini sendiri jika masih ada yang kurang.

Demikianlah cara Setting AMP For WP (Accelerated Mobile Pages) yang dapat saya berikan pada kesempatan ini. Semoga dengan tips ini, bisa membantu Anda belajar tentang AMP Wordpress.

Post a Comment for "Cara Setting AMP For WP (Accelerated Mobile Pages)"