Cara Mengetahui Validitas Halaman AMP HTML

Lanjut lagi saya membahas tentang Accelerated Mobile Pages yang sedang hangat diperbincangkan. Kali ini saya akan membahas tentang cara untuk mengetahui status blog yang menggunakan template AMP apakah sudah valid AMP atau belum. Mungkin sudah telat bagi saya untuk membagikan informasi ini sebab sudah begitu banyak yang membahas akan hal ini. Tetapi sebagai pengguna AMP, saya juga perlu mengulasnya sebagai catatan pribadi dan membantu blogger pemula seperti saya.

Sebagai pengguna template AMP tentu sangat penting sekali bagi kita untuk mengetahui validasi AMP. Mengapa demikian? Sebab ada beberapa aturan berbeda tentang penerapan HTML pada template non AMP dengan template AMP. Jika sebelumnya kita bisa leluasa membuat postingan tanpa memperhatikan HTM, maka setelah memakai AMP kita harus benar-benar memperhatikan aturan AMP HTML tersebut.



Tentu percuma kan? Sudah keren menggunakan template AMP tetapi status masih invalid AMP atau masih terdapat banyak eror. Ini yang dulu saya alami, blog saya masih terasa berat (loading lambat) padahal sudah menggunakan AMP, ternyata setelah saya melakukan uji validasi AMP terlihat beberapa postingan saya banyak yang invalid. Setelah mengetahui validitas halaman AMP akhirnya saya bisa memperbaiki eror satu persatu sehingga menjadikan postingan valid AMP.

Sebelumnya saya mengira hanya ada satu saja cara untuk cek validasi halaman AMP HTML. Tetapi setelah saya browsing mencari informasi ini, ternyata ada berbagai cara yang bisa kita lakukan. Semua saya kumpulkan di sini sehingga teman-teman bisa memilihnya dan juga bisa mencobanya satu persatu.

#1. Inspect Element pada Web Browser

Cara pertama kita bisa langsung menggunakan web browser yang kita gunakan, baik itu google chrome, mozila firefox, maupun opera. Langkahnya adalah sebagai berikut:

