Cara Membuat Website AMP dari Nol

Masih banyak bertanya apa itu website AMP. Tidak sedikit juga yang pesimis akan pentingnya website AMP dalam hal ranking dan SEO. Masih juga ditemukan pertanyaan mendasar bagaimana cara efektif membuat website AMP di Blogspot dan Wordpress yang tervalidasi 100% melalui AMP Test. Dan, bagaimana pula cara mempertahankan halaman website agar selalu valid statusnya sebagai halaman full AMP.

Beberap isu yang beredar mengatakan bahwa, website AMP sangat merugikan SEO dan bahkan Adsense. Selain itu, banyak juga yang mengatakan; sejak mengganti halaman websitenya ke AMP, pengunjung menurun dengan drastis dan terjadi penurunan ranking atau score SEO. Apakah benar demikian? Mari kita buktikan!

4 Bahasan Pokok Seputar Website AMP

Sesuai uraian diatas, pembahasan kali ini akan terbagi menjadi 4 bagian, yaitu:

Apa itu Website AMP? atau Apa itu Google AMP?
Apakah Website AMP Membantu Meningkatkan SEO Website dan Adsense?
Bagaimana Cara Membuat Website AMP
Bagaimana Cara Mempertahankan status AMP Selalu Tervalidasi

Pada dasarnya, keempat point diatas tidak cukup ruang dibahas sekali di halaman ini. Untuk itu, kami akan membahasnya secara garis besar, mengacu pada inti-inti saja dan saran yang efektif dan efisien sebagai komitmen kami pada anda.

Apa itu Website AMP? atau Apa itu Google AMP?

Website AMP diprakarsai dan diluncurkan oleh Google dalam proyek AMP-HTML Projects. Website AMP adalah solusi bagi segenap pemilik website untuk berlomba-lomba mendapat pengunjung website sebanyak-banyaknya dengan mengurangi setiap kelemahan website khususnya dalam hal kecepatan website di mobile version.

Dengan menggunakan website AMP, website secara instan akan loading dengan cepat karena Google sendiri yang bertindak sebagai penyimpan cache website seperti; javascript/Jquery, image/gambar-gambar, dsb. Dan, fasilitas peyimpanan cache ini gratis buat semua.

Apakah Website AMP Membantu Meningkatkan SEO Website dan Adsense?

Secara teknis, sebuah website yang telah menggunakan fitur AMP-HTML hanya berhubungan dengan Google dalam hal penyimpanan cache dan script, seperti; javascript. Penyimpanan ini justru menguntungkan pihak pemilik website karena script JS seringkali membuat speed website menjadi lambat, lelet atau lemot.

Website AMP yang tervalidasi atau lulus tes, lebih memungkinkan bersaing dengan situs lain dan salah satu strategi untuk menaikkan ranking di Google. Banyak pertanyaan yang muncul kemudian bagaimana Google AMP bisa meningkatkan ranking SEO sebuah website dan meningkatkan CTR iklan Adsense. Atau, justru sebaliknya?

Semua jelas tidak suka dengan website lelet. Saat kebutuhan informasi itu urgent dan penting dan harus cepat digunakan, tiba-tiba, website yang dikunjungi sebagai sumber informasi valid ternyata lama munculnya. User lalu memeriksa sambungan internet, kuota internet, kecepatan download dan upload serta kemungkinan ada software yang bekerja di background seperti anti virus yang membuat semua menjadi lelet. Mencoba mengakses situs web lain dan web tersebut muncul dengan cepat dan sempurna.

Dicoba situs lain juga cepat. Tapi saat mengakses website kita kenapa begitu lelet? Cek server, stabil dan masih tersisa banyak space bandwidth. Pengecekkan juga diarahkan pada sistem redirect atau kode redirect, apakah telah terjadi kesalahan dalam penulisan kode redirect, dan di coba ke hosting dan web situs lain, aman-aman dan lancar saja. Berarti permasalahan terletak di website itu sendiri.

Penyebab Website Lelet

Website lelet disebabkan oleh banyak faktor, misal; bug, database tidak dioptimasi, serangan malware, bandwidth kecil, share hosting, file image terlalu besar, file javascript atau kode JS. Kode CSS atau JS yang diakses dari luar untuk kepentingan web, Php atau mysql tidak diupdate, korup, dsb. Intinya, banyak penyebab website anda jadi lelet.

