Type something and hit enter

author photo
Post by On
Sudah lama sebenarnya saya hendak mencoba template blog AMP (Accelerated Mobile Page) yang digadang-gadang google akan memberikan kecepatan loading blog yang super cepat mengalahkan loading blog yang belum menggunakan AMP Template, terutama khusus pada versi penelusuran mobile.

Kira-kira awal bulan ini, saya menjadi tertarik dan ingin mencoba template AMP. Oleh karenanya saya pun mencoba mencari beberapa template AMP yang sudah dioptimasi serta mendukung fitur AMP.

Banyak yang saya temukan namun hanya satu template yang berkesan untuk saya, saat itu adalah AMP Template buatan kang Ismet. Bukan berarti template AMP lain tidak berkesan, hanya saja berdasarkan minat dan yang dibutuhkan oleh saya saat itu kebetulan adalah AMP Template buatan Kang Ismet tersebut.


Tanpa menunggu lama, akhirnya saya buatlah blog baru yang sekarang beralamatkan di https://www.catatan.winkamaru.com yang saya jadikan sebagai blog kusut yang merekam cerita absurd dan mungkin kegalauan saya di sana.

Note…
AMP atau Google AMP dirilis google kira-kira pada oktober 2017 kemarin dengan kerangka yang sengaja dibuat untuk memudahkan akses halaman web mobile sehingga bisa memuat halaman web / blog menjadi super cepat serta kompatibel di semua browser. Selengkapnya baca: Apa itu AMP?

Saya tidak akan menjelaskan panjang lebar mengenai apa itu AMP! Sebab, saya yakin teman-teman pembaca sudah lebih tahu dan telah lama mengenal apa itu AMP , fungsi, manfaat, dan kekurangannya. Oleh karenanya postingan ini hanyalah, mengenai kesan dan kesimpulan dari saya, setelah menerapkan dan mencoba AMP Template di blog. Menggunakan platform blogger.com atau blogspot.

  • Kesan Pertama (Penting Mengedit Setiap Postingan  Supaya Valid AMP)

Setelah memiliki template AMP yang saat itu adalah template buatan dari Kang Ismet, tanpa menunggu lama saya mencoba menginstal atau memasang template tersebut pada blog saya. Setelah memasang template AMP tersebut ternyata tidak serta merta blog saya menjadi Valid AMP.

Sebab setelah melakukan Uji Valid AMP di Google malah terdapat pesan bahwa halaman blog saya tersebut tidak mendukung versi pencarian google yang valid AMP, karena masih terdapat pesan kesalahan dan harus diperbaiki.

Setelah saya pelajari kembali mengenai masalah ini, akhirnya solusi yang saya temukan adalah saya harus mengedit semua postingan blog saya supaya bisa menjadi valid AMP satu persatu. Serta memperbarui script AMP dalam template blog yang sudah kadaluarsa.

Bisa dibayangkan, bagaimana jadinya jika blog kita, ternyata punya ribuan tulisan, serta semua halaman tersebut ingin diperbaiki menjadi valid AMP? Pastinya kita harus melakukan optimasi satu per satu setiap postingan kita supaya bisa menjadi valid di penelusuran Google AMP.

Jadi, tidak hanya mengganti template…

Untung saja saat itu, blog yang saya buat adalah blog yang baru seumur jagung dan tulisan di dalamnya pun tidak begitu banyak. Sehingga mengedit seluruh postingan saya menjadi valid AMP tidak terlalu menyulitkan.

  • Kesan Kedua (Menyisipkan Gambar Wajib Menggunakan Kode HTML yang Mendukung AMP)

Sebenarnya memosting gambar di postingan blog tidak harus melalui cara yang sulit, sebab cukup insert/upload gambar ke dalam postingan semuanya beres. Tetapi pada blog yang menggunakan AMP Template agar postingan blog menjadi valid AMP. Ada kode AMP HTML khusus yang perlu diterapkan, ketika akan menyisipkan gambar dalam postingan.

Cara penerapannya sebagai berikut:

Untuk menyisipkan gambar pada postingan blog AMP, perlu menggunakan kode berikut melalui postingan HTML

 <amp-img src="url-gambar-masukin-ke-sini"  
    width="1080"  
    height="720"  
    layout="responsive"  
    alt="AMP HTML"></amp-img>  

Jadi, jika gambar tidak ditulis dalam format postingan HTML ke dalam baris kode di atas, maka nantinya postingan yang dibuat tidak mendukung atau tidak valid terhadap AMP.

  • Kesan Ketiga (Menyisipkan Embed Video Youtube dan Embed Facebook)

Masih seperti menyisipkan gambar pada postingan, ternyata saya juga harus memperbaiki postingan di blog untuk memasang embed youtube maupun embed facebook agar menjadi valid AMP.

Hal yang saya lakukan adalah:

Langkah 1 (menyisipkan embed youtube)
Memasang script amp-youtube di dalam template pada tag <head> di dalam template blog

 <script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>  

Kode script di atas pada template yang saya pakai, script-nya sudah dipasang oleh pembuat templatenya. Sehingga yang perlu diterapkan hanyalah menuliskan kode postingan HTML khusus untuk postingan video youtube menggunakan kode HTML berikut:

 <amp-youtube width="480"  
    height="270"  
    layout=responsive  
    data-videoid="0F_cmdadyOc">  
  </amp-youtube>  

