EDITBLOGTEMA

Kebijakan Download
×
Skip to main content

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

Comments

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

    ReplyDelete

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Copyright © EDITBLOGTEMA. All rights reserved.