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 :
AMP HTML wajib teridiri dari beberapa markup di bawah ini :
Content external seperti gambar, video dll, harus menggunakan atribut
Tidak diperkenankan menggunakan tag
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?
<!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
Post a Comment