Perkenalan AMP, AMP adalah singkatan dari Accelerated Mobile Pages atau halaman seluler yang dipercepat. AMP merupakan suatu cara yang digunakan untuk membuat halaman website menjadi ringan dan lebih cepat. AMP ini dikhususkan untuk perangkat seluler atau Mobile device.
Bahasa Pemrograman ini diperkenalkan dan dikembangkan oleh google. Banyak yang berpendapat jika website diakses melalui halaman AMP maka peningkatan kecepatannya bisa mencapai 85%. untuk WordPress sendiri telah memiliki plugin yang dapat digunakan untuk membuat teknologin AMP dapat digunakan di CMS tersebut.
2 kelebihan yang ditawarkan oleh AMP jika suatu website menggunakan bahasa pemrograman ini yaitu
- Performa tinggi
- Flexibel
- SEO Friendly
AMP juga sekarang telah dikembangkan oleh banyak pihak, banyak website-website besar yang telah menggunakan bahasa pemrograman ini seperti wordpress, wompmobile. tentu saja hal ini sangat berpengaruh terhadap user experience ketika mengunjungi website anda.
HALAMAN AMP
untuk bahasa pemrogramannya pun AMP tetap mengadaptasi bahasa pemrograman web yaitu HTML walaupun ada beberapa tag yang berubah dan terdapat aturan-aturan penulisan lainnya. berikut ini contoh halaman AMP.
<!doctype html>
<html amp lang="en">
<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">
<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 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>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>pada contoh halaman amp diatas akan dijelaskan mengenai tag-tag yang wajib digunakan di halaman HTML AMP
MARK-UP STANDAR AMP
berikut ini adalah rule atau aturan yang wajib diikuti berupa penulisan HTML amp yang digunakan.
<!doctype html> //selalu digunakan untuk memulai dokument HTML
<html amp> //Digunakan untuk Identitas halaman AMP
<head> dan <body> //tag HTML yang wajib digunakan di AMP
<meta charset="utf-8"> //Meta ditulis setelah head // sebagai identifikasi encoding Page
<script async src="https://cdn.ampproject.org/v0.js"></script> //AMP js posisi setelah tag meta
<link rel="canonical" href="$SOME_URL"> // diwajibkan selalu terdapat link canonical atau page bukan AMP
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> //dibuat didalam tag <head> yang digunakan untuk menampilkan halaman agar lebih responsive
selanjutkan kita akan belajar bagaimana cara membuat sebuah halaman AMP yang memenuhi standar penulisannya.
demikian perkenalan AMP yang singkat ini. semoga bermanfaat dan sampai jumpa diartikel berikutnya.