Skip to main content

CARA MENERAPKAN AMP KE HALAMAN BLOGGER

amp project
amp project
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.

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:

Mungkin Anda Suka:

Comments

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

KISAH MENAKJUBKAN DI DALAM CANGKANG TELUR

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Copyright © editblogtema. All rights reserved.