Ingin pasang banner iklan di blog ini dan dilihat 150 pengunjung per hari ? Banner 250x250 tarif (promo) 50k / tahun. Hubungi whatsapp 089673300464

Panduan Membuat Web AMP HTML Valid Dari Nol

Posting Komentar
AMP adalah kepanjangan dari accelerated mobile page yang artinya adalah halaman website untuk mobile device (contoh: android) yang dipercepat. Project ini didukung oleh google bertujuan untuk membuat sebuah website yang mampu diakses dengam sangat cepat saat diakses melalui smartphone.

CARA KERJA AMP HTML
Cara kerja dari website amp ini adalah dengan cara membatasi kode kode html dan javascript dan juga css agar tidak membebani loading website. Jadi di dalam html amp kita tidak lagi bebas menggunakan kode html, javascript seperti sebelumnya. Halaman amp yang valid, maka saat pengunjung melakukan klik di search engine google, maka data yang ditampilkan akan mengambil dari server google sehingga proswa loading menjadi lebih cepat. Halaman website yang mempunyai kode html amp valid maka pada hasil pencarian google akan ada icon lingkaran bergambar petir.


MANFAAT MENERAPKAN HTML AMP
Manfaat yang didapatkan dari menerapkan html amp adalah website kita akan dimuat menjadi lebih cepat hingga 30%, pengunjung website akan naik karena kita tidak kehilangan poengunjung karena waktu muat halaman yang terlalu lama dan membuat pengunjung membatalkan niat untuk berkunjung ke website kita.

KELEMAHAN MENGGUNAKAN HTML AMP
Karena kode dan script yang dibatasi maka kelemahan dari html amp adalah kita tidak bebas dalam membangun sebuah website, misalnya untuk memasang kode iklan google adsense tidak bisa asal pasang saja namun harus diubah dulu kode nya mengikuti struktur kode html amp.


CONTOH FULL KODE HTML AMP DALAM WEBSITE YANG SEBENARNYA


<!doctype html>
 <html amp lang="en"> 
<head> 
<meta charset="utf-8"> 
<script async src="https://cdn.ampproject.org/v0.js"></script> <title><?php echo $datapost_title; ?></title> 
<link rel="canonical" href="<?php echo 'http://pinterduit.com/index.php?'.$datapost_permalink.'&page=post&u='.$datapost_u ;?>"> 
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">


<script type="application/ld+json">
{

 "@context": "https://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://google.com/article"
  },

 "headline": "<?php echo $datapost_title; ?>",

 "image": [

"http://pinterduit.com/logo.jpg"




   ],


  "datePublished": "2015-02-05T08:00:00+08:00",


  "dateModified": "2015-02-05T09:20:00+08:00",



  "author": {



    "@type": "Person",



    "name": "<?php echo $datapost_author_name; ?>"



  },



   "publisher": {



    "@type": "Organization",



    "name": "Pinterduit",



    "logo": {



      "@type": "ImageObject",



      "url": "http://pinterduit.com/logo.jpg"



    }



  },



  "description": "<?php echo substr($datapost_text,0,200); ?>"



}



</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 custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> 

<style amp-custom>
body{

padding:5px;
}
#wrapper {
background-color:none;
padding:0px;
word-spacing: 5px;
line-height: 1.8;

white-space: pre-wrap;        
white-space: -moz-pre-wrap;   
white-space: -pre-wrap;       
white-space: -o-pre-wrap;      
word-wrap: break-word;     
white-space: pre-line;
overflow: hidden;
text-overflow: ellipsis; 
text-align:justify;
}


#self-ads{
position:relative;
border: 1px grey solid;
background-color:white ;
padding: 20px 20px 50px 20px;
font-size:30px;
color:grey;
}
.eklan-label{
position:absolute;
background-color:white;
top:2px;
right:2px;
font-size:10px;
color:blue;
border: 0,5px blue solid;
}
.eklan-link{
position:absolute;
align:center;
bottom: 2px;
right:10px;
}


.button-ads {
color: white;
background-color:dodgerblue;
font-size:18px;
margin:10px;
padding:10px;

}

a {
text-decoration: none;
color:#153cd6;
}

</style>

 </head> 

<body> 
<amp-analytics type="googleanalytics">
  <script type="application/json">
  {
   "vars": {
      "account": "UA-112XXX"
   },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      }
   }
  }
  </script>
</amp-analytics>

<a href="http://pinterduit.com" > MENU </a>

<h1><?php echo $datapost_title; ?></h1>
<?php echo $self_ads_code; ?>
<div id="wrapper">
<?php echo $datapost_text; ?>
</div>

</body> 
</html>


Related Posts

There is no other posts in this category.

Posting Komentar