Panduan Cara Membuat Blogspot Menjadi Valid Google AMP
Halo gaes kembali lagi dengan saya
di blog sumur teknologi, pada kesempatan kali ini, saya memposting tentang bagaiman
Cara edit blog jadi valid amp dengan cara cara lengkap ke semua
elemen Blog Blogger sobat.
Google AMP atau kepanjangan dari Accelerated Mobile
Page merupakan teknik kecepatan load yang harus dibuat secara se manual mungkin
untuk mempercepat blog atau situs website dengan menghapus kode Javascript pada postingan agar valid amp.
Untuk membuatnya dukungan situs
blog sobat menjadi lebih cepat loadingnya. Banyak orang bermain blog dengan
berbagai cara membuat tampilan secepat mungkin dengan mengubah blog jadi valid amp.
Situs web Blogger sekarang banyak template yang menerapkan AMP hingga AMP
sekarang sepenuhnya tersedia untuk blogger dan diperjual belikan.
Sebenarnya apa itu AMP atau
Accelerated Mobile Pages, Halaman-halaman yang baik dilihat dengan tampilan
ponsel yang mempercepat kecepatan loadingnya,sobat bisa mudah ketahui ciri ciri
blog berhalaman amp dengan adanya tanda centang seperti petir di halaman google
saat browsing.
Cara Membuat Blog Jadi Valid AMP
Perlu di ketahui gaes,HTML AMP
Setup ini mempengaruhi semua perubahan kode HTML pada template yang asalnya
biasa untuk Mengaktifkan Kode HTML AMP ini.
Langkah 1: Sobat masuk kea kun blogger dan pilih tema –
edit html.
Langkah 2: Klik di tempat kosong dan
ketikan CTRL + F untuk mencari kode <html>
<html amp=’amp’>
Selanjutnya sobat harus menambahkan
Tag Meta Charset dan View-port
Di bagian pengaturan untuk
merubahnya menjadi AMP ini sobat harus melihat kode template untuk mencari tahu
apakah tag meta charset dan viewport apa tidaknya,Jika tidak ada, letakan kode
di bawah ini tepat di bawah tag <head> sob:
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
Pengaturan AMP Blogger untuk CDN
Untuk di ketahui lagi tentang Kode
CDN AMP adalah kode yang mengajarkan browser yang cocok untuk mobile atau mode
telepon untuk menggunakan versi AMP dengan menambahkan skrip di bagian dari
html kode <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>
<script async=’async’ src=’https://cdn.ampproject.org/v0.js’></script>
Kode itu semua untuk mengaktifkan
CDN AMP,sekarang simpan templat dan menuju langkah berikut.
Langkah 04: Pengaturan AMP terkhususkan untuk Gambar Postingan
Blogger
Gambar yang digunakan untuk menjadi
responsif di desktop bukan factor resolusi dan dimensi yang sama untuk digunakan
dalam versi AMP.
Dengan ini menambahkan kode AMP yang
khusus untuk optimasi gambar amp, cara hanya mengubah Kode Gambar dengan kode dibawah
ini.
<amp-img src=”gambar-biasa-menjadi-amp.jpg” alt=”amp-img” height=”500″ width=”500″></amp-img>
Ubahlah nama dot jpg maupun gambar
ber format png atau lainnya sebelum mengunggahnya.
Pastikan ubah src gambar yang biasa
menjadi src amp img, sebenarnya harus lebih teliti untuk langkah langkah ini,
agar semuanya beres.
Langkah ke 5: AM Conanical Link
Sangat penting untuk melihat bahwa template
sobat dapat ditemukan dengan tag conanical yang digunakan dalam template
blogger. Versi AMP template mana pun yang di perjual belikan maupun free juga
menggunakan kanonik atau conanical.
Cara dengan menambahkan kode di
bawah ini ke template blogger sobat di bawah tepat tag charpset .
<link expr:href='data:blog.url' rel='canonical'/>
<link rel="canonical" href="https://www.url sobat di sini.com" />
Jangan lupa ubah dan ganti url
sobat di atas yang berwarna merah .
Dengan menambahkan tag Cornanical,sekarang
bisa mengaturnya tampilan halaman awal homepage dan postingan artikel blog.
Cara Memeriksa Apakah Tampilan Blog
sudah AMP
Untuk Mengetahui apakah blog
blogger sobat sekarang benar benar menjadi halaman AMP, coba cek di website
ampproject.org atau ketikan amp cek di search engine, ada banyak beberapa situs
web validasi pengecekan AMP yang ada di google dan membantu pengguna untuk
mengetahui situs webnya sudak valid amp atau tidak.
Saya harap artikel ini benar-benar
membantu sobat blogger, untuk mengenai adanya ke erroran saat mengubah menjadi
amp silakan mengomentari postingan ini di kotak komentar di bawah .
Cukup sekian cara membuat tampilan
amp di blog semoga berhasil sob .