TAHUN 2020: CARA MENERAPKAN AMP KE HALAMAN BLOGGER

AMP (atau Accelaration Mobile Page) adalah segala hal tentang menyederhanakan halaman sebuah web sehingga menjadi lebih cepat, lebih mobile dan lebih daripada sekedar "responsif".

Dan halaman web AMP telah di posisikan sebagai "anak emas" oleh Google melalui penandaan halaman "kanonis" mereka. Namun walaupun demikian tidak serta merta membuat semua orang lantas beralih ke halaman AMP dan menjadikan halaman web atau blog mereka menjadi AMP.

Namun kali ini agak berbeda, karena bulan September ke depan Google secara resmi menerapkan 'Mobile page indexing first' kepada seluruh tautan halaman web di dunia. Akhirnya kejadian juga halaman blog AMP menjadi anak emas, paling tidak untuk beberapa tahun ke depan.

Sebenarnya tidaklah terlalu mengejutkan jika halaman blog AMP akan menjadi anak emas mesin telusur karena akan selalu di dahulukan. Namun sekali lagi dan membuat saya heran itu adalah website website besar seperti CNN, Forbes malah memutuskan untuk meninggalkan halaman AMP setelah mereka mencobanya.
amp project editblogtema
EDITBLOGTEMA amp project

Baca : POLEMIK AMP

Meskipun demikian satu hal perlu diketahui, tidak perlu sampai menjadi ahli koding untuk membuat sebuah template AMP. Cukup memahami dasar atau mengerti saja kita akan dapat membuat template kita menjadi AMP.

Mari kita mulai:
  1. Login ke Blogger.
  2. Pilih blog untuk diperbarui.
  3. Di menu sebelah kiri, klik Tema.
  4. Di samping kanan agak ke atas cari tanda titik tiga, klik Edit HTML.

1. Merobah HTML

Agar blog menjadi AMP, maka kita harus merobah setiap kode HTML menjadi seperti kode berikut:
<html amp='amp'>

2. Merobah charset dan viewport

Kalian telah berada di halaman editor HTML, periksa di bagian bawah tag <head> apakah telah ada terdapat meta tag dan viewport disana, jika tidak copy kode berikut dibawah dan templekan di bawah kode <head> tadi. Jika sudah ada ya abaikan saja dong.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

 3. Menambahkan link kanonik

Google memang sedang meng-'anak-emaskan' halaman web versi AMP sebagai sinyal bagi SEO. Di dalam template AMP harus ada link kanonik karena demikianlah cara mesin pencari memprioritaskan halaman Web AMP di banding halaman web klasik biasa.

Namun kita perlu memeriksa apakah telah terdapat link kanonik di dalam template HTML kita bentuk kodenya lebih kurang sebagai berikut:
<link rel="canonical" href="https://www.aubsp.com/article-metadata.html" />
Jika tidak terdapat di sana, maka kita harus menambahkannya dengan mengkopi kode berikut di bawah:
<link expr:href='data:blog.url' rel='canonical'/>
Dan mempastekannya  di atas kode viewport:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

4. Rombak bagian HEAD

Cari kode </head> dan tambakan kode CSS berikut di bawah di atas kode </head> tadi agar halaman blog menjadi AMP:
<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-anim
ation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>

5. Robah tag Gambar 

Pada template non-AMP kita biasa menggunakan tag <IMG> namun untuk template AMP kalian tidak bisa menerapkannya lagi dan harus di ganti dengan hnya img, jadi agar menjadi AMP kita harus merobahnya menjadi seperti contoh formatnya sebagai berikut:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>

 6. Uji validitas halaman AMP

Cara pertama: 
Buka halamana AMP kalian melalui browser Chrome, Misalnya: https://contoh.blogspot.in/p/amp-page.html

Tempelkan kode “#development=1” tepat di ujung link, contoh:
https://contoh.blogspot.in/p/amp-page.html#development=1.
Klik kanan mouse pada halaman chrome dan pada pilihan menu menu yang muncul muncul, pilih: "inspeksi" untuk mengetahui bagian yang error.
inspeksi elemen di browser chrome
inspeksi elemen di browser chrome
Cara kedua: 
Buka halaman web AMP di halaman validator proyek AMP  atau silahkan masukan URL halaman web AMP ke:
https://search.google.com/test/amp

AMP MASIH BUKAN YANG TERBAIK. 

Tapi ingat satu hal, walaupun AMP adalah halaman mobile yang sedang di kampanyekan. Namun dia samasekali bukanlah satu satunya cara agar halaman blog kalian menjadi mobile.

