TAHUN 2020: CARA MENERAPKAN AMP KE HALAMAN BLOGGER

AvatarOleh:
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... 

6 Responses to "TAHUN 2020: CARA MENERAPKAN AMP KE HALAMAN BLOGGER"

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

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

    ReplyDelete
    Replies
    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.

      Delete
    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??

      Delete
    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.

      Delete

Ajukan pertanyaan, kami mungkin tidak bisa langsung menjawabnya. Namun pertanyaan anda mungkin berguna dan penting bagi pembaca blog ini.

Terimakasih

Salam dari Admin
Anissa Auliasari

BERDASARKAN LABEL

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel