Cara Membuat Artikel atau Postingan Valid AMP HTML

Source: jagodesain.com

Accelerated Mobile Pages atau disingkat menjadi AMP merupakan layanan gratis yang berfungsi untuk memuat laman pada perangkat seluler lebih cepat dan ringan.

Sekilat tidak ada perbedaan dari cara menulis artikel untuk AMP dan Non-AMP, hanya saja bagian yang paling terlihat mencolok adalah pemanggilan gambar yang tidak menggunakan tag <img/> melainkan menggunakan tag <amp-img/>, jadi jika Anda bermigrasi menggunakan template AMP maka Anda harus mengubah semua gambar pada postingan Anda.

Memasang gambar utama(Thumbnail) dari postingan

Seperti kita ketahui Blogger tidak bisa membaca gambar dengan <amp-img/>, jadi thumbnail postingan Anda pada homepage tidak akan muncul, atau ketika Anda share artikel ke media sosial gambar thumbnail artikel Anda tidak akan muncul.

Untuk mengatasinya gunakan kode dibawah ini pada bagian awal postingan Anda.

<noscript><img alt='Judul_alt_gambar' src='Url_gambar.jpg' title='Judul_gambar'/></noscript>

Ganti bagian yang di blok warna dengan url gambar yang ingin Anda gunakan sebagai gambar utama postingan.

Menambahkan gambar pada isi artikel

Seperti yang dijelaskan diatas gambar pada AMP berbeda dengan gambar pada Non-AMP, contoh kode untuk memasang gambar adalah seperti dibawah ini:

<amp-img alt='Judul_alt_gambar' height='300' layout='responsive' src='Url_gambar.jpg' width='430'/>

Ubah ukuran gambar dan layout nya sesuai keinginan Anda.

Embed video Youtube pada postingan(optional)

Gunakan kode di bawah ini untuk menampikan video dari Youtube kedalam postingan Anda.

  1. Ambil kode video dari url video Youtube yang ingin Anda gunakan.
  2. Letakkan pada kode amp-youtube.
  3. Simpan kode pada postingan Anda.

Kode amp-youtube

<amp-youtube data-videoid='xxxxxxxxxxx' height='270' layout='responsive' width='480'/>

Ubah bagian yang di blok warna dengan kode video Youtube pilihan Anda.

LihatTutupKomentar