Hello sahabat saya perkenal kan dulu nama saya syahputra saya salah satu penulis Portal media online Harian Batam dalam kesempatan yang berbahagia saya akan menelas kan seputar AMP untuk halaman blogger.
Amp sebenartidak di adakan di plattom Blogger Amp biasa nya sudah ada di salah satu plattom wordpress kerna wordpress memang sudah menyediakan AMP tersebut.
Namun kita tidak perlu kuatir kerna saya di sini akan memecah kan masalah anda untuk membuat halaman blogger menjadi halaman AMP.
Sebelum anda membauat blog anda menjadi halaman amp blogger perlu anda ketahui bahwa AMP juga mempunyai kekurangan begitu juga sebalik nya AMP juga memiliki kelebihan.
Kemudian terkait kelebihan dan kekurangan yang dimiliki oleh AMP, berikut beberapa kelebihan dan kekurangannya yang pernah saya rasakan selama menggunakan template AMP.
1. Tampilan blog tetap terload seperti halaman asli meskipun jaringan buruk Meskipun blog dibuka mengggunakan jaringan lemah akan tetap terload sesuai alamat url yang asli bukan melalui googleweblight sehingga halaman web akan tampil sempurna tanpa rusak.
Seperti yang kita ketahui biasanya halaman blog non amp apabila diakses dengan jaringan yang tidak memadai akan dialihkan ke halaman googleweblight. Namun hal ini tidak terjadi apabila halaman blog sudah valid AMP. Inilah salah satu kelebihan yang paling oke dari fitur AMP.
2. Meningkatkan pengunjung dan mengurangi bounch rate blog Bagaimana caranya? Kelebihan amp yang lain adalah meningkatkan pengunjung blog dan menurunkan bounch rate. Seperti yang kita tahu bounch rate (rasio pentalan pengunjung) sangat bergantung pada kecepatan sebuah web atau blog.
Semakin cepat akses blog tersebut maka bounch rate semakin kecil dan otomatis pengunjung akan semakin betah menjelajah di blog kita. Kalau ada dua artikel dengan judul yang sama antara blog amp dan bukan, tentu pengunjung akan memilih blog yang loadingnya lebih cepat yaitu amp.
Oleh karena itu secara perlahan pengunjung akan bertambah. Terlebih lagi untuk blog yang pengunjungnya lebih banyak dari perangkat mobile. Tentu kehadiran template valid amp ini sangat berpengaruh.
3. Loading halaman instan Kelebihan blog yang valid amp kedua adalah kecepatan akses yang semakin didepan. Loading halaman yang instan sehingga pengalaman pengguna akan tetap terjaga meskipun jarigan buruk.
Memang fitur ini dikhususkan untuk pengguna mobile jadi wajarlah kalau akses via mobile yang diutamakan. Bagaimana bisa amp membuat halaman blog menjadi lebih cepat? Salah satu komitmen fitur AMP adalah memastikan konten di blog kita diakses lebih cepat.
Google AMP Cache hanyalah jaringan pengiriman konten berbasis proxy yang mengirimkan semua dokumen AMP yang valid. Ini mengambil halaman HTML AMP, menyimpannya, dan memperbaiki kinerja halaman secara otomatis. The Google AMP Cache memuat dokumen, semua gambar dan file JS dari asal yang sama yaitu menggunakan HTTP 2.0 untuk memberikan efisiensi maksimum.
Mengapa tidak ada Blogger AMP?
Meskipun Accelerated Mobile Pages adalah proyek yang didukung Google dan Blogspot adalah platform blogging Google, "Blogger saat ini tidak mendukung AMP HTML." Jadi itu yang bisa dijawab Google. Tapi kita tidak bisa membiarkannya seperti itu, bukan? Jadi ikuti langkah-langkah ini dan buat Blog AMP baru Anda.
Bagaimana Menggunakan AMP Pada Blogger Blog?
Sebelum anda memulai tutorial dibawah kami sarankan supaya anda backup template blogger anda dlu. Mari kita mulai satu per satu. Sekarang Pergi Dasbor Blogger Anda - Template - Edit Template, Kemudian ikuti petunjuk dibawah ini.
Langkah 1
Ganti kode <html> dengan kode berikut:
<html amp='amp'> Langkah 2
Periksa untuk tag meta charset dan viewport. Jika tidak ada, copy dan paste kode berikut setelah <head>.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> Langkah 3
Jadikan blog Anda mudah ditemukan menggunakan tag kanonik. Periksa untuk tag link kanonik. Jika tidak hadir, tambahkan link kanonik seperti <link rel = "canonical" href = "http://example.blogspot.in/article-metadata.html" /> yang hanya akan menunjuk pada dirinya sendiri. Copy dan paste kode berikut setelah tag viewport.
<link expr:href='data:blog.url' rel='canonical'/> Langkah 4
Tempel kode ini tepat 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>
</head> Langkah 5
Ubah tag img menjadi tag amp-img seperti contoh berikut:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img> Bagaimana cara memeriksa validitas halaman AMP?
Metode 1
- Buka halaman AMP Anda di browser Chrome, misalnya - https://example.blogspot.in/p/amp-page.html.
- Tambahkan "# development = 1" ke URL, misalnya - https://example.blogspot.in/p/amp-page.html#development=1.
- Klik kanan dan buka konsol Chrome DevTools dan periksa kesalahan validasi.
Metode 2
- Buka antarmuka web di validator.ampproject.org.
- Masukkan nilai url ke kolom URL, misalnya - https://example.blogspot.in/p/amp-page.html.
- Setiap perubahan pada sumber html yang dibuat dalam hasil editor interaktif ini adalah revalidation interaktif.