Beranda
Blogger

Agar Postingan Valid AMP

Beberapa hari lalu, saya mengganti template di blog ini ke AMP atau istilahnya migrasi template dari non-AMP ke AMP. Untuk ganti template dan mengatur atribut lainnya saya anggap mudah, namun yang membuat susah adalah harus mengedit seluruh postingan yang ada di blog agar valid AMP. Jadi saya harus mengedit postingan yang jumlahnya sekitar 200 postingan agara valid AMP. Karena jika tidak diedit, maka akan ada notifikasi error di webmaster dan kinerja blog akan bermasalah ke depannya. Postingan yang perlu diedit adalah yang mengandung gambar, video, dan yang memiliki script <style>. Tidak hanya itu, dikarenakan blogger tidak membaca <amp-img maka thumbnail untuk postingan-pun tidak muncul atau kosong. Jadi perlu ada script lagi yang perlu ditambahkan di dalam postingan supaya postingan ada thumbnail-nya.
Langsung saja, berikut ini beberapa langkah yang perlu dilakukan agar postingan valid AMP.
1. Membuat thumbnail postingan
<noscript><img alt='judul-alt-gambar' src='url-gambar.jpg' title='judul-gambar'/></noscript>
Ganti url-gambar.jpg dengan URL gmbar yang dituju.

2. Gambar dalam postingan
<amp-img alt='judul-alt-gambar' height='200' layout='fixed' src='url-gambar.jpg' width='300'/></amp-img>
Pada layout, saya biasa menggunakan fixed dan responsive. Responsive jika gambar ingin menyesuaikan halaman. Fixed jika ukuran gambar tetap sama baik di tampilan mobile maupun desktop. Height dan width sesuaikan dengan gambar dan keinginan.

3. Video dalam postingan
<amp-youtube width="480" height="270" layout="responsive" data-videoid="to0PE3OoN_g"></amp-youtube>
Ganti video id dengan id video yang dituju 


4. Postingan rata tengah
<center>...</center>
Karena penggunaan rata tengah (justify), rata kiri, rata kanan, memiliki kode <style> didalamnya sehingga postingan tidak valid AMP, maka perlu cara lain. Karena mungkin gaya tersebuta diperlukan dalam postinga contohnya saya ketika ingin teks atau gambar supaya di tengah. Kamu hanya perlu menambahkan 
<center> </center>

5. Postingan rata kanan atau kiri
Untuk rata kanan dan kiri, gunakanlah kode ini:
<p align="right">...</p>
Untuk rata kiri tinggal ganti right dengan left.

6.  Penggunaan kotak script
Beberapa kotak script menggunakan kode <style> sehingga tidak valid AMP, makadari itu kita perlu menghapusnya. Jika kalian ingin membuat kotak script yang valid AMP bisa gunakan kode berikut ini
<pre><code>...</code></pre>
Caranya masuk ke Tampilan HTML, lalu masukkan kode tersebut. Setelah itu kembali lagi ke Tampilan Menulis, ganti ... dengan kode yang dimaksud.