Tutorial Cara Memunculkan Thumbnail Pada AMP HTML Blogger

GalaPos ID, Jakarta.
Dalam dunia SEO dan pengoptimalan kecepatan website, AMP (Accelerated Mobile Pages) menjadi salah satu teknologi yang terus mendapat perhatian.
Namun, banyak praktisi SEO dan pengelola website yang kembali dihadapkan pada permasalahan terkait penggunaan tag gambar dalam AMP HTML.

Trik Mudah Atasi Error Gambar di AMP HTML Agar Thumbnail Muncul di Homepage

"Bingung kenapa gambar di homepage kamu tidak muncul setelah pakai AMP? Jangan khawatir, ada trik sederhana yang wajib kamu coba agar gambar tetap tampil sempurna tanpa error."

Baca juga:

Gala Poin:
1. Penggunaan tag <img> biasa di AMP HTML menyebabkan error validasi, harus diganti menjadi <amp-img> dengan atribut lengkap.
2. Gambar yang ditampilkan dengan <amp-img> kadang tidak muncul sebagai thumbnail di homepage.
3. Menambahkan tag <noscript> dengan tag <img> di dalamnya adalah solusi sederhana agar thumbnail gambar muncul di homepage tanpa error.


Seperti diketahui, tag <img> pada HTML biasa harus diganti menjadi <amp-img> agar validasi AMP tidak error. Jika pada postingan Anda menulis kode gambar seperti:

<img alt='gambar' src='url-image'/>

maka validasi AMP akan gagal dan menghasilkan error. Penulisan yang benar untuk AMP adalah sebagai berikut:

<amp-img src="url-image-disini"
width="1080"
height="610"
layout="responsive"
alt="AMP HTML"></amp-img>


Dengan cara ini, gambar akan muncul dengan baik pada postingan AMP. Namun, masalah muncul saat gambar tersebut tidak tampil sebagai thumbnail di halaman utama (homepage) website.

Baca juga:
Lucius Karus: Jabatan DPR Tak Kenal Pensiun, Ini Salah!

Solusi Mudah Agar Thumbnail AMP Muncul di Homepage
Untuk mengatasi kendala thumbnail yang tidak tampil, Anda dapat menambahkan tag <noscript> yang berisi tag <img> biasa di dalamnya. Contohnya:

<noscript><img alt='gambar' src='url-gambar-anda'/></noscript>

Kode ini memastikan bahwa meskipun AMP menggunakan <amp-img>, browser akan tetap menampilkan gambar pada homepage sebagai fallback ketika JavaScript dimatikan atau saat thumbnail diperlukan.

Langkah Praktis untuk Pengelola Website
Anda bisa langsung mencoba menambahkan tag <noscript> di bawah tag <amp-img> pada setiap gambar postingan yang ingin dijadikan thumbnail. Cara ini efektif untuk memperbaiki tampilan gambar di homepage tanpa melanggar aturan validasi AMP.

 

Baca juga:
Kunci Aman Mendaki Gunung: Mental, Fisik, Ilmu dan Logistik

"Update penting untuk para praktisi SEO: perubahan tag gambar pada AMP HTML bisa menyebabkan error validasi dan thumbnail gambar tak muncul di homepage. Simak solusi mudah mengatasinya agar website tetap optimal."

#GalaPosID #MediaPublikasiIndonesia #AMPHTML #SEOTips #WebDevelopment

Lebih baru Lebih lama

نموذج الاتصال