Membuat Website AMP – Bagian satu, setelah berkenalan secara singkat mengenai web AMP (accelerated mobile pages) sekarang kita akan membuat halaman sederhana tersebut beserta tag-tag AMP yang wajib kita gunakan.
penulis anggap pembaca telah memiliki aplikasi xampp di komputer nya jika belum silakan Baca : cara Instal dan cara menggunakan xampp.
- untuk mulai Membuat Website AMP sebaiknya gunakan lah google crome karena kita akan menggunakan devtoolsdi browser crome untuk validasi, silakan download halaman berikut ini disini
- setelah didownload extract file di folder htdocs dan beri nama “amp” pada folder
- kemudian akses halaman amp dengan mengetikanhttp://localhost/amp/article.html di browser
akan tampil halaman seperti ketika mengakses. halaman tersebut - didalam file article.html terdapat kode html biasa yang akan kita ubah menjadi halaman yang support AMP. berikut ini kode-kode html dariarticle.html
<!doctype html> <html lang="en"> <head> <link rel="shortcut icon" href="amp_favicon.png"> <title>News Article</title> <link href="base.css" rel="stylesheet" /> <script src="base.js"></script> </head> <body> <header> News Site </header> <article> <h1>Article Name</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p> <img src="mountains.jpg"> </article> </body> </html> - copy semua code article.html kemudian paste di halaman yang baru lalu disimpan dengan nama article.amp.html
- lalu tambahkan AMP js berikut ini diantara <head> di halaman article.amp.html
<script async src="https://cdn.ampproject.org/v0.js"></script>
sehingga menjadi seperti ini
<head> <link rel="shortcut icon" href="amp_favicon.png"> <title>News Article</title> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> - lalu simpan, selanjutnya adalah membuat file article.amp.html di browser dengan mengakses http://localhost/amp/article.amp.html#development=1 , #development=1 digunakan untuk memvalidasi halaman amp.
- lalu aktifkan crome devtools (ctrl + shift + i) untuk melihat hasilnya aktifkan mode mobile( ditandai lingkaran merah) dan tab console.
akan tampil halaman seperti ketika mengakses. halaman tersebut
kita Membuat Website AMP menggunakan #development=1pada url dan akan terlihat banyak validasi error yang tampil di devtools tab console. hal ini baik karena kita akan memperbaiki error sehingga layak digunakan.
sebelum lebih lanjut untuk memahami devtools di crome sebaiknya kamu langsung kunjungi website ini, agar mudah memahami fungsi-fungsi dari devtools crome.
selanjutnya kita akan satu per satu memperbaiki error di halaman article.amp.html
Memperbaiki Error Charset AMP
pada error pertama terdapat tulisan
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
error tersebut tampil karena kita tidak menyertakan meta encode pada Saat Membuat Website AMP. letak kode tersebut di antara head karena itu lah error tersebut berada posisi paling atas.
masukan kode berikut ini setelah head untuk menghilangkan errornya.
<meta charset="utf-8" />
sehingga kode menjadi
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
...
simpan lalu refresh. check kembali error charset
Memperbaiki error canonical link AMP
selanjutnya kita ke error
The mandatory tag 'link rel=canonical' is missing or incorrect.
Setiap kali Membuat Website AMP membutuhkan link halaman lain sebagai referensi halaman canonical. halaman canonical dapat berisi halaman AMP itusendiri maupun non AMP.
Non AMP ini adalah halaman dengan kode html asli dari halaman yang sudah kita conver menjadi halaman AMP. contoh : article.html
tambahkan kode berikut ini setelah kode dari charset
<link rel="canonical" href="/article.html">
atau
<link rel="canonical" href="article.amp.html">
sehingga kode menjadi
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="canonical" href="article.amp.html">
<link rel="shortcut icon" href="amp_favicon.png">
....simpan lalu refresh. check kembali error canonical.
MEMPERBAIKI ERROR ATTRIBUTE AMP
AMP membutuhkan sebuat attibute didalam tag html untuk pengenal bahwa halaman itu merupakan halaman dari AMP (deklarasi)
Error ini yang akan tampil jika tidak mendeklarasikan attribute tersebut.
The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html' The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.
untuk memperbaikinya gunakan
<html ⚡ lang="en">
atau
<html amp lang="en">
sehingga kode menjadi seperti ini
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="canonical" href="article.amp.html">
<link rel="shortcut icon" href="amp_favicon.png">
<title>News Article</title>
...simpan lalu refresh. check kembali error attribute amp.
Memperbaiki Error Viewport AMP
selanjutnya menghilangkan error viewport di AMP
The mandatory tag 'meta name=viewport' is missing or incorrect.
sebuah File AMP wajib memiliki width dan minimum-scale untuk viewport, nilai untuk masing-masingnya adalah device-width dan 1. viewport adalah tag umum yang biasanya terletak di dalam <head> di halaman HTML.
untuk memperbaiki error viewport di file AMP dengan cara, menambahkan kode meta seperti berikut
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
nilai dari width dan minimum-scale sangat wajib digunakan di AMP, sedangkan initial-scale merupakan pilihan optional tetapi hampir semua mobile web selalu menggunakannya didalam kode meta sehingga sangat disarankan untuk menggunakannya.
Mengganti Eksternal Stylesheet
error yang biasa tampil di AMP biasanya akan terlihat seperti ini
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
penyebab error tersebut adalah karena kita menggunakan eksternal stylesheet
<link href="base.css" rel="stylesheet" />
dalam AMP untuk load halaman secepat mungkin tidak dapat menggunakan eksternal stylesheet jadi semua stylesheet harus berada dalam 1 halaman. dan penulisan stylenya pun berbeda yaitu seperti ini
<style amp-custom> /* The content from base.css */ </style>
untuk menyelesaikan masalah yang ada adalah :
- di dalam <head> hapus kode berikut ini.
<link href="base.css" rel="stylesheet" />
- lalu copy kode yang ada dalam file base.css lalu ditaruh di dalam
<style amp-custom> ISI CSS DISINI </style>
coba reload kembali halaman tersebut. semoga error nya dapat hilang
Demikianlah Membuat Website AMP Sederhana Dengan Mudah , semoga dapat membantu. untuk pertanyaan silakan diajukan dikolom komentar