Peralihan atau perkembangan teknologi dalam dunia web berkembang begitu cepat dibanding ranah IT bidang lainnya. Dulu para designer dan developer web sering dianjurkan untuk menerapkan konsep web responsive, sekarang sudah muncul teknologi baru, yaitu : Accelerated Mobile Pages (AMP) HTML.
Apa itu AMP ?
AMP merupakan project open source yang dirancang untuk membantu web publisherdalam mengoptimalkan konten pada perangkat mobile. Sehingga halaman web yang mengandung konten seperti: video, animasi dan graphic dapat diload dengan cepat bersama dengan smart ads.
Dalam membangun konten yang kaya akan fitur-fitur, sering kita menggunakan banyak library. Katakanlah kita dapat membuat Carousel dengan menggunakan : Bootstrap Carousel, Owl Carousel atau WowSlider. Nah di dalam AMP, penggunaan librari-librari dari pihak ketiga tidak diizinkan karena akan menambah waktu dalam loading.
Karena kita tidak diizinkan secara langsung menggunakan librari pihak ketiga, maka sebagai konsekuensinya telah disediah beberapa fitur-fitur yang dapat kita gunakan dalam website kita, seperti: membuat image lightbox, menambah video youtube dan lain-lain. Fitur-fitur yang didukung dan dapat digunakan dalam web AMP HTML dapat dilihat pada : Komponen-kompone AMP HTML.
Kenapa muncul teknologi AMP ?
Saat ini kebanyakan orang mengakses informasi dari sebuah website menggunakan Smarphone dan Tablet . Otomatis para publisher web juga membuat rangcangan web yang responsive terhadap suatu perangkat mobile dan juga berpikir bagaimana design web-nya tidak terlalu lama diload pada perangkat smartphone.Disatu sisi ingin menciptakan halaman web yang kaya akan fitur-fitur, namun juga harus mempertimbangkan faktor loading pada smartphone atau tablet. Hal ini kadang-kadang dua hal yang saling bertolak belakang. Jika dipaksakan, publisher atau media kehilangan banyak pembaca dan berkurangnya penghasilan publisher. Dikarenakan karena waktu muat halaman web lebih lama sehingga pembaca meninggalkan web tersebut.
Untuk mengantisipasi proses loading pada perangkat mobile seperti di Smartphone ataupun Tablet, maka diinisialisasilah sebuah project open source oleh Google yang diberinama AMP HTML. Dengan demikian publisher dapat membangun website yang lebih ringan namun tetap kaya akan fitur-fitur yang membuat webiste tersebut tetap charming.
Bagaimana Membuat Web AMP HTML
Untuk membuat website yang mengikuti aturan-aturan AMP HTML, silahkan ikuti petunjuk-petunjuk yang terdapat pada AMP Project. Halam AMP HTML secara sederhana seperti script dibawa ini :<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical" href="hello-world.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello World!</body>
</html>Hal yang wajib adanya dalam AMP HTML adalah :
- dimulai dengan doctype <!doctype html>
- mengandung top-level tag <html ⚡> atau <html amp>
- Menyertakan <link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui versi AMP HTML
- Terdapat penulisan <meta charset="utf-8">.
- Tuliskan script berikut pada tag head <meta name="viewport" content="width=device-width,minimum-scale=1">.
- Terdapatnya AMP Javascript Library <script async src="https://cdn.ampproject.org/v0.js"></script> pada tag head.
Untuk penambahan komponen-komponen lain harus menyesuaikan dengan komponen yang didukung oleh AMP HTML, agar dapat menghasilkan website yang valid AMP. Komponen-komponen tersebut dapat ditemukan di : Komponen-kompone AMP HTML.
Free Template AMP Blogstpot
Bagi para blogger yang menginginkan template yang telah mengadopsi teknologi AMP, ada beberapa blogger yang telah menyediakan template yang dapat didownload secara gratis, diantaranya adalah :- AMP HTML Blogger Template, merupakan free template amp blogspot besutan kang ismet.
- Kompi AMP Blogger, merupakan free template amp blogspot besutan kang Adhy.
- MDCamp AMP HTML Blogger Template, merupakan besutan dari blog.lagioke.net
- AMP News, merupakan besutan juga dari blog.lagioke.net
- VLETTERS AMP BLOGGER TEMPLATES yang merupakan besutan dari author Themeindie
- Blanterdeamp Free AMP HTML Blogger Template, merupakan besutan template dari blog dunia blanter.
- DroidBuzz AMP HTML, merupakan kreasi dari blog iwanberbagi
- Gabengamp template blogger AMP HTML,merupakan template blogspot AMP pada akhir tahun 2016 .
- Siniladom Free AMP Blogspot Template, merupakan template pengembangan dari template "Lonjurnal".
Bagaimana mengetahui template valid AMP
Untuk megetahui apakah sebuah template sudah mengikuti ketentuan-ketentuan AMP atau kita katakan valid AMP, maka kita dapat menggunakan beberapa tool untuk membuktikan valid AMP HTML, yaitu :- Tambahkan tool AMP Validator pada browser anda dengan cara klik Get More Extension pada Chrome, lalu search AMP Validator, kemudian tambahkan ekstension tersebut pada browser chrome.
- Menggunakan AMP Test - Google Search Console, merupakan suatu console untuk mengvalidasi langsung sebuah halaman web apakah valid AMP atau tidak
- Validator AMPProject, merupakan layanan online untuk dapat mengverifikasi valid AMP baik dengan menyertakan source code maupun url saja.
Ketika anda akan menghosting sebuah website, yang perlu diingat bahwa alamat atau url website anda harus memiliki https bukan http untuk mendapatkan valid AMP HTML.
Apakah AMP ada kaitannya dengan SEO ?
Banyak yang mengatakan hingga saat ini AMP bukanlah faktor utama yang mempengaruhi perangkingan di google search.Menurut CIO, AMP dapat secara tidak langsung mempengaruhi di mana Google menempatkan halaman dalam hasil pencarian. Jika AMP mendapat lebih banyak klik dan lebih sedikit bouncing karena lebih cepat dalam hal loading, Google menentukan bahwa halaman tersebut berharga untuk pengguna, dan kemungkinan untuk mendapatkan penempatan yang lebih tinggi dalam hasil pencarian.
Jadi disini kita menyimpulkan bahwa tidak ada salahnya menggunakan template AMP, karena memang rendering yang cepat mengakibatkan loadingnya juga cepat. Kita sebagai end user lebih memilih website yang cepat. Dibandingkan website yang lama loading, langsung diclose maka akan menambah bouncing dan otomatis dianggap website tersebut tidak menyajikan user experience yang menarik.