Akibat Website Lelet

Website lelet jelas berakibat buruk bagi website itu sendiri. Semakin banyak yang berkunjung dan meninggalkan website kita hanya berkisar dibawah 15 detik sampai 20 detik akan meningkatkan bounce rate. Semakin tinggi bounce rate, semakin rendah dan menurun ranking website kita di Google. Selanjutnya, akan kehilangan visitor dan bisnis anda macet besar.

Adsense dan Penghasilan pasif Online

Berubahnya halaman website dari bentuk biasa menjadi berformat AMP-HTML awalnya akan menyesuaikan diri di Google. Selanjutnya beberapa hari kemudian, web anda akan naik sendiri (ranking) - khususnya setelah Google meng-indeks semua halaman website AMP anda.

Penurunan angka penghasilan tidak pernah lepas dari masa penyesuaian ini yaitu masa amp-html dan masa mulai terindeks. Artinya, website dianggap baru oleh GOogle dan mesti diindeks ulang beserta sitemap web di Google Webmaster Tools.

Bagaimana Cara Membuat Website AMP

Bagaimana cara membuat sebuah website AMP pertama kali dari nol. Silahkan perhatikan dan download berikut ini:

Menggunakan tag "AMP" atau tanda petir dibelakang tag HTML
Meta charset
Script JS Google AMP
Title tag
Link canonical
Meta Viewport
Structure-data (opsional)
amp-boilerplate
stylesheet amp-custom

Berikut ini adalah contoh script lengkap, sederhana 1 halaman AMP.

<!DOCTYPE html> <HTML amp lang="en"> <head> <meta charset="utf-8"/> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>AMP Homepage untuk Pemula</title> <link rel="canonical" href="https://www.your_domain.com"/> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "headline": "Open-source framework for publishing content", "datePublished": "2015-10-07T12:02:41Z", "image": [ "logo.jpg" ] } </script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <h1>Selamat Datang di Website AMP Pemula</h1></body> </HTML>

Perubahan pada Tag HTML lain

Perubahan dan penambahan tidak hanya terjadi pada item2 yang telah disebutkan diatas, tapi juga di beberapa fungsi dan bentuk HTML seperti; tag <img> menjadi <amp-img>, <iframe> menjadi <amp-iframe> dan beberapa fungsi AMP lainnya seperti; amp-share, amp-form, dsb.

Akan tetapi, tidak semua digunakan dalam 1 halaman. Penggunaan fungsi dan perubahan itu berdasarkan kebutuhan website yang ingin kita bangun. Misalnya, pada saat kita ingin menambahkan slideshow pada bagian header maka kita disarankan menggunakan amp-carousel yang memang di desain oleh Google untuk membuat slide atau slideshow. Dan, sebagainya.

Bagaimana Cara Mempertahankan status AMP Selalu Tervalidasi

Tidak banyak yang harus kita lakukan dalam mempertahankan validitas AMP pada website kita. Bila semua telah sesuai dengan aturan yang telah dijabarkan diatas, kita hanya menunggu. Contoh, awalnya; penggunaan <noscript> tidaklah menimbulkan masalah dan halaman yang mengandung <noscript> masih 100% tervalidasi.

Akan tetapi, baru-baru ini ada laporan yang masuk melalui email yang berkaitan dengan akun Google Webmaster Tools bahwa halaman A mengandung script yang dilarang sehingga halaman AMP yang menggunakan script terlarang itu gagal tervalidasi. Ketika diperiksa, ternyata, penggunaan tag <noscript> sudah tidak diperbolehkan.

Kasus Error atau AMP Gagal Validasi yang Paling Sering

Kami seringkali mendapati mengapa halaman web AMP seringkali error dan gagal tervalidasi dikarenakan 3 hal. Ini yang paling sering. Ketiga hal itu adalah:

Menggunakan script JS referensi pada header tapi tidak ditemukan relevansi blok script pada bagian body/content
Tidak teliti saat merubah dari img ke amp-img
Mengandung script JS atau Javascript eksternal tanpa dibungkus oleh amp-iframe

Semoga penjelasan kali ini dapat bermanfaat, dan akan kami update seperlunya saat terjadi perubahan atau update dari pihak Google.