AMP adalah halaman website yang di desain khusus agar halaman website tersebut mobile friendly, meskipun website tersebut sudah mobile friendly dengan AMP akan lebih diminimalkan lagi, maka load website tersebut akan lebih cepat. AMP adalah salah satu project google yang memberikan kenyamanan dan kecepatan berselancar di internet hingga 4x lebih cepat dan dapat menghemat penggunaan quota data Anda.
Dilansir dari website penyedia AMP https://www.ampproject.org/id/ ada aturan wajib yang harus diikuti oleh developer dalam penggunaan AMP tersebut
- Mulai dengan tipe dokumen
<!doctype html>
- Berisi tag
<html >
tingkat atas<html amp>
( juga berterima). - Berisi tag
<head>
dan<body>
(Keduanya opsional dalam HTML). - Berisi tag
<link rel="canonical" href="$SOME_URL" />
dalam bagian kepala yang menunjuk pada versi HTML reguler dari dokumen AMP HTML atau menunjuk pada dirinya sendiri jika tidak ada versi HTML seperti itu. - Berisi tag
<meta charset="utf-8">
sebagai anak pertama dari tag kepalanya. - Berisi tag
<meta name="viewport" content="width=device-width,minimum-scale=1">
di dalam tag kepalanya. Juga disarankan untuk menyertakan initial-scale=1. - Berisi tag
<script async src="https://cdn.ampproject.org/v0.js"></script>
sebagai elemen terakhir dalam kepalanya (ini mencakup dan memuat pustaka AMP JS). - Berisi yang berikut dalam tag
<head>
<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>
Pada aturan diatas adalah aturan jika Anda akan membuat halaman AMP secara programming manual, pada cms tertentu misalkan wordpress. Anda tinggal melakukan instalasi plugin AMP kemudian konfigurasikan sesuai dengan ketentuan plugin tersebut.
Biasanya, ada perubahan permalink pada halaman website yang memiliki AMP tersebut, contohnya website rhiel ID ini, kami coba mengintegrasikan dengan AMP jika dicoba melalui browser, maka permalinknya akan ada penambahan /amp
contohnya: https://rhiel.id/membuat-account-google-dengan-mudah/amp/
https://rhiel.id/membuat-account-google-dengan-mudah/amp/
dan biasanya pada halaman yang sudah teritegrasi dengan AMP, terdapat tombol untuk merubah kembali tampilan mobile biasanya (original version). Ujicoba dilakukan pada website rhiel.id sendiri dan terbukti setelah menggunakan AMP loading halaman sangat cepat tanpa harus menunggu waktu loading yang lama, hanya sepersekian detik. Ada yang menanyakan, apakah support google adsense? Sudah tentu support dari saran google adsense sendiri, sangat diperlukan adanya perbaikan performansi loading website, dan iklan yang tampil pada versi AMP lebih efisien dan cepat.
Pada google webmaster (google search console) tersedia menu untuk pengecekan AMP, google akan menilai website Anda apakah sudah memenuhi aturan dan sudah terintegrasi dengan AMP? Jika belum silahkan gunakan engine AMP tersebut dan mulailah integrasikan dengan website Anda. Jika sudah, akan menjadi nilai tambah bagi Website Anda dalam ranking pencarian dalam google search.
Bagaimana? penasaran dengan AMP (Accelerated Web Pages)?
Selamat berekplorasi sobat :)
_rhiel_
referensi : www.ampproject.org