Mengenal Accelerated Mobile Pages HTML (AMP), 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, meskipun di jaringan yang lambat. Yang dalam penerapannya adalah dalam struktur web akan meminimalisir penggunaan JavaScript, CSS dan HTML.AMP didirikan atas dasar meningkatan pengalaman pengguna khususnya publisher sehingga dapat membuat konten maksimal dengan dukungan optimasi performa mobile smartphone. Saat ini proyek AMP sudah di dukung sepenuhnya oleh Google. Google merilis proyek Accelerated Mobile Pages pada bulan Oktober 2015 dan bersifat open source sehingga bisa digunakan oleh semua orang dengan gratis.
Namun, Google menegaskan bahwa ini bukan sesuatu yang dapat menentukan peringkat untuk sebuah situs. Mesikipun demikian, Google akan memberikan label AMP (tanda bulat petir) pada situs yang menggunakan AMP sehingga pembaca akan lebih mudah memilih situs mana yang cepat diakses dengan perangkat mobile-nya.
Secara logika, jika situs dengan AMP dapat dimuat dengan cepat dengan perangkat mobile, maka akan lebih cepat lagi jika diakses dengan perangkat desktop, Maka tak menutup kemungkinan pengunjung akan beralih ke website yang terintegrasikan dengan AMP tersebut.
Struktur template Valid AMP HTML
Seperti yang telah dijelaskan oleh Kang Ismet, bahwa 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.Hal-hal yang wajib dalam AMP HTML sebagai berikut :
- 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.
Contoh HTML dasar dari AMP HTML :
<!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>Yang harus diperhatikan dalam membuat web berbasis AMP HTML, 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
imgtapi harusamp-img
Refrensi : http://blog.kangismet.net/2015/11/mengenal-accelerated-mobile-pages-amp.html