√ Fix Error pada AMP Blogger

Introduction

Ini adalah artikel yang ditulis oleh saya sebagai referensi kedepannya untuk saya dan juga untuk yang membutuhkannya. Sebagian besar dari masalah ini adalah error yang pernah dialami oleh saya sendiri. Dan juga artikel ini insyaallah akan di-update jika ada pembaruan.

'Err' pada plugin AMP validator

Penyebab

• Kemungkinan error tersebut muncul dikarenakan Anda terlalu banyak klik plugin tersebut sehingga menyebabkan malfungsi.
• Resource yang dibutuhkan plugin AMP Validator kurang. Ada kemungkinan saat anda pertama membuka browser ada beberapa resource yang kurang, sehingga error tersebut muncul.

Solusi

Ada beberapa cara untuk mengatasi error tersebut pada plugin AMP Validator.

• Reload browser anda kembali.
• Re-install plugin AMP Validator. (Recommended). Worked
• Restart komputer anda.

Stylesheet too long

Kemunculan error

“The author stylesheet specified in tag ‘style amp-custom’ is too long – document contains …. bytes whereas the limit is ….. bytes.”

Atau semacam hal seperti itu dengan judul yang sama.

Penyebab

Hanya ada satu penyebab masalahnya yaitu code CSS dalam tag <style amp-custom> anda sudah melebihi maksimum.

Note: untuk saat ini AMP pada blogger dibatasi dari yang sebelumnya 50000 bytes menjadi 75000 bytes. Dan kemungkinan akan bertambah seiring berjalannya fitur baru dan juga perkembangannya

Solusi

Solusi saat terjadi error seperti adalah dengan cara mengkompress/reduce/minify pada code CSS anda. Penulisan code CSS yang direkomendasikan oleh saya adalah dengan menghapus delimiter pada setiap bagian code terakhir sebelum tanda } dengan contoh

.navbar{background:#000;display:block}

Dan juga jika ada penambahan CSS baru akan seperti ini

.navbar{background:#000;display:block}.side{background:#fff}

Jika masih bimgung, saya merekomendasikan tempat minify CSS anda pada website online yaitu https://cssminifier.com/ atau CSS minify online lainnya. Perlu diperhatikan juga website tersebut akan menghapus comment tag pada CSS(/**/)

Jika anda sudah minify CSS anda tetapi terdapat error tersebut. Silahkan sortir CSS anda yang tidak dibutuhkan dan pisahkan pada versi mobile dan desktop. Dengan contoh sebagai berikut

<b:if cond='data:view.isMobile'> <style amp-custom='amp-custom'> /*Isi code CSS Anda pada mode mobile*/ </style> </b:if>

Jika pada versi desktop

<b:if cond='!data:view.isMobile'> <style amp-custom='amp-custom'> /*Isi code CSS Anda pada mode desktop Anda bisa mengisi seperti code untuk style dark mode*/ </style> </b:if>

Masalah pada parameter ?amp=1 pada blogger.

Baru baru ini blog saya yang memiliki dua tampilan AMP dan mode desktopnya mengalami masalah yaitu tidak terbacanya mode AMP nya, setelah saya mencari tahu permasalahannya ternyata pada conditional url + parameter ?amp=1 tidak merender mode AMPnya. Setelah bertanya-tanya kemudian saya mendapatkan jawaban yang memuaskan keingintahuan saya di Grup Blogger dan akhirnya dibalas oleh salah satu engineernya. berikut adalah jawabannya:

Jika ditranslate ke bahasa Indonesia:

Salam,
Pengaturan yang tidak didukung secara resmi oleh Blogger telah dibersihkan dalam data.

Dalam prakteknya, view.url hanya berisi beberapa parameter resmi seperti "m", "hl", dll ... Jadi, secara logis, kondisi yang Anda coba tidak bisa lagi berfungsi.

Blogger Engineering berencana untuk menempatkan kembali parameter "amp" dalam pengecualian dan membuatnya tersedia lagi di pembaruan berikutnya.

Untuk saat ini, kita hanya harus menunggu. ;)

Dapat yang bisa kita baca blogger telah menghapus parameter yang tidak resmi (termasuk parameter ?amp=1).

Yah kita hanya perlu menunggu dan bersabar saja.

Lalu. bagaimana blogger yang masih bisa menggunakan parameter ?amp=1. ?
Menurut saya itu adalah chache yang masih tersimpan dalam system AMP, seiring berjalannya waktu juga nanti semua akan sama.

Yah satu satunya solusi adalah hanya menunggu saja, karena ini CMS gratis jangan menuntut lebih.

Masalah yang muncul

Saran saya setelah anda mengetahui ini anda harus memutuskan, lebih baik segera memperbaiki/menghapus code tersebut. atau nanti akan muncul notifikasi pada Search Console anda seperti berikut:

Bagamana cara memperbaikinya?

Anda hanya perlu menonaktifkan kode tag <link> yang diakhiri dengan rel=amphtml dari template anda.

Pertama cari code: rel=amphtml

<link ............ rel="amphtml">

Nonaktifkan menjadi seperti berikut:

<!--<link .......... rel='amphtml'/>-->

Kenapa harus dinonaktifkan bukannya dihapus?

Yah berharap saja jika ada pembaruan secepatnya dan parameter atau mode AMP bisa digunakan kembali. Anda hanya perlu meng-aktifkannya lagi.

Saya ingin tetap memakai mode AMP

Jika masih ingin tetap memakai mode amp, lakukanlah seperti berikut ini.

• Pertama, anda perlu copy dan paste template anda ke code editor kesayangan anda. Jika tidak mempunyai code editor anda bisa menggunakan Ms. Word atau lainnya(Yang mendukung find+replace all pada document)
• Selanjutnya klik code Ctrl + H pada windows atau Comamnd + H pada Apple cari code params { amp: &quot;1&quot; }, lalu ubah menjadi params { m: &quot;1&quot; }
• Kemudian copy dan paste kembali pada blogger template anda. Selesai.

Note Jika anda melakukan hal tersebut anda harus mengorbankan versi mobile untuk dijadikan versi AMPnya (yah memang AMP pada dasarnya diperuntukkan untuk mengubah versi mobile menjadi lebih cepat.).

Apakah bisa membuat mode amp selain versi di atas?

Saya sudah menggunakan berbagai cara dan hasilnya tetap tidak bisa, jika anda jeli terhadap jawaban di atas. Bahwa parameter hl bisa digunakan, saya sudah mencoba hal tersebut. Namun hasilnya tetap tidak terindeks oleh AMP Validator dari website resminya (Bukan plugin AMP Validator)

Update 31/07/2021: Sekarang parameter ?amp=1 sudah bisa dipakai kembali. Mungkin ada beberapa yang belum, jadi cara di atas masih bisa digunakan

Jika masih bingung anda bisa bertanya langsu ke komentar. dan insyaallah post ini akan diupdate dan di tambah.