Bagaimana Cara Membuat Artikel atau Postingan Valid AMP HTML

Ensiklopedi Otomotif - Mari kita bahas Cara Membuat Artikel atau Postingan Valid AMP HTML. Accelerated Mobile Pages atau sering disebut dengan AMP merupakan layanan yang berfungsi untuk memuat laman pada perangkat seluler lebih cepat dan ringan. Anda dapat menggunakan dan memodifikasi script ini karena merupakan open source.

Jika kita lihat secara sekilas 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 gambar thumbnail tidak tampil pada menu home dan related post, 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 sebelumnya, 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'/>

Silahkan di ubah ukuran gambar dan layout nya sesuai keinginan Anda.

Embed video Youtube pada postingan(optional)

Anda dapat menggunakan 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 untuk embed video adalah 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.

Begitulah Cara Membuat Artikel atau Postingan Valid AMP HTML. Dimana anda perlu melakukan pekerjaan ekstra saat membuat artikel jika menggunakan template AMP HTML.