Epic99.com – Cara membuat website AMP. Membuat website untuk bisa lebih bersaing terbilang susah-susah gampang. Namun hal ini harus kamu lakukan untuk membuat website yang kamu jalankan menjadi lebih ringan. Pada artikel kali ini akan di jelaskan mengenai cara membuat website Accelerated Mobile Pages dengan mudah. Di mana AMP sendiri merupakan proyek yang di prakarsai oleh perusahaan teknologi raksasa yakni Google.

Sebelum masuk ke inti untuk mengetahui cara membuat website Accelerated Mobile Pages, ada baiknya kamu mengetahui terlebih dahulu tujuan Google membuat proyek ini adalah sebagai solusi untuk pemilik website agar bisa lebih berkompetisi dalam mendapatkan banyak pengunjung.

Selain itu dengan Accelerated Mobile Pages memungkinkan website kamu menjadi lebih cepat terutama saat di jalankan dalam versi mobile. Hal tersebut di karenakan nantinya Google akan bertindak sebagai penyimpanan cache website bahkan fasilitas penyimpanan tersebut di sediakan oleh Google secara gratis.


Cara Membuat Website AMP

Cara membuat website AMP sendiri terbilang susah-susah gampang. Selain itu ada berbagai cara yang bisa kamu lakukan untuk membuat website AMP. Namun kali ini akan di berikan tutorial paling mudah untuk kamu ketahui cara membuat website AMP.

Cara Membuat Website AMP

Berikut ini beberapa hal yang harus kamu download terlebih dahulu sebelum membuat website AMP.

  1. Menggunakan tag “AMP” atau tanda petir di belakang tag HTML.
  2. Meta charset.
  3. Script JS Google AMP.
  4. Title tag.
  5. Link canonical.
  6. Meta Viewport.
  7. Structure-data (opsional).
  8. amp-boilerplate.
  9. stylesheet amp-custom.

Untuk kamu ketahui jika menggunakan WordPress maka akan lebih mudah untuk kamu membuat website AMP di mana kamu hanya perlu mendownload plugin tertentu saja. Namun jika kamu membuat website menggunakan framework, tentu menggunakan cara berbeda untuk kamu bisa membuat website AMP.

Cara Membuat Website AMP

Secara umum nantinya kamu harus menggunakan script lengkap untuk membuat 1 halaman AMP. Berikut contoh scriptnya yang bisa kamu gunakan :

Baca Juga:  4 Contoh Landing Page Website Terbaik dan Hits yang Bisa Ditiru

<!DOCTYPE html>
<HTML amp lang=”en”>
<head>
<meta charset=”utf-8″/>
<script async src=”https://cdn.ampproject.org/v0.js”></script>
<title>AMP Homepage untuk Pemula</title>
<link rel=”canonical” href=”https://www.your_domain.com”/>
<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>

</head>
<body>
<h1>Selamat Datang di Website AMP Pemula</h1>
</body>
</HTML>


Aturan dan langkah-langkah dalam membuat website AMP

Dari contoh script halaman yang sudah di berikan sebelumnya, ada beberapa aturan dan langkah yang harus kamu ketahui dalam membuat website AMP. Berikut ulasannya !

Aturan dan langkah-langkah dalam membuat website AMP

1. Script untuk membuat Javascript AMP

<script async src=”https://cdn.ampproject.org/v0.js”></script>

2. Script untuk menentukan Halaman Asli AMP

<link rel=”canonical” href=”https://www.your_domain.com”/>

3. Cara menambahkan Struktur Data/Snippet Code untuk Halaman AMP

<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”

4. CSS yang di wajibkan untuk AMP

<style amp-boilerplate> …. </noscript>

5. CSS Custom yang di gunakan untuk Menambahkan Style pada Halaman AMP

Misalnya, <style amp-custom> ….. </style>

6. Ganti Setiap Tag img dengan apm-img dan Isilah Width serta Height

<amp-img src=”http://www.domainkamu.id/wp-content/uploads/2019/15/Linux-master.jpg” alt=”Linux” width=”480″ height=”255″></amp-img>

7. Menambahkan Script Analitik dari Google

Caranya tambahkan script di bawah ini di antara head:

<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

Tambahkan script di bawah, sebelum </body> <amp-analytics type=”googleanalytics”> <script type=”application/json”> { “vars”: { “account”: “UA-XXXXX-Y” }, “triggers”: { “trackPageview”: { “on”: “visible”, “request”: “pageview” } } } </script> </amp-analytics>


Penjelasan

Perubahan yang kamu lakukan pada aturan dan langkah diatas bisa dilakukan untuk beberapa fungsi dan bentuk html lainnya seperti tag <img> menjadi <amp-img>, <iframe> menjadi <amp-iframe>, dan masih banyak lagi yang lainnya. Selain itu perubahan tersebut tidak hanya bisa di gunakan untuk 1 halaman saja melainkan bisa di sesuaikan dengan kebutuhan website.

Baca Juga:  5 Rekomendasi Framework CSS Terbaik dan Responsive

Langkah selanjutnya yang bisa kamu lakukan adalah dengan melakukan validasi dari halaman AMP yang sudah di buat sebelumnya. Di mana nantinya kamu hanya perlu menambahkan parameter #development=1 pada akhir url dari halaman AMP yang sudah di buat.

Kemudian inspect dan pilih tab console, maka nantinya kamu akan mendapatkan notifikasi AMP validation succesfull yang berarti halaman AMP sudah valid.


Kesimpulan

Nah itulah beberapa langkah yang bisa kamu lakukan untuk membuat website Accelerated Mobile Pages dengan mudah. Dengan menggunakan website AMP nantinya akan ada banyak manfaat yang bisa kamu rasakan seperti memungkinkan website menjadi lebih bersaing, bahkan hingga memudahkan kamu untuk bisa lebih cepat di terima adsense.***