Panduan Cara Membuat Blogspot Menjadi Valid Google AMP

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.

cara membuat blog menjadi amp

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>

Langkah 03:  Setelah menemukan kode <html> di atas, gantilah dengan kode di bawah ini.


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

Silahkan letakan Kode ini di atas tag </ 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 .
Advertisement

Baca juga:

Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

No comments