AMP - Cara Mengubah Html ke Amp Html

Sekarang ini jika membuat website, dimana website tersebut dapat masuk dalam index penelusuran Google dengan membuat pengaturan di webmaster tools, Google telah membuat aturan harus mobile friendly menurut Google. Ini berlaku aktif sejak 2017, diujicobakan sejak akhir 2015. Karena media promosi menggunakan mesin penulusuran hanya satu - satunya dikuasai Google sehingga Google dengan mudah memonopoli berbagai aturan main. Satu tingkat aturan ini tampak menjadi tidak produktif, sisi lain kondisi ini mau tidak mau, provider pembuat website harus mengikuti aturan itu, untuk sementara.

Video diatas adalah panduan dalam mengubah struktur open-source general html ke open-source amp html. Struktur ini, Google telah membuatkan formulasinya untuk diikuti, setelah melakukan perubahan Anda dapat melakukan pengujian hasil apakah sudah memenuhi yang diiinginkan Google atau belum, pengujiannya di link ini https://search.google.com/test/amp. Jika berhasil, berarti website telah masuk kategori mobile friendly menurut Google.

Dalam struktur kode penambahan menggunakan amp, semua file image atau video, maka open source img menjagi amp-img dan video menjadi amp-video. Amp itu sendiri singkatan darai istilah yang dibuat Google, yaitu "Accelerated Mobile Pages", halaman web yang resulusinya bersahabat dengan layar handphone, itupun menurut Google.

Perubahan yang dilakukan pada head dengan menambahkan script, link dan css dari struktur yang dibuat Google, strukturnya seperti ini dari apa yang telah dibuat di video diatas:

Sebelum

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scala=1.0"/>
<title>Profile</title>
<script type="application/ld+json"> [ { "@context" : "https://schema.org", "@type" : "Dataset", "name" : "Profile - ELOG Bimbel", "description" : "Elog Bimbel adalah Elog Bimbingan Belajar, membantu siswa - siswi dalam mata pelajaran di tahun pertamanya." , "url": "http://www.elog-bimbel.id/profile.php", "logo": "https://www.elog-bimbel.id/images/logoBimbel1.png"
},{"@context" : "https://schema.org", "@type" : "Dataset", "name" : "Profile - ELOG Bimbel", "description" : "yang  memiliki kesulitan beradaptasi dengan mata pelajarannya." , "url": "https://www.elog-bimbel.id/profile.php", "logo": "https://www.elog-bimbel.id/images/logoBimbel1.png"   
}
] 
</script>
<style type="text/css">
<!--
body{
   background:url(image/backgroundProfile.jpg) no-repeat ;
   background-color: transparent;
   -webkit-background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   background-size:cover; 
   width:1024px;
   height:1600px;
   padding: 15px 5px 15px 0;
}
#head{
 width:1024px;
 position:relative; 
 background-position:center;
 height:120px;
 padding-left:35px;
 padding-top:0;
 padding-right:35px;
 padding-bottom:25px;
 top: 0;
 </style>
</head>
<body>
<div clas="wrapper"><img src="image/logoHD.jpg" width="150" height="75" /></div>
</body>
</html>

Sesudah

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html amp lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scala=1.0"/>
<script async src="https://cdn.ampproject.org/v0.js">
</script>
<title>Profile</title>
<script type="application/ld+json"> [ { "@context" : "https://schema.org", "@type" : "Dataset", "name" : "Profile - ELOG Bimbel", "description" : "Elog Bimbel adalah Elog Bimbingan Belajar, membantu siswa - siswi dalam mata pelajaran di tahun pertamanya." , "url": "https://www.elog-bimbel.id/profile.php", "logo": "https://www.elog-bimbel.id/images/logoBimbel1.png"
}, {"@context" : "https://schema.org", "@type" : "Dataset", "name" : "Profile - ELOG Bimbel", "description" : "yang  memiliki kesulitan beradaptasi dengan mata pelajarannya." , "url": "https://www.elog-bimbel.id/profile.php", "logo": "https://www.elog-bimbel.id/images/logoBimbel1.png"   
}
] 
</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>  
<style amp-custom>
<!--
amp-img{
   backgroung-color; white or gray etc;
   border:1px solid white;
}
body{
   background:url(image/backgroundProfile.jpg) no-repeat ;
   background-color: transparent;
   -webkit-background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   background-size:cover; 
   width:1024px;
   height:1600px;
   padding: 15px 5px 15px 0;
}
#head{
 width:1024px;
 position:relative; 
 background-position:center;
 height:120px;
 padding-left:35px;
 padding-top:0;
 padding-right:35px;
 padding-bottom:25px;
 top: 0;
 </style>
</head>
<body>
<div clas="wrapper"><amp-img src="image/logoHD.jpg" width="150" height="75" /></div>
</body>
</html>

Pada perubahan struktur html, penambahan amp lang dapat diganti dengan menggunakan "⚡", <html amp lang="en"> menjadi <html ⚡>. Untuk style boilerplate, lengkapnya bisa anda dilihat di sini https://www.ampproject.org/id/ atau dapat sekalian mempelajarinya di sana, secara bertahap sampai benar - benar dikuasai.

Yang lain-lainnya pada dasarnya sama, artinya perubahannya baku, tidak perlu melakukan variasi, hal yang lain dalam pembuatan slide img, mungkin ini yang harus mengikuti open-source amp. Sebetulnya perubahannya sangat simple, panduannya cukup jelas, namun memang perubahan ini agak sedikit terganggu bagi yang sudah terbiasa dengan open-source sebelumnya.

Demikian tuorial singkat cara mengubah html ke amp html. Anda pun tidak perlu melakukan perubahan jika web Anda tidak ingin didaftarkan ke webmaster tools. Pada dasarnya sekarang Anda dapat melakukan share website ke sosial media tanpa harus mempromosikan ke index penulusuran Google.

Semoga bermanfaat.

Friday, 3 August 2018