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.
Berikut ini beberapa hal yang harus kamu download terlebih dahulu sebelum membuat website AMP.
- Menggunakan tag “AMP” atau tanda petir di belakang tag HTML.
- Meta charset.
- Script JS Google AMP.
- Title tag.
- Link canonical.
- Meta Viewport.
- Structure-data (opsional).
- amp-boilerplate.
- 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.
Secara umum nantinya kamu harus menggunakan script lengkap untuk membuat 1 halaman AMP. Berikut contoh scriptnya yang bisa kamu gunakan :
<!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 !
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.
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.***
