pinterduit blog logo Pinterduit.com

Platform ngeblog asli buatan lokal, menulis itu untuk melepas beban bukan untuk menambah beban







Home » Blogger



Cara Membuat Website AMP Valid

ERNDT • Blogger • 26 Aug 2020 • 192 Dilihat • publish




Pinterduit.com - 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>



Artikel ini diterbitkan untuk Pinterduit.com dengan judul Cara Membuat Website AMP Valid




Bagikan Artikel Ini
full html code

link

BB Code