Tutorial Cara Memunculkan Thumbnail Pada AMP HTML Blogger

Du-ki Dunia Kita du-ki.com April 16, 2024 Posting Komentar

Pasti anda sudah tahu bukan dalam dunia SEO Dan Google, kita kembali dikejutkan dengan AMP Alias Accerate Mobile Pages

Sebagaimana kita ketahui, bahwa tag imgpada AMP HTML berubah menjadi amp-img. Apabila kita menuliskan pada postingan seperti ini :

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

Maka akan mengakibatkan error validasi AMP HTML. Penulisan yang benar seperti disini yaitu :

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

Image akan muncul dengan baik pada postingan. Akan tetapi tidak akan muncul pada thumbnail di halaman utama / homepage.

Untuk mengakalinya, agar image muncul pada Homepage tambahkan tag noscript sehingga kode menjadi seperti ini :

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

Silahkan langsung di coba saja dan lihat hasil nya, jika cara pertama di atas tidak berhasil, coba gunakan cara Tambahan Berikut...

Tambahan

1. Buka dashboard Blogger dan pilih blog yang ingin kmau edit.

2. Pilih "Tema" di menu sebelah kiri.

3. Klik tombol "Edit HTML" untuk mengedit kode template.

4. Cari kode `<head>` di dalam kode template.

5. Tambahkan kode berikut di bawah kode `<head>`:

```html

```

Kode ini akan memuat library AMP untuk mengaktifkan fitur gambar pada halaman AMP.

6. Cari kode `<body>` di dalam kode template.

7. Temukan bagian yang menampilkan daftar postingan pada halaman utama atau homepage.

8. Di dalam bagian tersebut, cari kode yang menampilkan thumbnail atau gambar pada setiap postingan.

9. Pastikan kode tersebut menggunakan tag `<amp-img>` untuk menampilkan gambar. Jika tidak, kamu juga perlu menggantinya dengan tag `<amp-img>`.

10. Pastikan juga bahwa atribut `src` pada tag `<amp-img>` mengarahkan ke URL gambar yang ingin ditampilkan sebagai thumbnail.

11. Simpan perubahan yang kamu buat pada kode template.

12. Periksa halaman blog kamu untuk melihat apakah thumbnail sudah muncul pada postingan.

Dengan mengikuti langkah-langkah di atas, kmau seharusnya dapat memunculkan thumbnail pada AMP HTML Blogger. Pastikan untuk menyimpan perubahan yang kmau buat dan periksa tampilan blog kamu setelahnya.

Selamat mencobanya

Posting Komentar untuk "Tutorial Cara Memunculkan Thumbnail Pada AMP HTML Blogger"

Posting Komentar

Terimakasih sudah berkunjung ke blog sederhana ini, semua komentar dan saran yang membangun, akan dijadikan pertimbangan untuk perbaikan isi blog dan pengembangan materi blog dimasa mendatang. salam du-ki.com