Skip to main content

follow us

Cara Membuat Thumbnail atau Gambar Valid AMP



Gambar memiliki peranan penting bagi sebuah artikel. Dengan menambahkan gambar pada artikel yang kita buat memungkinkan pengunjung bisa lebih menikmati membaca postingan yang telah kita publikasikan. Cara menambahkan gambar pada artikel yang kita buat di blogger juga tergolong mudah, yaitu tinggal mengklik icon image lalu pilih dan upload gambar yang sesuai dengan isi pembahasan kita. Namun sedikit berbeda jika Anda menggunakan template AMP pada blog yang di kelola.

AMP singkatan dari Accelerated Mobile Pages dalam bahasa Indonesia "laman seluler yang dipercepat". Artinya situs web yang di optimalkan dengan AMP akan dimuat dengan cepat walaupun dengan internet yang berkecepatan lambat. Setidaknya ada dua kelebihan yang mencolok dari penggunaan template AMP dibandingkan dengan template biasa, yaitu Thrilling Speed and Lower Bounce Rates.

Dengan menggunakan template AMP pada blog, tidak menutup kemungkinan postingan yang telah kita publikasikan akan mendapatkan peringkat terbaik dimesin pencari Google. Karena Google sangat menyukai blog yang mempunyai kecepatan loading yang baik. Oleh karena itu saya sarankan untuk para blogger menggunakan template yang valid AMP pada blog yang Anda kelola.

Struktur kode template AMP sangat berbeda dengan template blog biasa. Jadi ada sedikit perbedaan yang akan kita temui jika menggunakan template AMP, salah satunya dalam memasukan Gambar atau Thumbnail pada artikel yang kita buat supaya gambar tersebut valid AMP. Nah, jadi pada tulisan kali ini admin akan membahas bagaimana cara membuat Gambar atau Thumbnail valid AMP pada postingan di blogger.


Cara Membuat Thumbanil Valid AMP


Untuk menambahkan gambar pada postingan agar valid AMP, pada kode html biasa menggunakan img, maka pada struktur AMP menggunakan amp-img. Jadi intinya kita harus mengedit sedikit kode html bawaan blogger ketika insert / menambahkan gambar pada postingan yang akan di publikasikan.

Perlu kamu ingat dan catat postingan gambar AMP terbagi menjadi 2 bagian, yaitu gambar Thumbnail yang berguna sebagai cover dari postingan dan gambar tambahan sebagai gambar dari isi postingan. Oleh karena itu, kamu diharuskan untuk memahami perbedaan keduanya agar nanti gambar pada postingan tidak dobel.


1. Gambar Thumbnail (cover)
Gambar Thumbnail (cover) adalah gambar thumbnail untuk postingan yang di publikasikan. Gambar ini biasanya berada paling depan / atas dan gambar ini juga akan muncul di halaman utama atau homepage. Untuk menambahkan gambar thumbnail (cover) pada postingan yang akan dibuat di template AMP, maka gunakanlah kode berikut ini pada mode html :

“<noscript><img width="1080" height="610" alt='judul gambar' src='link-gambar'/></noscript>”


2. Gambar Tambahan
Gambar selain thumbnail adalah gambar tambahan. Gambar ini tidak muncul di halaman utama/homepage melainkan gambar yang muncul pada isi artikel yang akan di publikasikan. Untuk menambahkan gambar tambahan pada postingan agar valid AMP, maka gunakanlan kode berikut ini pada mode html :

“<amp-img src="link-gambar" width="1080" height="610" layout="responsive" alt="Judul Gambar"></amp-img>”

Silahkan kamu atur sendiri ukuran width (lebar) dan height (tinggi) gambar pada postingan, baik pada gambar thumbnail atau gambar tambahan. Perlu diingat, yang membedakan keduanya ialah kode <noscript> pada gambar thumbnail atau tambahan. Tidak peduli gambar utama diletakan dibagian mana saja, apabila gambar tersebut disisipkan kode <noscript> maka otomatis gambar akan berada dipaling atas pada artikel dan akan menjadi gambar thumbnail pada postingan.

You Might Also Like:

Oldest Post
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar