Cara Mudah Membuat Postingan Valid AMP Mode HTML

Menggunakan Template Blog versi AMP diharuskan mengusai teknik mengelola template blog dan membuat konten postingan sesuai prosedur AMP agar nantinya blog beserta konten postingannya valid AMP. Jika tidak memperhatikan hal ini sudah dipastikan menggunakan Template AMP tidak akan ada point positifnya justri sebaliknya point negatiflah yang akan di dapat. Dimana anda akan sering mendapatkan pesan email dari Team Google Consule bahwa Website Anda bermasalah, dan ketika anda chek status Blog Anda pada Search Consule akan muncul daftar error atau masalah yang harus diperbaiki. Jika kondisinya seperti itu lebih baik Anda tidak menggunakan Template AMP, karena jelas semakin banyak daftar eror ketidak valitan AMP akan membuat reputasi Blog Anda semakin buruk di mata Google.

Untuk membuat postingan pada template AMP direkomendasikan untuk metode penulisan menggunakan mode HTML bukan Compose seperti pada umumnya. Hal ini dilakukan untuk meminimalisir munculnya kode-kode "Style" pada postingan Anda. Karena dengan semakin banyak kode style maka akan selamin banyak waktu yang dibutuhkan untuk meload keseluruhan postingan dan efeknya postingan tidak akan valid AMP. Jika anda tidak percaya silahkan dibuktikan anda mengetik di mode compose kemudian setelah selesai cobalah beralih ke mode HTML sebelum dipublikasikan. Akan banyak kombinasi code yang mengandung kata "Style", Span, Sparator dan "Justify". Dan cobalah langsung mempublikasikannya, sudah dipastikan postingan Anda tidak akan pernah valid AMP.


Silahkan Anda tentukan judul postingan kemudian tulis penjabaran judul di mode HTML, beri jarak spasi satu enter antar paragrap.



Masukkan gambar pendukung yang ingin anda selipkan pada postingan sebagai pelengkap penjelasan teks pada setiap point yang ingin anda sertakan gambar melalui menu add gambar sebelah menu add Link. Setelah selesai upload pilih gambar yang ingin di masukkan ke dalam postingan.



Jika muncul notifikasi seperti di atas, langsung Klick OK saja. Hasilnya disini gambar hanya berbentuk Link saja karena menggunakan mode HTML. Jika Anda menggunakan mode compose seperti biasanya previe gambar akan muncul, disinilah salah satu letak perbedaannya.


Setelah itu beralihlah ke mode Compose maka postingan dan gambar yang sudah buat akan tampak menyatu tanpa adanya jarak spasi.


Langkah pertama silahkan lakukan pemisahan gambar dengan cara meletakkan kursor di awal atau akhir setiap gambar kemudian menekan tombol Enter Keyboard untuk memberikan jarak spasi antar gambar.


Berikan keterangan penjelasan gambar pada mode compose agar lebih mudah, karena jika menggunakan mode HTML dengan gambar yang berbentuk link saja pasti Anda akan merasa kesulitan.


Setelah membuat postingan berikut keterangan keseluruhan gambar, silahkan kembali ke mode HTML. Catatan penting pengentikan keterangan gambar boleh di mode compos akan tetapi untuk paragraf lain yang tanpa gambar anda harus mengetiknya di mode HTML untuk menghindari munculnya kode Style.



Untuk memberikan jarak spasi pada setiap paragrap teks atau gambar silahkan tambahkan kode <br/> seperti tampak pada gambar berikut ini:


Satu kode <br/> adalah pemisah antara pragraf satu dengan paragraf lain, atau gambar satu dengan gambar lainnya tapi bukan merupakan spasi artinya berdiri sendiri bukan satu kesatuan, untuk spasi jarak gunakan 2 kode <br/> berturut-turut. Hasilnya dengan memberikan 2x kode <br/> ketika anda kembalikan ke mode Compose maka akan muncul jarak spasi antar paragraf seperti tampa pada gambar berikut ini:


Langkah selanjutnya adalah mengubah metode add gambar menjadi valid AMP yaitu dengan menggunakan kode pemasangan gambar AMP berikut ini:

 
<div class="img-width-600 img-center">
<amp-img src="---------------------"
width="1000"
height="600"
layout="responsive"
alt="an image"></amp-img>
</div>

Keterangan Kode:
Angka width-600  adalah besar ukuran gambar pada tampilan postingan
Angka width 1000 adalah ukuran lebar gambar
Angka height 600 adalah ukuran tinggi gambar

Anda bisa menentukan tampilan gambar Landscip atau Potraid menggunakan kode Width 1000 dan height 600 untuk ukuran ini bisa juga anda sesuaikan dengan ukuran gambar aslinya.

Sementara kode width-600 dapat anda rubah sesuka hati ingin seberapa besar ukurannya ketika ditampilkan dalam postingan. Jika bingung memahami penjelasan ini silahkan diubah-ubah saja angkanya kemudian lihat hasilnya, anda akan mengerti maksudnya.

Letakkan kode pemasangan gambar AMP disetiap awal link gambar, nantinya kita akan menghapus seluruh kombinasi kode link berikut dan hanya akan kita ambil linknya saja.


Seperti ini contohnya, taruh kode pemangan gambar versi AMP di atas kode kombinasi dari gambar


Ambil link dari gambar kemudian  taruh link pada area penempatan link pada kode gambar versi AMP, kemudian hapus kode kombinasi dari add gambar sebelumnya.



Maka ketika Anda coba kembalikan ke mode Compose Preview gambar akan hilang, dan hanya ada sekat-sekat atau jarak spasi antar paragraf yang kosong. Ini adalah efek dari penggunaan metode penempatan gambar pada postingan valid AMP.


Setelah selesai menulis penjelasan dan memberikan gambar sebagai penjelasan dari uraian teks sebelum mempublikasikannya jangan lupa untuk memberikan label, mensetting url dari postingan, dan memberikan deskripsi postingan. Setelah semua dirasa lengkap barulah anda publikasikan.


Hasilnya postingan langsung valid AMP tanpa harus edit ulang. Jika anda menulis postingan dam mode compose maka tidak akan valid AMP dan Anda harus mengedit ulang dengan membuang seluruh kode yang mengandung kata "Style" pada postingan dalam mode HTML.


Gambar yang tadinya tidak tampil Previewnya pada mode compose karena sudah dimodifikasi menggunakan kode add gambar AMP ketika dipublikasikan akan muncul dengan sempurna dalam mode gambar valid AMP.

Kesimpulan: 
Membuat postingan valid AMP sebenarnya mudah jika mengetahui prosedur yang benar sesuai dengan ketentuan pembuatan postingan AMP.