Cara Membuat Blogger/Blogspot Dalam Format AMP

Apakah kamu ingin menambahkan / mengatur Google AMP di situs Blogger / Blogspot? Halaman seluler yang dipercepat AMP untuk blogger adalah cara untuk membuat situs Blogger Anda memuat lebih cepat di perangkat seluler. Situs web akan memuat lebih cepat dan menawarkan pengalaman pengguna yang lebih baik dan dapat meningkatkan lalu lintas Blogger/Blogspot kamu. Dalam artikel ini, kami akan menunjukkan cara mengatur Google AMP di situs Blogger/Blogspot.

Panduan bertahap untuk Menambahkan / Menyiapkan Google AMP di Situs Blogger

Login Ke Blogger Anda.
Arahkan ke Desain dan Klik Edit Template.
Ubah tag yang ada untuk disinkronkan dengan tag berformat AMP.
Ganti kode yang ada dengan kode yang dimodifikasi.
Simpan template.
AMP Anda dikonfigurasi di Blogger sekarang. Anda dapat memvalidasi situs web Anda.

Modifikasi kode untuk Tambah / Mengatur AMP di Blogger / Blogspot

Ganti contoh kode di bawah ini kedalam Blogger-mu dan Anda akan siap dengan AMP di Blogger. Ini benar-benar gratis.

*Catatan untuk membuat cadangan blog Anda sebelum melanjutkan jika kamu belum memahami setruktur pemrograman Blogger.

Langkah 1: Buat HTML AMP

Cadangkan Template Blogger Anda agar aman dari masalah apa pun. Sekarang pergi ke Dasbor Blogger Anda -> Template -> Edit Template.

Ganti kode <html> dengan kode berikut:

<html amp = 'amp'>

Langkah 2: Tambahkan Tag Meta Charset dan Viewport:

Cari dan Periksa tag meta charset dan viewport untuk memastikan website kamu sudah menudukung halaman responsive (support mobile layout). Jika tidak ada, salin dan tempel kode berikut ini setelah tag <head>:

<meta charset = ”utf-8 ″>
<meta name = "viewport" content = "width = lebar-perangkat, skala-minimum = 1, skala awal = 1 ″>

Langkah 3: Tambahkan Tag Kanonis:

Buat blog Anda dapat ditemukan menggunakan tag kanonik. Periksa tag tautan kanonis. Jika tidak ada, tambahkan tautan kanonis seperti ini <linkrel = "canonical" href = "http://example.blogspot.in/article-metadata.html" /> yang hanya akan menunjuk ke dirinya sendiri.

Salin dan tempel kode berikut ini setelah tag viewport:

<link expr: href = 'data: blog.url' rel = 'canonical ’/>

Langkah 4: Siapkan AMP CDN:

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

Langkah 5: Siapkan Gambar AMP:

Ubah tag gambar menjadi tag amp-gambar seperti kode contoh berikut:

<amp-img src = "AmpImage.jpg" alt = "amp-img" height = "500 ″ width =" 500 ″> </ amp-img>

Tags #AMP #Blogger #CDN #Konfigurasi AMP #Setting AMP analytics bing Coding content marketing google search seo

Cara Membuat Blogger/Blogspot Dalam Format AMP