Tutorial Implementasi dan Cara Memasang AMP di Website Anda

//Tutorial Implementasi dan Cara Memasang AMP di Website Anda
3 menit untuk membaca

Iya betul sekali, Anda saat ini akan dijelaskan cara untuk implementasi AMP di website Anda. Mungkin Anda belum tahu apa AMP dan mengapa harus memasang AMP di website Anda?

Apa dan Mengapa AMP?

AMP singkatan dari Accelerated Mobile Pages, merupakan proyek Google agar website bisa berikan pengalaman yang lebih baik bagi semua kalangan. Program ini ditujukan buat pengguna mobile. Proyek diharapkan bisa menghasilkan websita dengan performa tinggi, cepat dan konsiten di berbagai perangkat.

Dengan AMP website Anda bisa secepat kilat saat dibuka di mobile, sesuai logo dari AMP itu sendiri. Kecepatan loading hampir instan. Pengunjung website Anda tak lagi frustasi menunggu karena lamanya loading website.

Mengenali Web AMP

Di perangkat mobile Anda bisa mengenali website pengguna AMP. Ketika Anda searching di Google, website AMP akan memunculkan tanda petir.

Sumber: Gsqi

Anda juga bisa cek website berbasis AMP di alat penguji AMP milik Google. Anda bisa mengeceknya di https://search.google.com/test/amp. Caranya adalah dengan menambahkan “/amp” pada alamt URL web yang akan Anda cek. Di bawah ini contoh tampilan dari website yang sudah terimplementasi AMP.

 

Bagaimana Implementasi AMP di website Anda?

Tutorial ini dibuat untuk website berbasis WordPress.

  1. Cari Plugin AMP. Saya biasanya menggunakan plugin “AMP for WP-Accelerated Mobile Pages” karena fiturnya lebih lengkap, kustomisasinya banyak.

Install now

2. Install dan aktivasi plugin tersebut

3. Setelah Itu Masuk Ke Pengaturan Pluginsnya. Lihat Gambar Dibawah.

pengaturan amp - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
AMP Setting4. Lalukan General Setting Sesuai Panduan. Anda Bisa Upload Logo Untuk Situs AMP, Costum Size Logo Dan Settingan Post & Pages AMP.

General Setting

5. Setelah Itu, Masuk Ke Homepage Setting. Ikuti Petunjuk Seperti Gambar Dibawah.

homepage setting - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
Homepage Setting
6. Lanjutkan Ke Bagian AMP Desain. Disini, Anda Bisa Memilih 3 Skin Desain Sesuai Dengan Keinginan Kamu. Sebagai Referensi, Website Ini Menggunakan Desain Nomor 3. Anda Juga Bisa Mendesain Secara Langsung Dengan Cara Klik Launch Post Builder.
amp design - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
Amp Design
  • Launch Post Builder Bertujuan Untuk Mengatur Single Post Website Anda. Seperti Meta Info, Feature Images, Tag, Releated Post, Konten, Dan Lain Sebagainya.
  • Lanjutkan Dengan Pergi Ke Single. Disini Kamu Bisa Mengatur Fitur-Fitur Apa Saja Yang Nantinya Akan Muncul Di Single Post Website Anda.
    singlepost amp - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
    Singlepost Amp
  • Selanjutnya Untuk Mengatur Advertisement Di Situs Anda. Silahkan Isi Sesuai Dengan Akun Google Adsense Anda. Seperti Ca-Pub GA Anda Dan Data AD Slot Yang Akan Tayang Di Situs Anda Nantinya.
    Advertisement amp - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
    Advertisement Amp
  • Selanjutnya Dibagian Menu, Anda Tinggal Mengatur Menu Untuk AMP. Atau Jika Anda Menginginkan Menu Yang Sama, Anda Tinggal Lakukan Editing Di Menu Setting Seperti Gambar Dibawah Ini.
    menu setting - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
    Menu Setting
  • Dibagian Sosial, Silahkan Masukkan Url Semua Sosial Media Anda. Seperti Facebook, Twitter, Gplus Dan Lainnya. Namun Dibagian Facebook App ID, Silahkan Isi Jika Anda Ingin Menyematkan Komentar Melalui Facebook Disitus AMP Anda. Namun Jika Anda Tidak Ingin Membuat Komentar Facebook, Silahkan Kosongkan Kolom Tersebut.
    sosial amp - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
    Sosial Amp
  • Dibagian SEO Setting, Kamu Bisa Setting Sesuai Dengan Kebutuhanmu. Jika Kamu Menggunakan Yoast SEO, Kamu Tinggal Perlu On-Kan Settinggan Yoast Ke Settingan AMP Yang Kamu Gunkana.
    seo setting amp - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
    Seo Setting Amp
  • Dibagian Analytics, Masukkan Kode Pelacakan Google Analytics Anda, Lalu Save.
    analisa - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
    Analytics Amp
  • Silahkan Lanjutkan Settingan Selanjutnya Jika Kamu Rasa Perlu. Seperti Struktur Data, Kontak From AMP, Notifikasi Cokkie AMP, Comment, Dan Facebook Instant Artikel.
  • Selesai.

Sekarang Kamu Sudah Memiliki Situs WordPress Dengan AMP. Silahkan Coba Mengakses Laman Website Kamu Menggunakan Perangkat Mobile Dan Lihat Hasilnya. Lakukan Analisa Jika Diperlukan Fitur-Fitur Mana Yang Akan Kamu Tambah Atau Kurangin.

valid amp - Apa Itu AMP? (Pengertian & Step by Step Membuat Themes WordPress AMP)
Valid AMP

Lakukan Juga Trial & Eror Di Google Analytics Anda Untuk Mengetaui Sejauh Mana Peforma Situs AMP Anda. Apakah Membawa Dampak Yang Signifikan Atau Sebaliknya. Untuk Pada Devlopment, Silahkan Baca Dokumentasi Lengkap Untuk Memulai AMP Pada Situs Anda.

 

 

 

2018-07-19T08:23:36+00:00