Cara Membuat Postingan Valid AMP Khusus Blogger Pemula

Sampai dengan saat ini ternyata masih banyak Blogger pemula yang tidak mengenal AMP. Terbukti dengan banyaknya pertanyaan dari teman-teman Blogger yang baru saja add pertemanan dan juga ada yang berasal dari pembeli Blog AMP yang saya jual. Ketika mereka mulai membuat postingan,  barulah sadar bahwa Blog yang mereka beli dari saya berbasis AMP. Banyak notifikasi Error di Google Search Console yang menyatakan bahwa konten postingan memiliki masalah Invalid AMP.

Akhirnya mulailah banyak pertanyaan ini dan itu, dan rata-rata ketika saya tanyakan apakah selama ini sudah tau atau pernah menggunakan AMP? 90% jawaban dari mereka tidak mengenal dan apalagi menggunakan AMP. Ketika saya mencoba memberikan arahan justru banyak yang bingung dan bisa dibilang gak nyambung sama sekali. Banyak bertanya, sudah dijelaskan, diberikan contoh, diberikan tutorial ternyata masih saja banyak yang tidak bisa memahaminya.


Berangkat dari kenyataan tersebut di atas, saya merasa tertarik untuk membahas tutorial bagaimana cara membuat konten postingan Valid AMP ditujukan dan dikhususkan untuk Blogger pengguna Template AMP yang masih Pemula. Namun sebelum memulai pembahasan alangkah baiknya untuk menyimak terlebih dahulu Deskripsi AMP itu sendiri.

Apa Itu AMP?

Accelerated Mobile Pages adalah teknologi perangkat lunak yang dikembangkan oleh Google. Google AMP merupakan project idealis dari Google dalam upaya meningkatkan kecepatan akses sebuah situs web. Diperuntukkan khusus dalam meningkatkan kecepatan loading website, saat di akses melalui.

Apa Manfaat AMP bagi Blogger?

1. Meningkatkan Pengalaman dan Kenyamanan Pembaca dengan loading halaman Blog yang menjadi lebih ringan dan cepat. 
2.  Loading Halaman Blog Menjadi Lebih Cepat dan Ringan karena pada dasarnya AMP memfokuskan dan mengutamakan kecepatan loading halaman Blog khususnya bagi pengguna Mobile Android.
3. Mengurangi Beban Server sehingga Loading halaman Blog menjadi Lebih Baik dan Cepat meskipun diakses oleh banyak pembaca Blog dari berbagai jenis perangkat. 
4.  Membuat Blog Lebih Mobile SEO Friendly dalam semua Perangkat baik PC Dekstop, Tabled dan Android. 
5. Dapat Meningkatkan Ranking Blog Google dengan kecepatan loading Blog yang cepat dan SEO Friendly 

 Apa Kekurangan dan Keterbatasan AMP bagi Blogger? 

1. Keterbatasan Menggunakan JavaScript dan CSS tidak seperti pengguna Non-AMP yang dapat dengan bebas menggunakan kode-kode JavaScript dalam hal modifikasi Template dan pemasangan Banner Iklan. 
2.  Keterbatasan kebebasan dalam Pembuatan Konten Postingan dimana AMP tidak mengizinkan adanya kode JavaScript dalam penulisan postingan dan juga penambahan gambar pendukung dalam postingan. 
3.  Keterbatasan penggunaan Iklan Alternatif AdSense, hanya situs-situs penyedia Iklan yang mendukung AMP saya yang bisa digunakan untuk memonetisasi Blog. Untuk situs penyedia Iklan yang tidak mendukung kode Iklan AMP tidak bisa diterapkan di Blog AMP. Artinya ruang lingkup menjadi publisher iklan dari Jaringan Penyedia Iklan menjadi lebih sempit.

Panduan Cara Mudah Membuat Postingan Blog Valid AMP 

Berikut ini Panduan Tutorial Cara Mudah Membuat Postingan Blog agar Valid AMP bagi Blogger Pemula Pengguna Template AMP:

1. Buat Halaman Kerja Postingan Baru melalui menu Entri Baru Postingan Dashboard Blogger

2. Gunakan Mode Penulisan Compose untuk postingan dengan gambar pendukung yang sedikit, apabila postingan Anda nantinya banyak mengandung gambar, saya sarankan menggunakan Mode HTML.

Sebelum memulai menulis Anda bisa terlebih dahulu mengupload semua gambar pendukung melalui Mode HTML agar tidak terbentuk Kode CSS dari gambar seperti ketika dupload dalam mode Compose. Untuk lebih jelasnya silahkan  coba sendiri upload gambar dengan mode compose dan HTML kemudian perhatikan perbedaannya dalam mode HTML.


3. Mulailah Menulis Konten Postingan bisa melalui Mode Compose atau HTML dengan catatan berpedopan dengan point 2 di atas.

Apabila Anda menulis menggunkan Mode HTML untuk memberikan spasi antar paragrap gunakan kode tag <br/> atau tag <p>. satu buah kode <br/> berarti satu Spasi Paragrap atau satu kali Enter.

Perhatikan Contoh Penulisan Konten Postingan berikut ini dalam mode HTML



