Header Ads

Mengenal Accelerated Mobile Pages HTML (AMP)

Kita ketahui bersama bahwa Google diawal tahun telah meluncurkan Laman Seluler yang Dipercepat pada hasil pencarian ponsel. Ini terlihat pada halaman Google Webmaster Tool di menu Tampilan Penelusuran > Laman Selular yang diPercepat. Yang jika laman blog anda sesuai dengan AMP maka laporan AMP menampilkan jumlah laman AMP anda yang berhasil diindeks atau kesalahan laman terkait laman AMP yang ditemukan saat Google merayapi situs Anda.

Pada artikel ini saya akan berbagi informasi lebih lanjut memberikan gambaran untuk kita semua untuk bagaimana memulai dengan AMP ini.


Template AMP blogger ready

Apa itu AMP?

Jika merujuk dari Laman Google Webmaster Tool, defenisi dari AMP adalah Accelerated Mobile Pages atau Seluler yang Dipercepat adalah prakarsa sumber terbuka untuk menyediakan laman web yang dimuat dengan cepat dan terlihat bagus di perangkat seluler, meski di jaringan yang lambat. Yang dalam penerapannya adalah dalam struktur web akan meminimalisir penggunaan JavaScript, CSS dan HTML.

Bagaimana AMP bisa bekerja?
Kerangka untuk membuat halaman web mobile, AMP terdiri dari tiga bagian dasar:
  1. AMP HTML: Subset dari HTML, bahasa markup ini memiliki beberapa kustom tag. Jika Anda sudah familiar dengan HTML biasa, anda seharusnya tidak memiliki kesulitan beradaptasi laman yang ada ke AMP HTML.
  2. Contoh penggunaannya <html ⚡> atau <html amp> di perbolehkan.
  3. AMP JS: Adalah merupakan kerangka kerja JavaScript (AMP Javascript Library) untuk halaman mobile. Fungsinya adalah web dapat dirender dengan cepat. Secara khusus merender sumber daya seperti laman, video, gambar, iframe  bersifat asynchronous. Perlu dicatat bahwa JavaScript eksternal tidak diperbolehkan dengan AMP. penggunaan tag AMP ditempat pada elemen terakhir padakode </head>.
  4. Contoh penerapannya: <script async src="https://cdn.ampproject.org/v0.js"></script>
  5. Google AMP Cache (optionally): adalah jaringan berbasis pengiriman konten untuk memberikan semua dokumen AMP.sehingga meningkatkan performa halaman secara otomatis. Bila menggunakan Google AMP Cache, maka semua dokumen seperti file .JS dan  gambar akan terload dari asal yang sama yang menggunakan HTTP 2.0, namun ini hanya sifatnya opsional saja. 

Untuk penerapan dasar pada HTML bisa terlihat seperti dibawah 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>

Pada penulisan di struktur HTML akan mengalami perubahan, seperti tag ad, embed, img, pixel, audio dan video akan berubah menjadi amp-ad, amp-embed, amp-img, amp-pixel, amp-audio dan amp-video. Sementara untuk CSS sepertinya tidak ada perubahan.

Sebagai contoh penggunaan salah satu markup tambahan diatas terlihat seperti dibawah ini, kode dibawah ini adalah penggunaan gambar untuk halaman:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Sehingga jika menanamkan didalam CSS selector akan terlihat kode seperti dibawah :
amp-img {
  background-color: grey;
}

Untuk memasukan sumber audio pada laman anda, maka menggunakan element amp-audio. Kode ini harus ditempatkan di bawah kode :
<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

Bagaimana mengetahui bahwa website sudah mendukung AMP?
Jika kita telah menggunakan Google Webmaster Tool maka disana akan terlihat/mendeteksi laman blog versi AMP, Dan pada dasarnya sebuah tag canonical sebuah halaman AMP akan terlihat seperti dibawah ini :
<link rel="amphtml" href="http://www.example.com/blog-post/amp/">

Dibawah ini adalah video demo Accelerated Mobile Pages di hasil pencarian :


Demikian sekelumit informasi dari artikel Mengenal Accelerated Mobile Pages HTML, dengan kesimpulan bahwa dengan menggunakan AMP adalah merupakan cara yang relatif mudah untuk meningkatkan kecepatan situs web seluler untuk penerbit. Mari kita belajar bersama-sama..

Referensi :
1. Google Webmaster Tool
2. AMP Project
3. Google Inside Search


No comments

Powered by Blogger.