Mengenal Accelerated Mobile Pages (AMP) HTML

November 16, 2015
Advertisemen
Pernah dengar Accelerated Mobile Pages? Sebulan kebelakang Google meliris projek baru yaitu AMP HTML. AMP HTML atau Accelerated Mobile Pages HTML adalah struktur web yang meminimalisir penggunaan JavaScript, CSS dan HTML. Visi dari AMP HTML adalah agar webmaster bisa merancang halaman web yang loading cepat, tanpa banyak pengaruh JS atau lainnya. AMPHTML memprioritaskan pengguna Web Mobile.

Untuk CSS tidak ada perubahan apapun, untuk HTML ada sedikit struktur berbeda dalam penulisan, diantaranya seperti tag img atau video menjadi amp-img dan amp-video.

Untuk render cepat, kita harus menggunakan AMP Javascript Library yang akan merender halaman dan menampilkan video, gambar, iframe dan lainnya dengan asynchronous. Hal yang wajib adanya dalam AMP HTML adalah :

  • Dimulai dengan <!doctype html>
  • Menyertakan <html ⚡> atau <html amp>.
  • Menyertakan <link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui versi AMP HTML.
  • Menyertakan <meta charset="utf-8">.
  • Menyertakan <meta name="viewport" content="width=device-width,minimum-scale=1">pada tag head.
  • Menyertakan AMP Javascript Library <script async src="https://cdn.ampproject.org/v0.js"></script> pada tag head.
  • Menyertakan <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript> pada tag head.

Maka contoh HTML dasar dari AMP HTML kurang lebih seperti ini :

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
    <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>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Beberapa hal yang harus diperhatikan


Dalam membuat web berbasis AMP HTML, selain hal di atas ada beberapa hal yang harus diperhatikan diantaranya :

  • Tidak boleh ada dua tag <style>, apabila ada penambahan maka gunakan <style amp-custom>, itupun hanya satu saja yang diizinkan.
  • Tidak boleh membuat inline CSS seperti <aside class='sidebar' style='margin-top:0;padding:10px'>.
  • Script harus external dan menggunakan async.
  • Script tidak diperbolehkan menggunakan attribute type='text/javascript'
  • Seperti di atas, tidak boleh menggunakan tag img tapi harus amp-img

Itu yang saya ingat, nanti saya tambahkan apabila ada aturan-aturan lain yang belum tertulis.

Bisakah Blogspot menggunakan AMP HTML?


Bisa. Dengan susah payah saya mencoba membuat blogspot berbasis AMP HTML dan akhirnya berhasil. Untuk tutorial lebih jauh penggunaan AMP HTML ini, saya akan coba jelaskan di blog yang sudah saya buat dengan basis AMP HTML.

Kunjungi : amphtmlproject.blogspot.co.id untuk official site, sobat bisa kunjungi ampproject.org

Masih bingung dengan AMP HTML? Kita sama-sama belajar yu sob...
Advertisemen

Add Comments

Disqus Comments