Membuat Postingan AMP
- AMP adalah kepanjangan dari Accelarated Mobile Pages, dan dalam membuat postingan yang valid AMP tidak semudah seperti membuat postingan biasa. Dalam mengupload vidio dan gambar banyak hal yang harus di perhatikan, dan kalau kita tidak memperhatikan hal tersebut maka postingan yang semestinya valid AMP akan menjadi eror. Sebelum kita memulai membuat postingan valid AMP ada baiknya kita siapkan kamus script yang mungkin bisa di buat pada notepad, script yang perlu di siapkan adalah <noscript> untuk image thumbnail, amp-img, amp-iframe, amp-youtube.Dalam pembuatan postingan valid amp kode yang tidak di perbolehkan adalah
<div style="text-align:justufy;"> di ganti menjadi<div>
Dan juga kode seperti ini :
<div style="text-align:center;">
<img src="url gambar.png" alt="gambar"/>
</div> dan ganti menjadi<amp-img alt="" height="" widht="" layout="" scr="url gambar"></amp-img> Itu artinya apabila blog kita sudah valid AMP HTML maka kita harus mengganti semua script jenis jenis seperti di atas atau yang lainnya, kita harus mengikuti peraturanyang sudah di tentukan agar mendapatkan postingan valid AMP. Dibawah ini akan saya jelaskan menambahkan gambar atau vidio dalam postingan blog AMP HTML.
1. Gambar Utama Thumbnail atau gambar di atas Postingan, pada gambar ini kita menggunakan kode <noscript>, biasanya dalam postingan biasa kita akan menemukan kode seperti :
<div class="separator" style="clear: both; text-align: center;">
<img alt="contoh script" border="0" data-original-height="301" data-original-width="488" height="394" src="url gambar" title="tips dan tricks" width="640" /></a></div>
<img alt="contoh script" border="0" data-original-height="301" data-original-width="488" height="394" src="url gambar" title="tips dan tricks" width="640" /></a></div>
Maka kode di atas harus di sederhanakan menjadi seperti di bawah ini :
<noscript>
<img alt="terserah anda" height="400" widht="750" layout="responsive" scr="url gambar anda"> </noscript>
<img alt="terserah anda" height="400" widht="750" layout="responsive" scr="url gambar anda"> </noscript>
Catatan :
Untuk Height anda bisa sesuaikan dengan ukuran gambar anda, dan untuk Widht harus di sesuaikan dengan lebar dari blog.
2. Gambar yang berada di antara Postingan maka code gambar yang pertama anda harus di ganti menjadi seperti di bawah ini :
<div>
<amp-img alt="terserah anda" height="400" widht="750" layout="responsive" scr="url gambar anda"> </amp-img>
</div>
<amp-img alt="terserah anda" height="400" widht="750" layout="responsive" scr="url gambar anda"> </amp-img>
</div>
Ini berlaku untuk semua gambar yang berada di antara postingan.
3. Vidio Youtube, pastikan juga kalau blog sobat sudah valid amp-youtube. Biasanya kita akan menemukan kode seperti ini apabila upload vidio youtube :
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/bhtu5dEx7hg/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/bhtu5dEx7hg?feature=player_embedded" width="320"></iframe></div>
<div style="text-align: justify;">
</div>
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/bhtu5dEx7hg/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/bhtu5dEx7hg?feature=player_embedded" width="320"></iframe></div>
<div style="text-align: justify;">
</div>
Maka kode di atas di ganti menjadi :
<div>
<amp-youtube width="480"
height="270"
layout=responsive scr="link vidio youtube"
</amp-youtube>
</div>
<amp-youtube width="480"
height="270"
layout=responsive scr="link vidio youtube"
</amp-youtube>
</div>
Catatan : Untuk width bisa di sesuaikan dengan lebar postingan,
Sekian tips dan tricks Membuat postingan valid AMP kali ini, semoga bermanfaat dan selamat mencoba.