Apa yang dimaksud dengan Accelerated Mobile Pages (AMP) -- Google telah merilis sebuah konsep baru yang bernama Accelerated Mobile Pages atau disebut dengan AMP. Pada hari ini admin akan berbagi tentang Apa itu AMP dan Apa sih tujuan AMP ini. Tidak hanya itu, pada kesempatan kali ini admin juga akan menjelaskan Siapa dan Mengapa kita harus mengimplementasikan AMP ini pada blog/web kita. Tidak usah panjang lebar yuk langsung saja kita bahas tentang AMP.
Apa Maksud dari AMP (Accelerated Mobile Pages)?
Accelerated Mobile Pages adalah sebuah proyek Google yang bertujuan untuk mempermudah blog/web diakses pada perangkat mobile secara instan. Dengan kata lain, Accelerated Mobile Pages adalah kerangka kerja yang sangat mudah untuk digunakan mempercepat loading blog/web di perangkat mobile. Mengapa Google memberikan kebijakan demikian? Karena ada banyak sekali keluh kesah dari pengguna internet mengenai penggunaan internet yang sangat lambat. Bagi sebagian orang yang tidak memiliki smartphone canggih biasanya akan menikmati internet melalui sebuah jasa misalnya dari warnet. Meski sudah menikmati internet dari warnet banyak diantara mereka yang mengeluh walhasil banyak perusahaan besar menciptakan terobosan baru dengan banyak memproduksi smartphone canggih untuk berinternet ria. Sehingga, untuk akhir-akhir ini hampir diseluruh dunia banyak orang yang mengakses internet melalui smartphone bukan lagi melalui laptop ataupun warnet lagi.
Banyak pengguna smartphone yang memakai layanan 2 G ataupun 3 G untuk menikmati internet. Nah, untuk hal inilah AMP membatasi apa yang dapat sobat lakukan di halaman web/blog. Sebagai blogger, memasang desain blog yang mewah sangatlah diharapkan. Tentunya agar dapat mendukung kecepatan loading blog/web. Yap dengan AMP inilah maka sobat dapat mengotak-atik HTML sobat agar lebih Mobile Friendly.
Macam-Macam Accelerated Mobile Pages (AMP)
Berikut ini adalah 3 bagian AMP yang wajin sobat ketahui, yaitu:- AMP HTML: Ini adalah sebuah subset dari HTML. Ini juga merupakan bahasa markup yang memiliki beberapa kustom tag, properti dan masih banyak lagi. Tapi, jika sobat sudah familiar dengan HTML biasa, sobat tidak akan mengalami kesulitan untuk beradaptasi dengan halaman yang sudah ada terhadap AMP sebuah laman. Untuk rincian lebih lanjut tentang bagaimana hal itu berbeda dari HTML dasar, sobat dapat mendaftar AMP Proyek dari AMP Project List. Disini dijelaskan bahwa halaman AMP HTML "harus" dimiliki.
- AMP JS : Sebuah kerangka JavaScript untuk halaman mobile. Untuk sebagian besar, AMP JS mengelola penanganan sumber daya dan pemuatan asynchronous. Perlu dicatat bahwa pihak ketiga JavaScript tidak diizinkan oleh AMP.
- AMP CDN: Opsi Pengiriman Jaringan Konten, AMP CDN akan mengambil informasi mengenai halaman AMP-enabled sobat, cache dan secara otomatis membuat beberapa optimasi kinerja.
Cara Memasang AMP di Blog
Berikut adalah cara memasang AMP di blog, baca ya...Copy dan paste script dibawah ini kemudian simpan dalam bentuk .html.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>
Konten didalam <body>, sejauh ini, cukup sederhana. Tapi ada banyak kode tambahan di <head> yang mungkin tidak begitu jelas. Oleh karena itu yuk bahas tentang syarat-syarat Mark Upnya.
Syarat-Syarat AMP
AMP HTML harus punya:- Mulailah dengan DOCTYPE <! DOCTYPE html>
- Mengandung tingkat atas <html ⚡> tag (<html amp> diterima juga).
- Mengandung <head> dan <body> tag (Bagian ini sudah bawaan di dalam HTML).
- Mengandung <link rel = "canonical" href = "$ SOME_URL" />. Tag ini di dalam <head> mereka yang menunjuk ke versi HTML biasa dari dokumen AMP HTML atau untuk dirinya sendiri jika ada versi HTML seperti itu.
- Mengandung <charset = "-8 utf" meta> tag sebagai anak pertama dari tag <head> mereka.
- Mengandung <meta name = "viewport" content = "width = device-width, minimal skala = 1"> tag ini terletak di bagian <head>. Ini juga dianjurkan untuk menyertakan awal skala = 1.
- Mengandung <script async src = "https://cdn.ampproject.org/v0.js"> </ script> tag sebagai elemen terakhir di <head>
- Berisi sebagai berikut di <head> tag:
- <style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
- Untuk menambahkan image gunakan : <amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>.
Preview dan Validasi AMP HTML
Preview halaman AMP ada sebelum di pubslih seperti yang sobat lakukan saat memantau situs HTML statis lainnya. Perhartikan dua hal berikut ini. Diantaranya:
- Buka secara langsung di browser dari file system (unsur-unsur tertentu mungkin tidak bekerja karena XMLHttpRequests gagal).
- Gunakan server web lokal seperti Apache 2 atau Nginx. (Tips: Untuk web server cepat, jalankan python -m SimpleHTTPServer.)
Selanjutnya, pastikan bahwa halaman AMP sobat sudah valid, atau AMP sobat tidak akan ditemukan dan didistribusikan oleh platform pihak ketiga seperti Google Search. Bagaimana cara untuk memvalidasi AMP, baca tipsnya:
- Buka halaman Anda di browser Anda.
- Tambahkan "#development=1" untuk URL, misalnya, http: // localhost: 8000 / released.amp.html # pengembangan = 1.
- Buka Chrome DevTools console dan periksalah kesalahan validasi.
Nah begitu kiranya untuk sedikit penjabaran AMP (Accelerated Mobile Pages). Hal tersebut adalah sebagian tutorial yang mungkin masih belum begitu jelas. Semoga dengan adanya artikel ini semua akan mengerti bahwa Google masih menjalankan Algoritma Mobilegeddon dan AMP ini. Jadi kuasailah salah satu supaya ketika di uji dalam Structured test page maka tidak akan ada lagi kesalahan-kesalahan didalam blog sobat. Terus bagaimana kenampakan AMP ini di Google? Coba scroll kebawah lagi.
Seperti Apakah AMP Muncul Di Google?
Google telah menyediakan demo dari beberapa fitur AMP. Salah satunya akan terlihat di SERP. Sobat dapat mencobanya dengan pergi ke alamat g.co/ampdemo~~V pada ponsel sobat. Kemudian, carilah sesuatu seperti "Mars." Maka sobat akan melihat Carousel AMP di Mobile phone sobat.
Klik salah satu yang ditampilkan oleh SERP. Sobat dapat menggerser ke arah kanan atau kiri untuk membaca artikel yang berAMP lainnya. Liat gambar berikut,
Itu adalah gambar yang bagus mengenai AMP Page. Admin rasa dengan AMP tersebut maka jumlah traffik akan semakin bertambah pula karena ini adalah salah satu tips SEO di awal tahun 2016.
Oke segitu saja sobat untuk artikel di awal Maret 2016 ini. Semoga bermanfaat. Jangan lupa kritik dan sarannya mengenai Apakah yang dimaksud dengan Accelerated Mobile Pages (AMP).
Salam Blogging.