Untuk script yang bersifat opsional seperti CSS dan lain-lain tidak disertakan, karena memang di bagian CSS untuk AMP tidak ada perbedaan sama sekali, penggunaannya masih tetap seperti biasa kecuali untuk elemen HTML ada sedikit perubahan yaitu tag
img menjadi amp-img dan video menjadi amp-video, khusus untuk video dari youtube menggunakan tag amp-youtube.Sepintas Tentang AMP HTML Google
Untuk lebih jelasnya apa itu AMP Google Anda dapat merujuk ke artikel pada halaman Cara Kerja AMP GoogleDalam penulisan web untuk AMP Google ada beberapa elemen wajib disertakan sebagai berikut:
- Dimulai dengan
<!doctype html> - Untuk tag HTML menggunakan
<html ⚡>atau<html amp> - Harus menyertakan link kanonik ke AMP Google
<link rel="canonical" href="$SOME_URL" />, agar Google dan teknologi lain mendukung AMP dapat mendeteksi versi AMP dari artikel Anda. Link kanonik ini juga berfungsi untuk mencegah terjadinya duplikasi meta tag baik untuk judul ataupun deskripsi. - Menyertakan meta data schema.org
<meta charset="utf-8">dan<meta name="viewport" content="width=device-width,minimum-scale=1">pada tag head, untuk membuat artikel Anda layak tampil di search carousel Google - Menyertakan AMP JS
<script async src="https://cdn.ampproject.org/v0.js"></script>berfungsi untuk kecepatan loading dalam merender halaman guna menampilkan video, image dan iframe - Menyertakan
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
Aturan dasar penulisan kode AMP HTML
Disarankan membaca Cara Membuat Halaman AMP Compatible pada halaman artikel blog ini sebelumnya.- Untuk script external hanya dibolehkan dengan menggunakan asynchronous yaitu
async. - Hanya boleh menggunakan satu buah tag
<style>, apabila ada penambahan maka gunakan<style amp-custom> - Tidak boleh menggunakan CSS inline seperti
<div class='sidebar' style='margin-top:0;padding:10px'> - Script tidak diperbolehkan menggunakan attribute
type='text/javascript' - Untuk multimedia gunakan tag
imgmenjadiamp-imgdanvideomenjadiamp-video, khusus untuk video dari youtube menggunakan tagamp-youtube
Kerangka Dasar Halaman AMP HTML
Mari kita lihat karangka dasar halaman web berbasis AMP HTML saya kutip dari situs resmi AMP Project<!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>
Implementasi AMP HTML ke Template Blogspot
Sekarang mari kita implementasikan beberapa komponen di atas ke dalam template dasar blogspot:Dimulai dari komponen Top-level wajib ada
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML amp='amp' lang="en">
Kemudian komponen heading dan seterusnya
<!-- S:komponen heading template -->
<head>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title itemprop='name'><data:blog.pageTitle/></title>
<b:else/>
<title itemprop='name'><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<!-- S:link kanonik ke AMP HtML -->
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<!-- E:link kanonik ke AMP HTML -->
<b:include data='blog' name='all-head-content'/>
<b:include data='blog' name='google-analytics'/>
<!-- S:komponen meta data -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
<!-- tuliskan meta tag anda disini diseusaikan dengan kebutuhan template yang ada -->
<!-- E:komponen meta data -->
<!-- S:Komponen skin -->
<b:skin>
/* kode css disini */
body {background :white}
</b:skin>
<!-- E:Komponen skin -->
<style amp-custom='amp-custom'>
<!-- css custom code silahkan tulis di sini -->
body {
background-color: white;
}
h2 {
font-size: 26px;
color: red;
background-color: whitesmoke;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
<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>
<!-- S:Komponen style yang wajib ada -->
<style amp-boilerplate='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='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- E:Komponen style yang wajib ada -->
<!-- S:Komponen script yang wajib ada -->
<script async='async' src="https://cdn.ampproject.org/v0.js"></script>
<!-- E:Komponen script yang wajib ada -->
<!-- S:Komponen Javascript tambahan jia ada -->
<script async='async' src='http:www.example.com/example.js'/>
<!-- E:Komponen Javascript tambahan jia ada -->
</head>
<!-- E:komponen heading template -->
Komponen body serta komponen utama blog
<body>
<!-- S:Google Tag Manager Optional -->
<noscript><amp-iframe height='0' src='//www.googletagmanager.com/ns.html?id=GTM-M7L5N8' style='display:none;visibility:hidden' width='0'/></noscript>
<!-- E:Google Tag Manager Optional -->
<!-- S:Komponen utama blog -->
<b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
</b:section>
<b:section id='nav' class='nav' maxwidgets='1' showaddelements='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
</b:section>
<b:section id='main' class='main' maxwidgets='' showaddelements='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
<b:section id='sidebar' class='sidebar' maxwidgets='' showaddelements='yes'>
<b:widget id='CustomSearch1' locked='false' title='Search' type='CustomSearch'/>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
</b:section>
<b:section id='footer' class='footer' maxwidgets='' showaddelements='yes'>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
<!-- E:Komponen utama blog -->
</body>
</HTML>
Javascript dan css bawaan template blogspot tidak digunakan karena tidak valid AMP HTML Google.
Saya sudah mencoba implementasi tersebut diatas dan hasilnya dapat Anda lihat di blog saya yang lain di blog Bantu Blogger sebagai demonya saja.
Image Source: http://www.niemanlab.org/
Jangan lupa lihat juga
Cara Kerja AMP Google
0 comments:
Post a Comment