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.

1. 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
2. setelah didownload extract file di folder htdocs dan beri nama “amp” pada folder
3. kemudian akses halaman amp dengan mengetikanhttp://localhost/amp/article.html di browser
   akan tampil halaman seperti ketika mengakses. halaman tersebut
4. didalam file article.html terdapat kode html biasa yang akan kita ubah menjadi halaman yang support AMP. berikut ini kode-kode html dariarticle.html

   
     
       
       
       
        
    News Site 
    
    
   Article Name
    
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.
     
    

5. copy semua code article.html kemudian paste di halaman yang baru lalu disimpan dengan nama article.amp.html
6. lalu tambahkan AMP js berikut ini diantara di halaman article.amp.html

   sehingga menjadi seperti ini

7. 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.
8. lalu aktifkan crome devtools (ctrl + shift + i) untuk melihat hasilnya aktifkan mode mobile( ditandai lingkaran merah) dan tab console.
   

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.

sehingga kode menjadi

  
    
...

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

atau

sehingga kode menjadi

  
    
    
    
....

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

atau

sehingga kode menjadi seperti ini

  
    
    
    

    
...

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

di halaman HTML.

untuk memperbaiki error viewport di file AMP dengan cara, menambahkan kode meta seperti berikut

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

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

untuk menyelesaikan masalah yang ada adalah :

1. di dalam hapus kode berikut ini.

2. lalu copy kode yang ada dalam file base.css lalu ditaruh di dalam

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