Bukan juga satu satunya cara agar halaman blog kita masuk kategori  'Mobile page indexing first', tidak!  Walaupun halaman blog kalian bukan AMP,  namun 'mobile' maka halaman blog kalian tetap akan di index sebagai "terdaftar" dalam list 'mobile page' caranya adalah menjadikan halaman blog kalian menjadi lebih mobile friendly.

Para pakar menyebutnya sebagai halaman web html 'mobile classic'. Mengapa disebut demikian karena ia hanyalah halaman web yang dibuat melalui inti daripada HTML biasa. Contohnya halaman blog saya ini telah dibuat menjadi lebih mobile dan sangat mudah diakses melalui perangkat-perangkat mobile seperti tablet dan hape.

Saran saya, gunakan template template yang mobile friendly buat blogging mulai sekarang walaupun itu bukan harus AMP.  Template template blogger terbaru menunjukan sisi yang sangat baik untuk tampilan blogging mobile.

Situs situs besar seperti CNN,  Forbes, Washington Post tadinya menggunakan halaman AMP untuk menjalankan halaman web mereka. Namun akhirnya memutuskan untuk meninggalkannya..

Bukan apa apa, AMP mungkin adalah cara kita blogging di masa depan. Namun untuk masa kini ia masih perlu berkembang untuk kesempurnaannya... 

15 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Mantap panduannya, webnya saya ubek-ubek ya mba, karena ini yang saya cari.

    BalasHapus
  2. Kalau untuk di script gitu apakah ada perbedaan tidak ya?

    BalasHapus
    Balasan
    1. Gak, mana cukup hanya di script. AMP Itu css, tanpa javascript terutama Untuk halaman yang berbasis HTML seperti blogger.

      Beda sama wordpress, tinggal pasang addon AMP, halaman dapat dialihkan menjadi AMP... Gak pake ribet.

      Hapus
    2. Berarti lumayan mudah di wordpress ya mas. Cuma saya masih pake template bawaan blogger, kalau gak salah tema cotempo. Itu mas, apa uda termasuk 'mobile freindly' mas??

      Hapus
    3. blog ini juga menggunakan template contempo kok. Ya contempo 100% mobile.

      AMP mudah di terapkan di Wordpress karena pengembang templatenya banyak, hanya dibutuhkan addon kalau di WP.

      Hapus

  3. Mbak, mohon penjelasannya kode berikut di letakkan dimana ya?

    BalasHapus
    Balasan
    1. kode berikut yang mana, ini bukan tutorial tapi penjelasan perihal menerapkan AMP ke dalam template bawaan blogger, setiap template memiliki struktur berbeda. Kami sedang mencoba menyusun tutorialnya

      Hapus
  4. untuk kode berikut di letakan dimana ya :

    -

    BalasHapus
    Balasan
    1. Maaf tidak terbaca...coba parse terlebih dahulu kodenya di:
      http://www.blogcrowds.com/resources/parse_html.php

      Hapus
    2. Mbak..untuk kode berikut di letakkan dimana y?

      <amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>

      Hapus
    3. Oh itu harus di letakan pada setiap tag gambar, jadi begini: pemasangan gambar pada halaman AMP itu ada batasnya, tidak sebebas pada halaman HTML blog biasa.

      Artinya kita harus memasangnya secara manual pada saat memposting postingan dengan gambar dalam opsi penulisan HTML.

      Contoh 'AmpImage.JPG' di atas harus di bungkus dengan tag :

      <amp-img src=

      dan di tutup dengan:

      alt="amp-img" height="500" width="500"></amp-img>

      Demikian seterusnya. Pokoknya pada waktu artikel ini di tulis itu dilakukan manual.

      Hapus
    4. tks ya mbk atas penjelasannya :

      wahh AMP sebegitu repot ya. kalo artikel udah banyak kita manual satu persatu pada gambar..

      Hapus
    5. Tidak selamanya demikian, halaman AMP sama seperti halaman HTML klasik juga terus berkembang dan disempurnakan dari waktu ke waktu, misalnya pada perkembangannya batas gambar yang boleh di posting juga sudah semakin besar dimensinya.

      Mungkin ke depannya akan lebih mudah lagi, itu kalau di Blogspot. Kalau WP (Wordpress) cukup dengan pemasangan semacan ekstensi dan addon, jauh lebih simple..

      Hanya saja kecepatan tidak melulu AMP, itu lebih di karenakan bandwith internet. Jika kelak teknologi jaringan seperti 5G telah merata dan semakin murah bisa saja batas kecepatan halaman AMP dan Bandwith jadi ambigu..

      Hapus
    6. Ya mbk,,

      Karena blog saya dengan jenis Contempo sudah bisa tampil dengan waktu 2 detik, jadi tidak perlu lagi AMP deh..

      He he..

      Hapus
Lebih baru Lebih lama

Formulir Kontak