1. Pilih halaman yang ingin di uji validasinya kemudian tambahkan (#depelopment=1) tanpa tanda kurung pada akhir url seperti terlihat pada gambar di atas.
2. Setelah menambahkannya langkah selanjutnya adalah refresh (muat ulang) halaman tersebut.
3. Arahkan kursor bebas pada halaman tadi kemudian klik kanan lalu pilih inspeksi.
4. Gambar nomer 4 adalah status validasi AMP, apabila ada yang eror maka akan terlihat tanda merah disertai jumlah angka erornya, jika sudah valid maka tampak seperti gambar di atas.
5. Pada gambar nomer 5 adalah kolom yang menampilkan struktur eror yang perlu diperbaiki.

#2. Melalui Tool AMP Projek Validator

AMP projek juga menyediakan tool khusus untuk melakukan uji validasi halaman AMP guna lebih mempermudah penggunanya. Berikut tahap dan penjelasan yang harus dilakukan:

1. Silahkan kunjungi halaman berikut https://validator.ampproject.org
2. Masukan url halaman yang akan di uji validasinya pada kolom url yang disediakan
3. Kemudian pilih dan klik tombol vaidate dan tunggu hingga proses selesai
4. Apabila muncul seperti pada gambar yang ditunjukkan nomor 4 berarti berstatus fail, artinya butuh perbaikan.
5. Sedangkan jika seperti nomor 5 berarti berstatus pass, artinya sudah valid.

#3. Melalui Tool Google Search Console

Kayaknya google juga tidak tinggal diam, mungkin tidak mau kalah dengan AMP projek akhirnya google juga menambahkan fitur laman seluler yang dipercepat pada menu search console.



Bagi teman-teman yang menggunakan AMP pasti mendapat pemberitahuan jika ada permasalahan pada halaman AMP-nya. Jika ada kesalahan silahkan ikuti langkah berikut:

1. Kunjungi alamat berikut https://search.google.com/search-console/amp kemudian masukkan url yang mengalami permasalahan yang sudah di tunjukkan pada dasbor search console.
2. Pada contoh ini saya mengalamai permasalahan pada tag img sesuai yang diterangkan pada hasil AMP test, disana juga disebutkan bagaimana seharusnya kesalahan itu diperbaiki, yaitu dengan mengganti tag img menjadi amp-img.
3. Supaya lebih mudah maka saya cari pada line berapa tag img tersebut berada, setelah tahu dimana letaknya maka tinggal perbaiki deh pada postingan saya.

#4. Menambahkan Ekstensi AMP Valitador

Ini dia cara yang paling mudah, yaitu hanya dengan menginstal ekstensi yang bernama AMP validator pada web browser yang kita gunakan. Ekstensi ini saya rasa wajib bagi pengguna template AMP. Namanya juga manusia tentu kadang lupa, nah dengan menambahkan ekstensi ini kita tidak perlu repot-repot cek validasi AMP, cukup dengan melihat logo pada ekstensi tersebut kita sudah bisa mengetahuinya. Bagi yang belum menggunakan template AMP juga tidak ada salahnya untuk memasangnya supaya bisa mengetahui dan merasakan perbedaan kecepatan loading blog AMP.

Cara instalnya sangat mudah jadi tidak perlu dijelaskan :D , syaratnya harus menggunakan web browser opera dan atau chrome, demikian itu pada keterangan yang ada di website AMP Project. Untuk mozila firefox saya rasa ekstensi AMP validator belum ada, saya cari-cari tetapi tidak ketemu.

Setelah memasang ekstensi ekstensi AMP validator maka logo AMP akan tampak di sisi kanan atas pada web browser. Berikut beberapa keterangan warna pada logo Accelerated Mobile Pages:

1. Logo AMP warna hitam putih ; menandakan halaman tersebut non AMP
2. Logo AMP warna hijau ; menunjukkan halaman valid AMP
3. Logo AMP warna biru ; menerangkan halaman tersedia dalam versi AMP
4. Logo AMP warna merah ; menegaskan halaman tersebut invalid AMP

Lalu bagaimana cara memperbaiki eror AMP? Untuk memperbaiki eror atau kesalahan AMP bisa dilakukan setelah mengetahui hasil uji validasinya, kemudian melihat apa saja kesalahan yang mungkin tidak berlaku untuk AMP.

Seperti yang terlihat pada gambar di atas tag attribut style tidak diperbolehkan. Tag style tersebut muncul sebagai kesalahan sebab saya menggunakan teks rata tengah dengan CSS inline <div style="text-align: center;">. Untuk menghilangkan kesalahan tersebut maka CSS inline tersebut harus dihapus.

Berarti tidak bisa menggunakan teks rata tengah atau rata kanan kiri dong? Bisa saja, yaitu dengan menambahkan CSS sendiri pada template AMP kita sebagai pengganti attribut style menjadi class. Akan hal ini saya sempat mempelajarinya, untuk lebih lengkapnya silahkan baca postingan sebelumnya.

Baca juga:
Memahami Cara Edit CSS pada Template AMP

Nah demikian Cara Mengetahui Validitas Halaman AMP HTML beserta beberapa eror AMP yang baru saya ketahui. Banyak yang masih belum saya ketahui terutama blog yang berplatform wordpres. Mungkin teman-teman bisa berbagi pengalamannya di kolom komentar.

Oh iya, sekedar tambahan. Kemarin saya sempat mengalami permasalahan seperti ini, pada logo ekstensi AMP validator terdapat 1 eror, tetapi setelah saya cek debug ternyata statusnya sudah pass (tidak ada eror). Kemudian saya tanya kepada ahlinya Adhy Suryadi, penyebabnya adalah akses internet indihome yang kita gunakan. Jadi bagi teman-teman pengguna indihome tidak perlu khawatir jika ada permasalahan seperti ini.