Bagaimana Cara Membuat Artikel atau Postingan Valid AMP HTML

Source: Listrik Elektronika Otomotif

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

Sekilas tidak ada perbedaan yang nampak dari cara menulis artikel untuk AMP dan Non-AMP, hanya saja bagian yang paling terlihat mencolok adalah pemanggilan gambar, pada template amp tidak menggunakan tag <img/> melainkan dengan menggunakan tag <amp-img/>.

Cara Membuat Artikel atau Postingan Valid AMP HTML

jadi jika Anda berniat bermigrasi menggunakan template AMP maka Anda harus mengubah semua gambar pada postingan Anda.

Cara Memasang gambar utama(Thumbnail) dari postingan

Pada umumnya kita, para blogger sudah mengetahui bahwa Blogspot 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 mengatasi thumbnail postingan Anda pada homepage tidak muncul, 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 artikel anda.

Cara Menambahkan gambar pada isi artikel

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

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

Silahkan ubah ukuran gambar dan layout nya sesuai keinginan atau ukuran layout template Anda.

Cara Embed video Youtube pada postingan (optional)

anda dapat menggunakan kode di bawah ini untuk menampikan video dari Youtube kedalam postingan Anda.

1. Silahkan anda ambil kode video dari url video Youtube yang ingin Anda tampilkan.
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'/>

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

Sumber : median-amp.blogspot.com