Cara Mengubah Template Blog Blogger Menjadi Valid AMP HTML

Gambar Cara Mengubah Blog Blogger Menjadi Valid AMP HTML
Cara Mudah Mengubah Template Blog Blogger non-AMP Menjadi Valid AMP HTML - Website atau blog yang valid AMP lebih disukai oleh mesin penelusuran Google karena akses loading web yang super cepat.

Hal ini karena Google mengetahui bahwa 90% pengguna di internet pasti tidak suka dengan loading website atau blog yang lama dan 75% dari pengguna akan meninggalkan website atau blog dengan loading yang lebih dari tiga detik. Oleh karena itulah Google lebih mengutamakan website dan blog yang valid AMP di halaman pencarian Google. 


Walaupun hampir semua blog dengan platform Blogger ini menggunakan versi yang non-AMP. Mungkin karena mereka kesulitan untuk merubah semuanya karena kurang pemahaman dalam dunia koding. Gak jadi masalah sih, nyatanya ada juga blog dengan platfrom Blogger mampu menerapkan dua versi sekaligus dalam blognya (versi AMP dan non-AMP). 

Kamu juga bisa menggunakan template yang sudah dirancang valid AMP agar blog valid AMP walaupun kamu tidak paham koding. Jadi kamu tidak usah repot-repot mengubah semua kode pada HTML dan hanya perlu sedikit perubahan pada postingan saja. Tak lepas dari pujian dan kelebihan yang ada di blog yang valid AMP, masing-masing versi juga memiliki kekurangan dan kelebihannya sendiri-sendiri.

Sebelum lanjut ke pembahasannya, sebaiknya kamu pahami terlebih dahulu semua kelebihan dan kekurangan blog yang menggunakan template AMP. Berikut beberapa kelebihan dan kekurangan pada template blog Blogger valid AMP :
  1. Tampilan Blog Mobile Friendly
  2. Mengurangi Beban Server
  3. Meningkatkan Pengalaman Pengguna
  4. Loading Halaman Yang Super Cepat
  5. Meningkatkan Ranking Blog Di Halaman Penelusuran Google

Sedangkan kekurangan yang ada pada template blog yang menggunakan versi AMP adalah sebagai berikut ini :
  1. Tidak Bebas Menggunakan Script
  2. Lebih Sedikit Elemen Branding
  3. Keterbatasan Pemasangan Iklan
  4. Berbeda Dengan Versi Web Aslinya

Di artikel kali ini saya akan memberikan tutorial bagaimana cara mengubah blog platfrom Blogger menjadi valid AMP HTML. Hal ini bukanlah hal yang mudah untuk dilakukan. Terlebih lagi jika blog kamu sudah terdapat banyak artikel yang masih belum di set ke valid AMP. Ini akan sangat merepotkan kamu karena harus mengubah semua HTML pada postingan blog kamu.


Tapi saya rasa itu bukan masalah yang besar. Hal itu masih bisa diatasi kembali satu-persatu ya kan. Yang penting template blog kamu dulu yang harus di atur agar bisa valid AMP. Kalau kamu ingin mengubah template blog kamu agar bisa valid AMP, kamu bisa ikuti langkah-langkah dibawah ini.

Cara Membuat Template Blog Menjadi Valid AMP

  1. Buka dashboard blogger kamu » masuk ke menu Theme » Edit HTML
  2. Kemudian kamu harus mengganti dan menambahkan beberapa kode ke dalam template kamu agar bisa valid AMP. Yang pertama kamu ubah <html> yang ada di template blog kamu menjadi <html amp="amp">. Lengkapnya seperti dibawah ini :
    <html amp="amp">
  3. Kemudian tambahkan tag viewport dan charset ke dalam template kamu tepat dibawah tag <head>
    <meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui' name='viewport'/>
  4. Kemudian tambahkan tag canonical ke dalam template kamu. Taruh kode dibawah ini setelah tag <head>
    <link expr:href='data:blog.url' rel='amphtml'/>
    <link expr:href='data:blog.url' rel='canonical'/>
  5. Lalu tambahkan kode dibawah ini sebelum tag </head>
    <style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  6. Kalau sudah, tambahkan AMP JavaScript Library dibawah ini tepat sebelum tag </head>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  7. Setelah selesai semua, ganti tag image yang ada di template dan di semua postingan blog kamu menjadi seperti ini :
    <amp-img src="URL Gambar"
      width="1080"
      height="610"
      layout="responsive"
      alt="AMP"></amp-img>
  8. Selesai

Setelah selesai menambahkan AMP HTML ke template blog kamu, sekarang coba cek atau validasi template blog kamu apakah sudah valid AMP. Kamu bisa cek valid AMP template kamu di pengujian AMP.


Nah, itulah tutorial cara mengubah template non AMP menjadi valid AMP yang bisa saya sampaikan di artikel kali ini. Semoga artikel ini bisa bermanfaat dan membantu bagi yang membutuhkan. Saya dapat tutorial ini dari website iso.web.id. Kalau artikel ini dirasa kurang lengkap, kamu bisa langsung kunjungi website itu aja.

1 comment for "Cara Mengubah Template Blog Blogger Menjadi Valid AMP HTML"

  1. wahh terimakasih artikelnya, sangat membantu dan memberi informasi. semangat terus nulis artikelnya.
    oh ya aku mau ngasih tau ni mengenai Universitas Islam Riset Terdepan Berbasis pada Kesatuan Ilmu Pengetahuan untuk Kemanusiaan dan Peradaban, untuk info lebih lanjut langsung aja klik
    walisongo.ac.id

    ReplyDelete

Tulislah komentar unik, jelas dan tidak mengandung LINK AKTIF atau PROMOSI.