Apabila tidak diberikan kode <br/> maka hasilnya akan seperti screenshot di bawah ini, dilihat dalam mode Compose tampak antar paragrap menyatu tidak ada spasi antar paragrap sama sekali.


Untuk memisahkan atau memberikan spasi antar paragrap saya menggunakan 2 buah kode <br/>


Sehingga hasilnya seperti tampak pada screenshot di bawah ini setelah penambahkan 2 buah kode <br> sebagai pemisah antar paragrap.


Dapat juga menggunakan tag <p> untuk memberikan spasi atau jarak antar paragrap seperti tampak pada screenshot di bawah ini.


Namun untuk penggunaan tag <p> cuku satu buah saja tidak seperti penggunaan tag <br/> yang harus menggunakan 2 buah kode <br/> untuk memberikan jarak 2 spasi antar paragrap. Setiap Paragrap baru cukup diberikan kode pembuka <p> dan ditutup dengan kode penutup <p/> dan jangan beralih ke mode Compose, karena kode tab <p> akan hilang dan berubah menjadi kode <br> serta di akhir konten postingan akan terbentuk banyak kode <br> sesuai dengan jumlah paragrap yang ada.


Khusus untuk Penulisan kalimat yang menggunakan bullet list atau number list ditulis dalam mode Compose agar lebih mudah tanpa harus mengingat dan menambahkan kode penulisan list teks secara manual seperti tampak pada screenhost di bawah ini:


4. Ubah kode gambar mengikuti peraturan pemasangan gambar konten postingan menggunakan kode khusus Gambar Postingan AMP berikut ini:

 

<div class="img-width-600 img-center">
<amp-img src="----------URL Gambar di Sini-----------"
      width="1040"
      height="640"
      layout="responsive"
      title="KEYWORD"
      alt="an image"></amp-img>
</div>

Contoh Add gambar postingan AMP yang salah dalam mode HTML seperti tampak pada gambar di atas dan Add gambar mode Compose seperti tampak pada gambar di bawah ini dimana terbentuk kode CSS gambar dan  tidak menggunakan kode khusus pemasangan gambar postingan AMP.


Anda cukup mengambil URL link gambar dan menempatkannya pada kode add gambar AMP sesuai dengan tempatnya. Untuk nilai Wight dan Hight bisa disesukan sesuai selera, gunakan kode layout="responsif" agar gambar dapat secara otomatis menyesuaikan bidang yang tersedia berdasarkan perangkat yang digunakan pengguna untuk mengakses konten Anda.


Khusus untuk gambar yang apabila diberikan efek layout auto responsif menjadi tidak sesuai tampilannya karena terlalu besar (efek auto zoom gambar) jangan gunakan kode layout="responsif". Contohnya seperti gambar hasil screenshot layar Android dalam bentuk persegi panjang vertikal ke bawah atau gambar-gambar yang diambil dalam posisi layout berdiri.


Penambahan kode layout="responsif" lebih cocok digunakan untuk gambar dengan tampilan Landscape persegi panjang. Silahkan sesuikan dengan kondisi dan selera Anda masing-masing.

Untuk penambahan script kode dalam postingan Blog, misalnya Anda membuat Konten Postingan Tutorial Cara pemasangan Widget atau yang berkaitan dengan Edit Template yang menggunakan Kode JavaScript, CSS atau HTML gunakan kode berikut ini:

 
<pre><code> 

  PASTE CODE DISINI

</pre></code>

Penggunakan kode pemasangan script ini harus dalam mode HTML dan kode yang akan ditambahkan wajib diParse terlebih dahulu agar terpisah, dikecualikan dan tidak terbaca sebagai kode penyusun template Blog sehingga dapat ditampilkan secara baik dalam postingan.



Hasilnya seperti berikut ini dalam Mode penulisan postingan HTML



Untuk penambahan Video Pendukung seperti Video dari Youtube, gunakan Kode Pemasangan Video berikut ini:

 
<amp-youtube
 data-videoid="-------- Paste Kode di Sini ---------"
 height="270"
 layout="responsive"
 width="480">
</amp-youtube>

Pemasangan kode penambahan Video Postingan harus dalam mode HTML. Salin kode yang ada di URL Video Youtube (bukan URL Video) kemudikan tempelkan pada area penempatan kode video.

Terakhir yang tidak kalah penting adalah menambahkan kode Preview gambar Postingan yang berfungsi menampilkan Preview Gambar pada Halaman Konten Home Page Blog dan Juga Preview Gambar Postingan Pada Widget menggunakan source kode berikut ini:

 
<noscript><img alt="JUDUL GAMBAR" width="680" height="382" src="URL GAMBAR" title="JUDUL GAMBAR" /></noscript>

Demikianlah Panduan Tutorial Cara Mudah Membuat Postingan Blog agar Valid AMP bagi Blogger Pemula Pengguna Template AMP. Semoga tutorial di atas mudah dimengerti dan dipahami serta dipraktikkan. Apabila ada hal-hal yang kurang jelas atau ingin ditanyakan silahkan tinggalkan pesan di kolom komentar.