Menggunakan template AMP Blogger ini yang akan dihadapi
Template amp saat ini sedang trendnya digunakan pengguna situs web maupun blogger, sayapun sudah mulai menggunakannya pada blog ini.Alasan saya mengganti template blog sebelumnya karena saya ingin perubahan, salah satu faktor yang menguatkannya adalah pengunjung blog saya mulai lebih dominan pengguna mobile dari pada versi desktop.
Tetapi didalam pengaturannya ini, tidak semudah seperti template biasa pada umumnya saat ini, apalagi kita bandingkan dengan wordpress self-hosted. perbedaannya blogger masih kalah majunya. karena wordpress sudah lebih dahulu mendukung AMP.
Sudah banyak yang dibuat atau diperbaharui yang mendukung AMP, bahkan pluginnya sudah tersedia di wordpress self-hosted.
Jika ingin mencari template amp blogger gratis pasti masih sedikit jumlahnya di google pencarian sob. karena penerapan AMP pada blogger masih tergolong baru digunakan saat ini. apalagi masih dalam perkembangan fitur-fiturnya.
Saran saya carilah template blogger premium sob. karena biasanya versi berbayar ini mendapat jaminan update versi terbaru jika ada fitur tambahan, dan support dari pembuat jika sobat masih kurang mahir dalam melakukan pengaturannya.
Banyak pengalaman yang saya dapatkan disaat memulai menggunakan AMP, mulai dari error, tidak valid AMP, penggunaan tag html-amp yang berbeda. tentunya akan saya share di artikel ini pengalaman saya buat sobat jika ingin seperti saya pada blognya, agar siap yang akan dihadapi nanti.
Perubahan Tag HTML Image
Tag html image atau gambar berbeda dengan tag pada AMP. terdapat 2 jenis tag gambar amp, namun hanya sedikit perubahannya. Berikut cara memasang gambar di postingan amp blog. Untuk gambar utama sebagai thumbnail di homepage, biasanya tidak akan tampil di artikel menggunakan.
<noscript>
<img src="urlgambar.jpg" width="lebar gambar" height="tinggi gambar" alt="isi alt text" title="isi title text"/>
</noscript>
Jika menggunakan gambar tambahan, akan tampil di artikel
<amp-img
src="urlgambar.jpg"
alt="isi alt text "
title="isi title text"
layout="responsive"
on="tap:lightbox1"
tabindex="0"
role="button"
height="tinggi gambar"
width="lebar gambar"></amp-img>Perubahan Tag HTML Video Youtube
Buat sobat yang kadang juga memasukan video youtube ke artikel blognya, juga harus memahami tagnya jika templatenya sudah support amp.
Jika sebelumnya cukup mengambil embed yang disediakan youtube, maka sekarang harus dilakukan secara manual, berikut cara memasang video youtube pada postingan blogger amp
<amp-youtube
data-videoid="ID VIDEO"
layout="responsive"
width="480" height="270">
</amp-youtube>Jangan lupa sertakan js amp-youtube dibawah <head>
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'></script>
Perubahan Tag kode iklan Google AdSense
Di Google AdSense sebenarnya masih dalam perkembangan untuk blog AMP, tapi bisa menggunakan dibawah, berikut cara memasang iklan google amp pada blog amp versi blogger
Untuk ukuran yang tetap, misalnya 300x250
<amp-ad
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy"
height="300"
width="250"
type="adsense">
</amp-ad>
Jika responsive, terdiri 2 jenis yaitu above the fold dan below the fold
Tampak layar atas atau above the fold adalah tampilan yang pertama terlihat sebelum layar discroll ke bawah. ini direkomendasikan menggunakan fixed-height 100px yaitu lebar iklan akan mengikuti lebar tempatnya berada, sementara tingginya akan tetap 100px.
<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy">
</amp-ad>
Below the fold adalah bagian layar yang tampil setelah halaman di-scroll. Biasanya iklan ini di simpan di bawah postingan atau di atas dan di bawah komentar. Untuk iklan ini dorekomendasikan untuk menggunakan dengan tinggi 250px.
<amp-ad
layout="fixed-height"
height="100"
type="adsense"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="yyyyyyyyyy">
</amp-ad>
Jangan lupa diubah ca-pub-xxxxxxxxxxxxxxxx dengan id akun adsense sobat, dan data-ad-slot yyyyyyyyyy id iklan sobat. dan sertakan js amp-ad dibawah <head>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script>
Hindari Menambah CSS / Javascript pada HTML di artikel
Jangan pernah menyisipkan CSS pada tag HTML di blog, karena membuat blog akan tidak valid AMP. biasanya ini terjadi setiap membuat artikel baru menggunakan mode Compose, setiap paragraf otomatis terselip code style css, kita harus menghapusnya secara manual. termasuk juga Javascript walau jarang ada digunakan pada html di artikel.
Capek tentu saja, karena disini kita harus membuatnya secara manual di mode HTML.
Cek dengan AMP Validator
Error atau tidak valid AMP sering terjadi, khususnya pengguna platform blogger/blogspot. karena penerapannya masih dilakukan secara manual. kita tidak tau valid atau tidaknya AMP di blog, untuk itu gunakan fitur validasi AMP.
Google sudah menyediakan situs pengujian AMP, bisa sobat kunjungi halaman berikut.
Tapi cara tersebut sangat merepotkan, jika untuk mengecek artikel valid tidaknya satu persatu. saya sih menggunakan cara kedua ini, dengan memasang ekstensi di browser. ekstensi ini hanya bisa dipasang di browser Google Chrome, halamannya berikut.
itu saja informasi dari saya mengenai penerapan Template AMP di blogger yang berbeda dari template biasanya. jika ada yang ingin ditambah, bisa memberi informasinya melalui kolom komentar. meski ini terbilang sedikit, tapi dalam hal ini juga diperlukan pengalaman mengetahui dalam struktur data html, sehingga bisa menghadapinya jika terjadi error.
Sumber rujukan
https://www.ampproject.org
https://www.kompiajaib.com/2016/10/install-amp-chrome-extension-jika.html