Cara Menghindari Error AMP HTML di Blogger



Menggunakan template AMP HTML pada Blogger tentunya bukan hal yang mudah, salah satunya adalah karena belum ada dukungan dari Blogger terhadap penggunaan AMP pada halaman blog. Ada berbagai aturan yang perlu diperhatikan agar blog dengan template AMP HTML bisa valid dan tidak memiliki error. Mengingat AMP HTML diluncurkan belum terlalu lama sehingga masih banyak pengguna yang merasa asing dengan aturan AMP.

Berbeda dengan aturan XML umum yang telah digunakan sejak lama di Blogger yang aturannya lebih sedikit dan mudah dipahami, bagi pemula yang menggunakan AMP HTML pada template blogger tentunya menginginkan agar blog bisa valid AMP HTML. Untuk mengatasi hal tersebut ada beberapa tips dan cara yang bisa kamu coba untuk menghindari error validasi AMP HTML di Blogger.

Menulis postingan atau menulis artikel merupakan kegiatan yang sangat sering dikerjakan oleh pengguna Blogger untuk mengembangkan blognya. Namun untuk membuat postingan yang valid AMP HTML memang adalah hal yang cukup membingungkan bagian sebagian orang. Terlebih untuk menyisipkan gambar, embed video, dan sebagainya. Oleh karena itu berikut ini beberapa tips dan cara yang bisa kamu gunakan agar blog kamu valid AMP HTML. Pada awalnya memang akan terlihat membingungkan tetapi jika telah terbiasa pasti akan jadi lebih mudah.

Hilangkan atribut style di dalam postingan

Salah satu aturan validasi pada AMP HTML adalah tidak boleh menggunakan attribut style pada tag apapun. Apa itu atribut style? Yaitu sebuah atribut — seperti class, id, href, src — yang menyimpan nilai CSS langsung pada baris yang sama dengan sebuah tag. Misalnya <div style="text-align:center;font-size:3.5rem;padding:10px;">Isi dari tag div di sini!</div>. Untuk mengatasi hal tersebut kamu bisa menambahkan atribut class, beri nama sesuai keinginan, lalu tambahkan nilai CSS secara terpisah menggunakan tag <style> dengan atribut amp-custom. Contohnya adalah sebagai berikut:

<style amp-custom='amp-custom'>
  .nama-kelas {
    text-align: center;
    font-size: 3.5rem;
    padding: 10px;
  }
</style>

<div class="nama-kelas">Isi dari tag div di sini!</div>

Jika menyisipkan gambar (di luar postingan)

Maksudnya adalah gambar yang muncul selain pada postingan, misalnya logo header, foto profil pada widget, atau gambar lainnya yang ditambahkan langsung pada kode HTML blog. Biasanya tempat mengupload gambar yaitu melalui postingan. Yang perlu diperhatikan ketika menyisipkan gambar pastikan menggunakan original size dan cukup salin tag gambarnya saja. Biasanya secara default kode HTML setelah gambar disisipkan adalah:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ZxVK-_1w5E0/XSq6N56vbNI/AAAAAAAAJWc/bUBXjAvJ-i4pOb6lhxwIKS43rrsPFT8jACPcBGAYYCw/s1600/amp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Teks alt untuk gambar" border="0" data-original-height="508" data-original-width="900" src="https://1.bp.blogspot.com/-ZxVK-_1w5E0/XSq6N56vbNI/AAAAAAAAJWc/bUBXjAvJ-i4pOb6lhxwIKS43rrsPFT8jACPcBGAYYCw/s1600/amp.jpg" title="Teks title untuk gambar" /></a></div>

Cukup ambil bagian yang ditandai saja (scroll ke kanan jika tidak kelihatan) kemudian letakkan dalam tag <noscript>. Contohnya seperti berikut:

<noscript><img alt="Teks alt untuk gambar" data-original-height="508" data-original-width="900" src="URL_GAMBAR" title="Teks title untuk gambar" /></noscript>

Selain itu bisa juga menambahkan tag amp-img agar gambar utama juga bisa tampil pada bagian paling atas postingan blog kamu. Jadi kamu bisa membuatnya seperti kode berikut ini:

<noscript><img alt="Cara Membuat Postingan AMP di Blogger" width="364" height="700" src="URL_GAMBAR" title="Cara Membuat Postingan AMP di Blogger" /></noscript><amp-img src="URL_GAMBAR" width="700" height="364" layout="responsive" alt="Teks ALT Gambar"></amp-img>

Jika menyisipkan gambar (dalam postingan)

Sebelumnya saya pernah membahas tentang Cara membuat postingan AMP di Blogger, dan di dalamnya saya telah menjelaskan tentang bagaimana menyisipkan gambar kedalam postingan blogger agar tetap valid AMP HTML. Selain itu ada juga beberapa jenis tag amp-img dan tambahannya yang dapat kamu gunakan sesuai kebutuhan. Silakan buka di sini.

Menyisipkan slide gambar

Gambar bisa disisipkan pada postingan blog AMP HTML dengan tampilan slide yang dapat berganti dari satu gambar ke gambar lainnya. Saya telah membahasnya pada posting saya sebelumnya yaitu Menyisipkan Slide Gambar pada AMP Blogger.

Menyisipkan video dan musik

Untuk menyisipkan video pada posting AMP di blog kamu, ada beberapa video yang mungkin bisa kamu sisipkan. Yang paling populer mungkin adalah Youtube dan beberapa dari Facebook. Untuk mengetahui lebih lengkap tentang cara menyisipkan video pada postingan blog AMP kamu bisa melihatnya secara lengkap pada Memasang Embed yang Valid di Blog AMP HTML.

Selain itu pada halaman tersebut juga terdapat beberapa embed yang dapat kamu gunakan untuk menyisipkan lagu yang kamu inginkan pada blog AMP HTML dan tentu saja valid AMP HTML.

Menambahkan widget/gadget baru

Yang satu ini bisa menjadi salah satu sumber error AMP HTML ketika kamu menambahkan widget baru di Blogger. Melalui menu Tata Letak atau Layout kamu bisa menambahkan widget baru melalui tombol "Tambah Gadget", namun perhatikan setelah menambahkan widget tersebut coba cek pada bagian Tema lalu klik tombol Edit HTML, temukan kode <b:include name='quickedit'/> dan hapus kode tersebut.

Penutup

Cara di atas dapat kamu gunakan sebagai tips untuk menghindari adanya error validasi AMP HTML pada blog AMP kamu. Meskipun terlihat cukup sederhana namun bagi kamu yang baru memulai menggunakan AMP pada blog yang telah memiliki banyak konten, maka mungkin akan jadi sedikit lebih merepotkan untuk mengedit satu per satu postingan yang telah ada dan mengubah kode yang tidak valid menjadi benar. Selanjutnya saya akan membahas tentang cara mudah mengedit postingan di blog AMP. Terima kasih dan sampai jumpa!
Disqus Comments