Panduan menulis postingan blog AMP

Bagi sebagian orang menulis postingan blog adalah hal yang mudah karena memang idenya dan konsepnya sudah diluar kepala. diluar kepala maksudnya siap mengucur melalui jari jemari. Hal tersebut karena postingan / menulis diblogspot itu tak perlu kode khusus, bahkan hasil ketikan kita di Ms. word atau notepad bisa langsung di paste dan dipublish diblospot.

Semua itu tak berlaku lagi bisa sobat menggunakan template AMP blogspot / blogger. setiap posting kita harus memastikan bahwa setiap tulisan kita valid AMP. selesai posting kita harus melakukan validasi AMP.

Sebenarnya sih tidak ribet, karena pada dasarnya kita hanya tak diperbolehkan menambah telalu banyak style atau CSS pada postingan kita. Hm.. lebih tepatnya hanya boleh menggunakan style yang sudah ditentukan. misalnya dalam hal pasang gambar, tak bisa hanya upload gambar lalu pilih gambar dan sesuaikan letaknya.

Panduan menulis postingan blog AMP

Sebenarnya postingan ini adalah catatan pribadi ketika saya hendak posting. walaupun saat ini catatan tersebut ada di sticky notes, tapi sebagai langkah preventif taka ada salahnya bila di simpan dalam bentuk postingan, betul? tanpa berlama - lama berikut ini kode yang sering / selalu saya gunakan ketika membuat postingan Valid AMP.

Kode / script thumbnail :

<noscript><img alt='gambar' src='url-gambar-anda'/></noscript>
Kode tersebut untuk membuat gambar thumbnail, di template amp yang Nalagila pakai ukuran gambarnya 1400x800 sesuai aturan terbaru markup news article dan akan muncul di halaman depan maupun dipostingan. dibeberapa template kita hanya bisa melihat gambarnya dihalaman depan saja, di dalam postingan kita harus menggunakan kode lain.

Kode / script gambar postingan :

<div class="img-width-300 img-center">
<amp-img src="/img/amp.jpg"
      width="300"
      height="169"
      layout="responsive"
      alt="an image"></amp-img>
</div>

<amp-img src="#" title="#" alt="#" height="600" width="1000"  layout="responsive">
<amp-img fallback="" src="#" title="#" alt="#" height="600" width="1000"  layout="responsive"></amp-img>
</amp-img>
Kode diatas ada dua jenis, yang pertama untuk gambar yang punya lebar kurang dari 700 pixel agar tampil apik dan tidak nge blur sedangkan kode kedua adalah untuk gambar yang menggunakan extensi webp. katanya extensi webp ini lebih ringan diload daripada extensi jpg, png dan gif.

Untuk setiap link yang ada dipostingan saya selalu menambahkan rel="noopener" untuk link ke blog nalagila dan rel="noopener nofollow" untuk link ke situs lain sehingga penulisannya
<a class="btn btn-primary btn-lg" href="#"  rel="noopener nofollow " target="_blank" title="#">#</a>.  
Berikut penjelasan mas adhy tentang penambahan kode tersebut :

Ketika kita menautkan halaman web lain ke halaman blog kita menggunakan target="_blank", maka proses halaman baru yang berjalan di jendela baru browser sama dengan proses halaman kita. Jika halaman baru tersebut mengeksekusi JavaScript yang berat, maka kinerja halaman blog kita juga bisa terkena dampaknya

Selain menuliskan disini saya juga menuliskan kode - kode tersebut di template postingan agar setiap hendak posting otomatis muncul kode tersebut, walalupun terkadang hanya beberapa kode yang dipakai. sekian dan semoga bermanfaat.
Reaksi:

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser