Sahabat pernah mendengar Accelerated Mobile Pages (AMP)? AMP atau Accelerated Mobile Page adalah proyek Google yang dibuat sebagai standar untuk publisher untuk memiliki halaman yang dapat dimuat dengan cepat pada perangkat mobile. Pada tanggal 24 Februari 2016 kemarin, Google secara resmi telah mengintegrasikan AMP ke dalam hasil pencarian mobile.Oleh karenanya, akhir-akhir ini Google terus mendorong para publisher untuk mengunakan AMP agar halaman web dengan konten video, animasi dan grafis dapat dimuat bersama iklan dengan cepat dan dimuat seketika di berbagai jenis ponsel, tablet atau perangkat seluler yang digunakan.
Namun Google menegaskan bahwa ini bukan sesuatu yang dapat menentukan peringkat untuk sebuah situs. Mesikipun demikian, Google akan memberikan label AMP (tanda bulat petir) pada situs yang menggunakan AMP sehingga pembaca akan lebih mudah memilih situs mana yang cepat diakses dengan perangkat mobile-nya. Secara logika, jika situs dengan AMP dapat dimuat dengan cepat dengan perangkat mobile, maka akan lebih cepat lagi jika diakses dengan perangkat desktop, bukan? Maka tak menutup kemungkinan pengunjung akan 'berlari' menuju website yang diintegrasikan dengan AMP tersebut.
Apa yang Berbeda di AMP?
Sebagaimana penjelasan kang Ismet bahwa untuk CSS tidak ada perubahan apapun. Namun untuk HTML ada sedikit struktur berbeda dalam penulisan, diantaranya seperti tag img atau video menjadi amp-img dan amp-video.
Untuk mendapatkan perenderan cepat, kita diharuskan untuk menggunakan AMP Javascript Library yang akan merender halaman dan menampilkan video, gambar, iframe dan lainnya dengan asynchronous. Hal yang wajib adanya dalam AMP HTML adalah :
- Dimulai dengan
<!doctype html> - Menyertakan
<html ⚡>atau<html amp>. - Menyertakan
<link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui versi AMP HTML. - Menyertakan
<meta charset="utf-8">. - Menyertakan
<meta name="viewport" content="width=device-width,minimum-scale=1">pada tag head. - Menyertakan AMP Javascript Library
<script async src="https://cdn.ampproject.org/v0.js"></script>pada tag head. - Menyertakan
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>pada tag head.
Selain di atas, ada juga penggunaan kode yang harus diperhatikan dalam membuat web berbasis AMP HTML, diantaranya :
- Tidak boleh ada dua tag
<style>, apabila ada penambahan maka gunakan<style amp-custom>, itupun hanya satu saja yang diizinkan. - Tidak boleh membuat inline CSS seperti
<aside class='sidebar' style='margin-top:0;padding:10px'>. - Script harus external dan menggunakan async.
- Script tidak diperbolehkan menggunakan attribute
type='text/javascript' - Seperti di atas, tidak boleh menggunakan tag
imgtapi harusamp-img
Bisakah Blogspot Diintegrasikan dengan AMP?
Jawabannya BISA. Kami sendiri telah menggunakan template berbasis AMP, sebagaimana yang blog ini gunakan. Jika sahabat ingin mendapatkan dan merasakan template blogspot dengan terintegrasi AMP, silahkan lihat template yang kami sediakan di blog ini.
Sumber: Ngonline06
Show Disqus Comment Hide Disqus Comment