Jadi dalam kode HTML di atas, kita bisa melihat kode "0F_cmdadyOc", Kode tersebut adalah kode yang didapat dari URL Youtube (https://youtu.be/0F_cmdadyOc). 


Sehingga jika saat memasukan video youtube tanpa menuliskannya ke dalam kode HTML seperti di atas, maka postingan blog kita nantinya tidak akan menjadi valid terhadap penelusuran AMP di Google atau Search Engine.

Langkah 2 (menyisipkan embed facebook)
Sama seperti langkah 1, untuk memasukan embed facebook valid AMP, ternyata saya juga wajib memasukan JS video facebook ke dalam template blog pada tag <head>

 <script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>  

Setelah kode tersebut terpasang di dalam template blog, selanjutnya ketika akan memosting embed facebook di artikel. Kita perlu menuliskan kode seperti berikut:

Contoh 1: Kode untuk menampilkan postingan facebook dalam posting blog

 <amp-facebook width="552"  
    height="303"  
    layout="responsive"  
    data-href="https://www.facebook.com/zuck/posts/10102593740125791">  
 </amp-facebook>  

Contoh 2: Kode untuk menampilkan video facebook dalam posting blog

  <amp-facebook width="552"  
    height="310"  
    layout="responsive"  
    data-href="https://www.facebook.com/zuck/videos/10102509264909801/">  
  </amp-facebook>  

Pada contoh ke 2 di atas! Biasanya video akan ditampilkan secara lengkap dengan deskripsi video facebook aslinya. Sehingga jika nantinya kita hanya ingin memosting video tanpa dilengkapi deskripsi video, hanya video facebooknya saja yang ditampilkan secara responsif, maka kita bisa menambahkan kode data-embed-as="video" menjadi seperti berikut:

 <amp-facebook width="552"  
    height="310"  
    layout="responsive"  
    data-embed-as="video"  
    data-href="https://www.facebook.com/zuck/videos/10102509264909801/">  
 </amp-facebook>  

Jadi, cara di atas harus saya lakukan, supaya setiap artikel saya yang menyisipkan embed facebook maupun embed youtube, bisa menjadi valid AMP.

  • Kesan Keempat (Menampilkan Thumbnail Gambar)

Setelah beberapa cara di atas saya lakukan untuk membuat postingan menjadi valid AMP, ternyata pada template blog yang saya gunakan thumbnail gambarnya tidak muncul. 

Untung saja karena saya menggunakan template AMP HTML buatan Kang Ismet, di sana sudah dijelaskan dan diberikan tutorialnya mengenai cara menampilkan thumbnail pada templae AMP HTML buatan Kang Ismet.

Caranya ternyata saya hanya perlu menyisipkan gambar di awal postingan blog, lalu kode gambar ditutup dengan kode </noscript> seperti berikut:

 <noscript><img alt='gambar' src='url-gambar-dimasukin-ke-sini'/></noscript>  

Sangat banyak yang harus diterapkan dalam membuat postingan kita di AMP Template, supaya bisa menjadi valid dan mendapatkan penelusuran AMP di Google Mobile.

Sejauh ini hanya itu kesan saya mencoba AMP Template, khusus mengenai cara memasang iklan adsense yang valid AMP belum pernah saya coba, sebab blog saya yang menggunakan AMP Template sengaja saya buat sebagai blog personal yang memang saya tidak bertujuan memasangi iklan di dalamnya.

Kesimpulan...
Blog yang menggunakan Template AMP sangat baik, terutama bagi template yang sudah mendukung fitur responsif dan optimasi loading blog yang cukup cepat.

Namun, meski dikatakan bahwa blog AMP akan diloading menjadi super cepat, ternyata hal tersebut hanya berlaku pada halaman postingan yang ditemukan pembaca melalui penelusuran mobile.

Ini dikarenakan setiap halaman yang ditemukan pengunjung di search engine melalui pencarian mobile (melalui ponsel pintar) ternyata hanyalah halaman cache yang dibuat oleh google, sehingga website tersebut diloading dengan sangat cepat. Sementara ketika kita akan membaca artikel lain melalui link dalam blog tersebut, loading blog mengandalkan kecepatan normal yang dimiliki template blog.

Sehingga, meski loading-nya dioptimasi menjadi sangat cepat melalui penelusuran mobile, blog juga membutuhkan kecepatan loading asli yang cukup bagus meski tanpa bantuan dari cache yang dibuat oleh google.

Selain itu, untuk membuat postingan menjadi valid AMP, kita harus melakukan pengeditan terhadap setiap postingan dan halaman web / blog. Baik dari menyisipkan gambar hingga video agar bisa valid AMP.

Jadi, tidak seperti menyisipkan gambar dan video seperti biasanya lagi.

Oleh karenanya apabila hendak menjadikan Blog kita valid AMP, sangat baik jika dimulai untuk membuat blog baru, atau pada blog yang masih memiliki sedikit postingan saja. Karena untuk membuat seluruh postingan menjadi valid AMP kita harus mengedit postingan kita satu persatu.

Dan tentunya menurut saya ini pekerjaan yang harus sangat teliti.

Berikut screenshoot blog personal saya. Sudah valid AMP menggunakan template AMP HTML buatan Kang Ismet, dilihat melalui indikator plugin AMP yang terpasang di google chrome.
https://catatan.winkamaru.com

Demikian tulisan saya mengenai Pengalaman Mencoba Template AMP, Kesan dan Kesimpulan saya...

Punya tanggapan dan kesan serta kesimpulan menarik lain, mengenai pengalaman memakai AMP Template? Silakan berkomentar di bawah.

Sukses selalu...

Mohon tidak berkomentar dengan link aktif, termasuk berpromosi jasa dan lain-lain. Karena akan langsung dihapus

Click to comment