[Riset] Rules untuk Membuat Halaman Accelerated Mobile Pages (AMP) — Part 2

Published in

Aisy Rozsidhy

3 min readApr 14, 2018

Nah dari kelebihan AMP yang dijelaskan saya melakukan riset sebelumnya, bagaimana membuat AMP page? Nah sebelum memulai, AMP page sendiri memiliki syarat yang harus dipatuhi untuk bisa memenuhi standar AMP, untuk memulai bisa saja membuka link dari website resmi AMP, dan perlu diketahui bahwa AMP memiliki beberapa rules yang perlu di penuhi agar bisa dapat di validasi.

yang jelas AMP page ini menggunakan bahasa markup HTML, namun sebelum itu kita akan memulai dengan simple script yang sudah terpasang AMP dengan menggunakan HTML seperti dibawah ini :

Jika di perhatikan terdapat perbedaan di dalam Script tersebut dengan HTML umumnya tepatnya di bagian Markup, nah di dalam markup-markup khusus tersebut itulah aturan yang wajib di implementasikan untuk memenuhi beberapa syarat AMP yang harus dipenuhi :

Dimulai dengan menambahkan :

<!doctype html>

Tag HTML, harus ditambahkan “amp” atau icon tanda petir, paling mudah dan rekomendasi sih menggunakan “amp”

//hmtl secara umum
<html lang="en">//amp
<html ⚡ lang="en">//alternatif lain
<html amp lang="en">

Wajib menggunakan tag “<head>” dan “<body>”:

<html amp>
  <head></head>
  <bod></body>
</html>

Ada tag “<meta charset=”utf-8">” sebagai first child di head, sebagai pengenalan encoding menggunakan utf-8 pada halaman AMP (lihat script diatas) :

<head>
  <meta charset="utf-8">
</head>

Ada tag “<script async src=”https://cdn.ampproject.org/v0.js"></script>” sebagai anak kedua yang digunakan untuk memanggil library javascript AMP (lihat script diatas) :

<head>
  <meta charset="utf-8">
  <script async src=”https://cdn.ampproject.org/v0.js"></script></head>

Ada tag “<link rel=”canonical” href=”$SOME_URL”>” pada child header yang digunakan untuk merujuk ke halaman asli apabila halaman AMP tersebut tidak ada.

<head>
  <meta charset="utf-8">
  <script async src=”https://cdn.ampproject.org/v0.js"></script> 
  <title>Hello, AMPs</title>
  <link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
</head>

Ada tag “<meta name=”viewport” content=”width=device-width,minimum-scale=1">” pada child tag header, yang digunakan untuk mengatur agar AMP itu adalah mobile(ya karena emang di khususkan buat mobile).

<head>
  <meta charset="utf-8">
  <script async src=”https://cdn.ampproject.org/v0.js"></script> 
  <title>Hello, AMPs</title>
  <link rel="canonical" href="http://example.ampproject.org/article- metadata.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>

Menggunakan AMP boilerplate sebagai child tag header, AMP boilerplate ini berfungsi untuk menyembunyikan konten hingga AMP js berhasil ter-load, dengan cara :

<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>

Menggunakan internal Stylesheet CSS dengan tag “<style amp-custom></style>” pada child tag header,karena AMP fokus pada satu page maka bisa menggunakan :

<style amp-custom>

/* isi css */

</style>

Menggunakan Image bawaan AMP dengan tag “<amp-img></amp>”, untuk menggantikan tag “<img>” :

<amp-img src="mountains.jpg"></amp-img>

Yosh!, itu saja Rules yang perlu kalian ikuti, jika kalian mengikuti rules tersebut, maka tidak akan mengalami masalah kok dalam membuat AMP page. Karena seperti yang saya sebutkan sebelumnya, kalau AMP page memiliki cara sendiri untuk mempercepat konten Web saat pertama kali load.
Sampai jumpa di tutorial berikutnya.

[Riset] Rules untuk Membuat Halaman Accelerated Mobile Pages (AMP) — Part 2

Written by Aisy Muhammad Rozsidhy