Home Blogger

Cara Membuat Template Blog Menjadi Valid AMP

ANDD
ANDD
Updated: • 0 • min read
Table of Contents
Cara Membuat Template Blog Menjadi Valid AMP

Hallo sobat blogger. Pada artikel kali ini saya akan membahas dan berbagi tutorial bagaimana cara membuat template blog menjadi valid AMP.

Mungkin dari kalian ada yang belum tahu bagaimana cara membuat sebuah template blog menjadi valid amp.

Sebelum lanjut ke pembahasan artikel, saya akan menjelaskan beberapa kelebihan dan kekurangan menggunakan template blog AMP, berikut penjelasannya.

Kelebihan Template Blog AMP

  • Blog lebih mobile friendly
  • Loading halaman cepat
  • Beban server berkurang
  • Pengalaman pengguna meningkat
  • Penelusuran blog meningkat

Kekurangan Template Blog AMP

  • Penggunaan script pada template terbatas
  • Elemen branding lebih sedikit
  • Pemasangan iklan terbatas
  • Versi asli berbeda dengan versi Web

Membuat Template Blog Menjadi Valid AMP

1. Buka dashboard blog Anda > masuk menu Tema > Edit HTML. Ganti dan tambahkan beberapa kode dalam template agar valid AMP, ubah <html> seperti kode berikut ini <html amp="amp">

2. Tambahkan tag viewport dan charset dalam template tepat di bawah tag <head>

<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui' name='viewport'/>

3. Tambahkan tag canonical, letakan kode di bawah setelah tag <head>

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

4. Tambahkan kode sebelum 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>

5. Tambahkan Javascript AMP library sebelum tag </head>

<script async src="https://cdn.ampproject.org/v0.js"></script>

6. Terakhir ganti semua tag image dalam template dan semua postingan seperti di bawah ini:

<amp-img src="URL Gambar"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

Sekarang cek atau validasi template blog Anda di Pengujian AMP.

Itulah tutorial bagaimana Cara Membuat Template Blog Valid AMP, semoga artikel ini bermanfaat untuk Anda semua.

ANDD
ANDD Daily workers

Post a Comment