Tidak tahu cara memulainya? Dalam tutorial ini, Anda akan mempelajari cara membuat halaman AMP HTML, cara menggelarnya, dan memvalidasi bahwa halaman tersebut sesuai dengan AMP, dan terakhir cara menyiapkannya untuk dipublikasikan dan didistribusikan.
Sebelum Memulai membuat halaman AMP. Untuk titik awal bisa anda perhatikan script hmtl dibawah 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,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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
Untuk Membuat Halaman AMP jangan lupa untuk menambahkan script dibawah ini kedalam project AMP anda letakan didalam tag <head><script async src="https://cdn.ampproject.org/v0.js"></script>
Dan jangan lupa juga menambahkan Script CSS dibawah ini kedalam tag <head> silakan copas css dibawah ini kedalam project anda
<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>
Tambahkan juga LD-JSON Kedalam Project AMP anda letakan kedalam tag <head><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>
Dan tambahkan juga meta dan link dibawah ini kedalam Tag <head> <link rel="canonical" href="http://example.ampproject.org/project-amp-saya.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">Untuk link jangan lupa menambahkan rel="canonical"
Untuk Membuat costum css dengan style jangan untuk menambahkan <style amp-costum> seperti dibawah ini :
<style amp-custom>
h1{
color: red
}
</style>
Diatas adalah sedikit penjelasa cara Membuat Halaman AMP HTML Pertama untuk tutorial lengkap bisa juga langsung menuju link dibawah ini :AMP PROJECT
Posting Komentar
Posting Komentar