Sering Terjadi, Cara Mudah Mengatasi Pesan Error AMP Validator pada Template VioMagz AMP
Ditulis pada: May 10, 2021
Cara Mudah Mengatasi Pesan Error AMP Validator pada Template VioMagz AMP
Template VioMagz AMP v0.1 ini satu bundle alias sepaket dengan template VioMagz yang di rilis pada Maret 2018 yang lalu untuk para pengguna resminya. Anda tidak perlu membeli lagi template versi AMP ini untuk mendapatkannya, cukup membeli template VioMagz original dari Mas Sugeng terlebih dahulu.Dilansir dari laman sugeng.id, template ini memiliki banyak fitur dan kelebihan, berikut kutipannya kami sampaikan :
Template ini memiliki halaman Valid AMP di URL versi mobile : https://amp.viomagz.com/?m=1
Tersedia template non-AMP di URL versi desktop : https://amp.viomagz.com/ atau https://amp.viomagz.com/?m=0
Memiliki kecepatan Loading diatas rata-rata
Desainnya sangat bersih dan rapi
dan masih banyak lagi.
Pada situs resminya, sudah dibuatkan tutorial penggunaan dari template ini. Namun, dari tutorial yang diberikan mas sugeng pada halaman https://sugeng.id/cara-setting-template-viomagz-amp/ tidak dijelaskan bagaimana rincian settingan, agar template VioMagz versi AMP 100 persen valid secara struktur data AMP yang benar.
Tetntunya saja sebelum menerapkan template, bagi anda pengguna awam, yang pertama kali dilakukan setelah memasang template versi AMP wajib melakukan pengecekan validasi dalam penerapan template tersebut. Hal ini dilakukan agar memastikan anda memiliki template amp HTML yang sudah valid (hijau semua, tidak ada warna kuning, apa lagi merah).
Bagaimana cara mengecek template valid AMP HTML? Ada beberapa cara yang dapat anda lalukan untuk melakukan pengecekan, apakah template blog anda sudah valid atau belum valid AMP HTML, dengan cara berikut :
Menggunakan halaman https://search.google.com/test/amp
Menggunakan halaman https://validator.ampproject.org/
Cara profesional, dengan Install terlebih dahulu extension AMP Validator pada browser google Chrome atau Mozilla firefox yang akan melakukan fungsi pengecekan, apakah template versi AMP yang anda gunakan pada blog anda sudah valid atau belum.
Namun dari ketiga cara tersebut, saya sendiri lebih menyarankan untuk melakukan install extension AMP Validator pada browser yang anda gunakan, ini lebih mudah ketimbang selalu mengakses website untuk melakukan pengecekan apakah sudah Valid AMP?
Setiap kali anda melakukan pengeditan template, ada baiknya selalu melakukan pengecekan validasi, inilah yang menjadi tantangan dalam penggunaan template pada versi AMP.
Dalam penggunaan Template VioMagz-AMP, ada hal yang harus lakukan agar secara struktural data valid, tiga hal berikut ini yang sering terjadi disaat dan pertama kali mempergunakan Template VioMagz-AMP.
Berikut adalah langkah-langkah yang dapat dilakukan untuk mengatasi hal tersebut.
#Masalah Custom JavaScript is not Allowed
Setiap kali anda melakukan pengeditan template, ada baiknya selalu melakukan pengecekan validasi, inilah yang menjadi tantangan dalam penggunaan template pada versi AMP.
Dalam penggunaan Template VioMagz-AMP, ada hal yang harus lakukan agar secara struktural data valid, tiga hal berikut ini yang sering terjadi disaat dan pertama kali mempergunakan Template VioMagz-AMP.
Berikut adalah langkah-langkah yang dapat dilakukan untuk mengatasi hal tersebut.
#Masalah Custom JavaScript is not Allowed
Ketika pertama kali menguji validasi template AMP, tentu saja setelah terapkan template ke blog, yang terlihat biasa-biasa, sekilas mata, tidak ada yang berbeda pada template ini, baik dalam hal penerapannya dengan template blogger versi umumnya maupun dari tampilannya.
Begitu anda memposting artikel dan melakukan uji URL pada google webmaster, Anda akan mengetahui ada yang berbeda pada template jenis amp ini. Setelah melakukan pengecekan validasi AMP yang disyaratkan agar fitur yang diinginkan pada template dapat berjalan dengan semestinya.
Berikut ini hal yang sering terjadi pada saat menggunakan template VioMagz-AMP adalah anda akan sering mendapat pesan error pada AMP Validator pada line 2 (pada atribut xmlns...), line 2279 dan Line 2289 (Custom JavaScript is not Allowed). Bagi blogger newbie penggunaan template ini pastinya pesan error ini membuat anda bingung.
#Mengatasi Error pada Custom JavaScript is not Allowed
Begitu anda memposting artikel dan melakukan uji URL pada google webmaster, Anda akan mengetahui ada yang berbeda pada template jenis amp ini. Setelah melakukan pengecekan validasi AMP yang disyaratkan agar fitur yang diinginkan pada template dapat berjalan dengan semestinya.
Berikut ini hal yang sering terjadi pada saat menggunakan template VioMagz-AMP adalah anda akan sering mendapat pesan error pada AMP Validator pada line 2 (pada atribut xmlns...), line 2279 dan Line 2289 (Custom JavaScript is not Allowed). Bagi blogger newbie penggunaan template ini pastinya pesan error ini membuat anda bingung.
#Mengatasi Error pada Custom JavaScript is not Allowed
Template AMP itu sangat ribet, anda tidak bisa menggunakan javascript pada widget recent post, ataupun pada tubuh template anda. Error pada custom JavaScript is not Allowed akan muncul, jika anda paksakan. Sebenarnya, template AMP tidak support penerapan javascript karena itulah hal ini terjadi karena .
Sedangkan yang terjadi pada Template VioMagz-AMP, disaat anda melakukan pertama kali penerapan blog dan melakukan pengecekan AMP Validator, tidak perlu bingung JavaScript apa yang harus di hapus.
#widget navbar dan pilih "off"
Navbar harus anda posisikan pada OFF, jika tidak pesan error akan muncul. Untuk mengatasi ini, Anda hanya perlu melakukan pengaturan pada tab menu tata letak [layout]. Kemudian dilanjutkan dengan memilih widget navbar dan pilih "off" dan simpan. Ini sebagai langkah terakhir untuk menerapkan nya, kemudian coba lakukan pengecekan validasi kembali.
Jika icon AMP Validator sudah menjadi hijau, settingan website anda sudah memiliki fitur AMP yang di persyaratkan.
#Mengatasi Error pada atribut xmlns
Error dengan kode, atribut xmlns akan muncul setiap kali anda menyimpan (save) pengaturan template. Untuk mengatasi ini, ternyata caranya sangat gampang, tutp matapun anda bisa mengatasi hal tersebut, Langkahnya adalah pilih menu tab tema > Edit HTML, temukan kode dibawah ini, lalu silahkan dihapus kode yang saya beri tanda berikut.
Sedangkan yang terjadi pada Template VioMagz-AMP, disaat anda melakukan pertama kali penerapan blog dan melakukan pengecekan AMP Validator, tidak perlu bingung JavaScript apa yang harus di hapus.
#widget navbar dan pilih "off"
Navbar harus anda posisikan pada OFF, jika tidak pesan error akan muncul. Untuk mengatasi ini, Anda hanya perlu melakukan pengaturan pada tab menu tata letak [layout]. Kemudian dilanjutkan dengan memilih widget navbar dan pilih "off" dan simpan. Ini sebagai langkah terakhir untuk menerapkan nya, kemudian coba lakukan pengecekan validasi kembali.
Jika icon AMP Validator sudah menjadi hijau, settingan website anda sudah memiliki fitur AMP yang di persyaratkan.
#Mengatasi Error pada atribut xmlns
Error dengan kode, atribut xmlns akan muncul setiap kali anda menyimpan (save) pengaturan template. Untuk mengatasi ini, ternyata caranya sangat gampang, tutp matapun anda bisa mengatasi hal tersebut, Langkahnya adalah pilih menu tab tema > Edit HTML, temukan kode dibawah ini, lalu silahkan dihapus kode yang saya beri tanda berikut.
Letak dari kode ini, ada pada bagian atas sekali.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>
<head>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:attr cond='data:blog.isMobileRequest == "true"' name='amp' value='amp'/>
<head>
Silahkan anda ganti dengan kode berikut dibawah ini.
<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id'>
#Mengatasi Pesan Error AMP pada Struktur Widget Sidebar
Mungkin, widget default bawaan template tidak sesuai dengan keinginan anda. Karena itu, anda mau menambah widget sidebar pada template/tema blogger pada versi non AMP.
Tentu saja pengurangan atau penambahan widget tidak menjadi masalah, apalagi pada template non-amp, aman-aman saja. Namun jika Anda melakukan hal ini pada template AMP HTML, akan menjadi masalah tidak valid. Menurut Anda tidak ada yang berbeda secara langsung di saat menambahkan widget sidebar, namun, ada yang terjadi.
Kode script baru akan ditambahkan pada template anda, sangat berpengaruh pada struktur data template AMP, Google Search Consulte Team akan memberikan informasi kepada anda, bahwa terdapat masalah AMP baru terdeteksi pada situs. Cara paling cepat mengetahui masalah ini, Anda dapat menggunakan extension AMP Validator yang telah saya jelas diatas.
Solusi Setiap tambah widget akan ada errorAda hal yang unik terjadi pada saat anda melakukan penambahan widget, baik itu html/jacascript, maupun widget lainnya. Tenang saja, anda tidak perlu panik, anda hanya perlu melakukan langkah penghapusan kode berikut, setiap anda menambah widget baru. Hal ini terjadi, karena pada saat menambah widget, kode <b:include name='quickedit'/> akan otomatis lahir. Untuk memperbaiki masalah ini solusinya sangat mudah.
Kode script baru akan ditambahkan pada template anda, sangat berpengaruh pada struktur data template AMP, Google Search Consulte Team akan memberikan informasi kepada anda, bahwa terdapat masalah AMP baru terdeteksi pada situs. Cara paling cepat mengetahui masalah ini, Anda dapat menggunakan extension AMP Validator yang telah saya jelas diatas.
Solusi Setiap tambah widget akan ada errorAda hal yang unik terjadi pada saat anda melakukan penambahan widget, baik itu html/jacascript, maupun widget lainnya. Tenang saja, anda tidak perlu panik, anda hanya perlu melakukan langkah penghapusan kode berikut, setiap anda menambah widget baru. Hal ini terjadi, karena pada saat menambah widget, kode <b:include name='quickedit'/> akan otomatis lahir. Untuk memperbaiki masalah ini solusinya sangat mudah.
Cukup anda cari kode berikut pada bagian tab template / tema blog, edit HTML :
<b:include name='quickedit'/>
Temukan kode tersebut kemudian silahkan DIHAPUS, untuk mempermudah pencarian gunakan fitur "CTRL + F" gunakan kombinasi tombol keyboard setelah menu edit HTML benar-benar muncul, terakhir setelah ditemukan hapus dan klik tombol simpan tema dan lakukan pengecekan validasi AMP.
Bagaimana mudah bukan?
Semoga tulisan sederhana ini bermanfaat, Tolonglah artikel ini di share di berbagai media sosial anda, mungkin sobat sudah merasakan manfaatnya, untuk itu, bisa jadi temanmu ada yang membutuhkan Cara Mengatasi Pesan Error AMP Validator pada Template VioMagz AMP ini.
