7 Cara Membuat Website AMP Dengan Mudah

Apakah penting mengetahui cara membuat website AMP? Tentu saja penting bagi kamu yang baru memulai bisnis online.

Sebelum mengetahui cara membuat website AMP, kamu harus tahu artinya terlebih dahulu. Perlu kamu ketahui, sebenarnya jenis website ini merupakan proyek AMP-HTML yang diprakasai oleh Google.

Lantas, apa tujuannya? Google meluncurkan Website AMP sebagai suatu solusi untuk para pemilik website supaya dapat berkompetisi mendapatkan banyak pengunjung.

Sekaligus dapat mengurangi kelemahan website, khususnya dalam hal kecepatannya dalam versi mobile.

Dilansir dari Neil Patel, website AMP akan memungkinkan sebuah laman secara instan melakukan loading dengan cepat.

Hal ini karena Google sendiri yang bertindak sebagai penyimpan cache website. Misalnya, gambar, javascript, dan lain sebagainya. Fasilitas penyimpanan tersebut disediakan oleh Google secara gratis.

Bagaimana Cara Membuat Website AMP?

Lantas, setalah mengetahui tujuannya mungkin kamu penasaran dengan cara membuat website AMP.

Apakah langkah-langkah yang perlu dilakukan akan sulit dan melelahkan? Jawabannya tentu tidak asalkan kamu mau belajar dengan sungguh-sungguh. Berikut cara membuat website AMP dan beberapa hal yang perlu diperhatikan

Berikut beberapa hal yang bisa kamu unduh untuk membuat website AMP.

Menggunakan tag “AMP” atau tanda petir dibelakang tag HTML.
Meta charset.
Script JS Google AMP.
Title tag.
Link canonical.
Meta Viewport.
Structure-data (opsional).
amp-boilerplate.
stylesheet amp-custom.

Jika menggunakan WordPress, kamu hanya perlu menginstal plugin AMP untuk mengaktifkan halaman tersebut.

Bila membuat website dengan memakai berbagai framework, tentunya kamu perlu membuat halaman AMP dengan usaha sendiri.

Pada dasarnya, halaman AMP sangat cepat karena halaman pertama yang dimuat tidak langsung mengarah ke URL website milik kamu. Melainkan cache yang telah dimual oleh Google.

Dalam membuat halaman AMP, kamu masih mengunakan beberapa tag html meskipun ada beberapa yang mesti diganti, misalnya untuk tag gambar (<img>).

Langkah pertama yang bisa kamu lakukan misalnya dengan menggunakan gunakan script lengkap untuk membuat 1 halaman AMP. Berikut contohnya:

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

Dari contoh di atas, kamu dapat melihat aturan-aturan dalam cara membuat website AMP.

1. Buat Javascript AMP

2. Tentukan Halaman Asli AMP

3. Tambahkan Struktur Data/Snippet Code untuk Halaman AMP

4. CSS Wajib untuk AMP

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

5. CSS Custom untuk Menambahkan Style di Halaman AMP

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

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

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

7. Kamu Dapat 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>

Perubahan juga dilakukan bukan hanya item yang di atas. Namun, juga pada beberapa fungsi dan bentuk html lain. Misalnya, tag <img> menjadi <amp-img>, <iframe> menjadi <amp-iframe>, dan beberapa fungsi AMP lainnya, seperti; amp-share, amp-form, dan sebagainya.

Perubahan tersebut tidak digunakan dalam satu halaman. Pengunaan fungsi ini disesuaikan dengan kebutuhan website yang ingin kamu buat tentunya.

Misalnya, kamu ingin menambahkan slideshow pada bagian header website, dianjurkan untuk menggunakan amp-carousel yang telah didesain oleh Google untuk membuat slideshow.

Karena terdapat aturan-aturan tertentu, langkah selanjutnya kamu bisa melakukan validasi dari halaman AMP yang telah dibuat.

Bagaimana caranya? Kamu hanya perlu menambahkan parameter #development=1 pada akhir url dari halaman AMP.

Misalnya pada halaman AMP: http://www.domainkamu.id/daftar-makanan-paling-enak-saat-lebaran/amp/#development=1

Lalu kamu klik kanan, inspect dan silakan pilih tab console. Apabila terdapat pesan: “AMP validation successful” berarti halaman AMP yang kamu buat telah valid.

Namun jika tidak valid, biasanya akan muncul pesan warna merah. Bila hal tersebut terjadi kamu dapat memperbaik halaman AMP sesuai dengan error yang terjadi.

Manfaat dari Website AMP

Apa saja manfaat yang akan kamu dapat dengan website AMP? Berikut yang perlu kamu ketahui.

1. Fitur yang Membantu Pemilik Website

Telah disinggung sebelumnya bahwa website yang telah menggunakan fitur AMP-HTML berhubungan dengan Google sebagai media penyimpanan script dan cache. Hal ini tentu menguntungkan kamu sebagai pihak pemilik situs.

Kenapa demikian? Karena script sering kali membuat speed website menjadi lambat atau lelet tersimpan di Google.

2. Membuat Website Kamu Lebih Bersaing

Manfaat yang akan kamu dapat saat mengetahui cara membuat website AMP selajutnya adalah memungkinkan bersaing sengan situs lain.

Website AMP yang sudah tervalidasi atau lulus tes akan mungkin bersaing dengan situs lain dan berpeluang menaikkan ranking di Google.

3. Mendapatkan Adsenses dan Penghasilan Pasif

Setelah halaman website dari bentuk biasa menjadi AMP-HTML, kamu akan merasakan perubahan.

Beberapa hari setelah hal itu dilakukan web milik kamu akan naik sendiri, khususnya setelah Google mengindeks semua halaman website AMP milik kamu.

Tips agar Website AMP Tetap Tervalidasi

7 Cara Membuat Website AMP dengan Mudah — *Foto: Membuat Website (unsplash.com*)

Setelah mengetahui langkah atau cara membuat website AMP, ada hal lain yang perlu kamu perhatikan. Dalam banyak kasus seringkali web AMP mengalami error atau gagal tervalidasi. Namun, tidak perlu khawatir. Biasanya kamu tinggal memerhatikan berikut ini:

Kamu memakai script JS referensi pada header namun tidak ditemukan relevansi blok script pada bagian body/content.
Kamu tidak teliti saat mengubah dari img ke amp-img.
Website AMP yang kamu buat mengandung script JS atau Javascript eksternal tanpa dibungkus oleh amp-iframe.

Hal-hal tersebut biasanya yang paling sering menyebabkan situs kamu gagal tervalidasi. Kamu tinggal memerhatikan dan memperbaiki hal itu supaya website AMP dapat menjadi valid.

Demikian penjelasan seputar cara membuat website AMP dengan mudah ini. Semoga dapat bermanfaat dan membantu kamu.

Tags: cara membuat website amp, Meningkatkan Bisnis, strategi pemasaran, tips bisnis

7 Cara Membuat Website AMP dengan Mudah