Apa Sih AMP (Accelerated Web Pages) Dan Manfaatnya?
AMP (Accelerated Web Pages) merupakan halaman website dengan desain khusus agar website mobile friendly, walaupun sebelumnya website tersebut sudah mobile
friendly dengan AMP akan lebih diminimalkan lagi, sehingga proses load website
tersebut akan lebih cepat bahakan kecepatan samapi 4x lebih cepat.
Nah saat berselancar dengan smartphone Anda tidak jarang anda menemukan logo Petir pada hasil pencarian, itulah yang dinamakan dengan AMP (Accelerated Web Pages). Lalu apa Sih sebenarnya maksud dan fungsi dari AMP tersebut?
Halaman website yang menggunakan AMP seperti yang dilansir dari website penyedia AMP https://www.ampproject.org/id/ ada aturan wajib yang harus diikuti oleh developer dalam penggunaan AMP tersebut seperti A:
Mulai dengan tipe dokumen
<!doctype html>
Berisi tag
<html >
tingkat atas
<html amp>
Berisi tag
<head>
dan
<body>
(Keduanya opsional dalam HTML).
Berisi tag
<link rel="canonical" href="$SOME_URL" />
dalam bagian kepala yang menunjuk pada versi HTML reguler dari dokumen AMP HTML atau menunjuk pada dirinya sendiri jika tidak ada versi HTML seperti itu.
Berisi tag
<meta charset="utf-8">
sebagai anak pertama dari tag kepalanya.
Berisi tag
<meta name="viewport" content="width=device-width,minimum-scale=1">
di dalam tag kepalanya. Juga disarankan untuk menyertakan initial-scale=1.
Berisi tag
<script async src="https://cdn.ampproject.org/v0.js"></script>
sebagai elemen terakhir dalam kepalanya (ini mencakup dan memuat pustaka AMP JS).
Berisi yang berikut dalam tag :
<head>
<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>
Pada aturan diatas adalah aturan jika Anda akan membuat halaman AMP secara programming manual, pada cms tertentu misalkan wordpress. Anda tinggal melakukan instalasi plugin AMP kemudian konfigurasikan sesuai dengan ketentuan plugin tersebut.
dan biasanya pada halaman yang sudah teritegrasi dengan AMP, terdapat tombol untuk merubah kembali tampilan mobile biasanya (original version). Pada google webmaster (google search console) tersedia menu untuk pengecekan AMP, google akan menilai website Anda apakah sudah memenuhi aturan dan sudah terintegrasi dengan AMP? Jika belum silahkan gunakan engine AMP tersebut dan mulailah integrasikan dengan website Anda. Jika sudah, akan menjadi nilai tambah bagi Website Anda dalam ranking pencarian dalam google search.
Nah, Meskipun AMP masih tergolong baru dan perlu banyak perbaikan, namun manfaat penggunaan AMP sudah dapat dirasakan. Beberapa manfaat atau kelebihan dari AMP diantaranya:
Website yg menggunakan AMP ada tanda logo "petir" |
Nah saat berselancar dengan smartphone Anda tidak jarang anda menemukan logo Petir pada hasil pencarian, itulah yang dinamakan dengan AMP (Accelerated Web Pages). Lalu apa Sih sebenarnya maksud dan fungsi dari AMP tersebut?
Halaman website yang menggunakan AMP seperti yang dilansir dari website penyedia AMP https://www.ampproject.org/id/ ada aturan wajib yang harus diikuti oleh developer dalam penggunaan AMP tersebut seperti A:
Mulai dengan tipe dokumen
<!doctype html>
Berisi tag
<html >
tingkat atas
<html amp>
Berisi tag
<head>
dan
<body>
(Keduanya opsional dalam HTML).
Berisi tag
<link rel="canonical" href="$SOME_URL" />
dalam bagian kepala yang menunjuk pada versi HTML reguler dari dokumen AMP HTML atau menunjuk pada dirinya sendiri jika tidak ada versi HTML seperti itu.
Berisi tag
<meta charset="utf-8">
sebagai anak pertama dari tag kepalanya.
Berisi tag
<meta name="viewport" content="width=device-width,minimum-scale=1">
di dalam tag kepalanya. Juga disarankan untuk menyertakan initial-scale=1.
Berisi tag
<script async src="https://cdn.ampproject.org/v0.js"></script>
sebagai elemen terakhir dalam kepalanya (ini mencakup dan memuat pustaka AMP JS).
Berisi yang berikut dalam tag :
<head>
<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>
Pada aturan diatas adalah aturan jika Anda akan membuat halaman AMP secara programming manual, pada cms tertentu misalkan wordpress. Anda tinggal melakukan instalasi plugin AMP kemudian konfigurasikan sesuai dengan ketentuan plugin tersebut.
dan biasanya pada halaman yang sudah teritegrasi dengan AMP, terdapat tombol untuk merubah kembali tampilan mobile biasanya (original version). Pada google webmaster (google search console) tersedia menu untuk pengecekan AMP, google akan menilai website Anda apakah sudah memenuhi aturan dan sudah terintegrasi dengan AMP? Jika belum silahkan gunakan engine AMP tersebut dan mulailah integrasikan dengan website Anda. Jika sudah, akan menjadi nilai tambah bagi Website Anda dalam ranking pencarian dalam google search.
Nah, Meskipun AMP masih tergolong baru dan perlu banyak perbaikan, namun manfaat penggunaan AMP sudah dapat dirasakan. Beberapa manfaat atau kelebihan dari AMP diantaranya:
- Meningkatkan Peringkat di Mesin Pencari, Meskipun AMP bukan jaminan SEO, tetapi jika kita memperhatikan optimasi SEO maka terdapat hal penting yaitu kecepatan loading halaman. Kecepatan akses memungkinkan blog menempati peringkat baik di SERP, apalagi jika diimbangi dengan isi konten yang berkualitas.
- Halaman Menjadi Sangat Ringan, AMP dibangun oleh tiga komponen penting yaitu AMP HTML, AMP JS, dan Google AMP cache. Ketiga komponen tersebutlah yang membuat halaman blog menjadi sangat ringan, sehingga kecepatan akses meningkat.
- Dan tidak hanya itu, pengguna juga bisa menghemat data internet. Biasanya pengunjung yang datang ke blog kita hanya mencari informasi yang diinginkan saja, setelah itu langsung pergi begitu saja karena takut data internetnya akan habis. Nah, jika pemilik blog menggunakan custom AMP maka pengunjung tidak perlu takut kehabisan data internet sehingga bisa leluasa mencari informasi-informasi terkait.
No comments: