Tutorial Cara Membuat Web dengan AMP HTML Non Blogger

How to Create a Basic AMP HTML Page - Bagaimana cara membuat Halaman standard dengan AMP HTML. Markup dasar untuk membuat web / halaman dengan AMP HTML adalah 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>

Markup yang diperlukan


AMP HTML wajib teridiri dari beberapa markup di bawah ini :

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


NOTE : Markup tersebut saya dapatkan dari Github, tetapi ada error validasi di meta tag viewport. Solusinya dengan menambahkan user-scalable=no,minimal-ui seperti yang saya contohkan pada Markup di atas.

Menambahkan Gambar


<!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,minimum-scale=1,initial-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 everywhere",
"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>
<amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img>
</body>
</html>

Menambahkan CSS


<!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,minimum-scale=1,initial-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 everywhere",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<style amp-custom>
/* custom CSS disini; tapi ingat, body margin tidak bisa diubah */
body {
background-color: white;
}
amp-img {
background-color: gray;
}
</style>

<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img>
</body>
</html>

Page layout


Content external seperti gambar, video dll, harus menggunakan atribut height dan width untuk mendeklarasikannya. Hal ini untuk mengatasi load, agar resource tidak memberatkan.

Tidak diperkenankan menggunakan tag style pada HTML. Intinya tidak diperkenankan menggunakan inline CSS. Diperbolehkan menggunakan tag <style> hanya satu kali untuk CSS. Diperbolehkan CSS tambahan dengan menggunakan <style amp-custom>.

Test Validasi


Untuk mengetes valid atau tidaknya, harus menggunakan Chrome Development Tool atau Firefox for Developer. Kemudian pada akhir URL tambahkan "#depelopment=1" tanpa tanda kutip, kemudian Inspect Element dan lihat Web Console.

Apabila masih terdapat Error, maka akan ada pemberitahuan berapa jumlah error



Contoh yang sudah valid AMP HTML



Masih bingung dengan AMP HTML?

Comments

Popular posts from this blog

How to use Google Dork ?

Tutorial Cara Penulisan image pada AMP HTML Blogger

Pasang Google Maps Di Blog Versi AMP