Categories
Domain Names

Mengenal Lebih Dekat Tentang Accelerated Mobile Pages (Google AMP)

Halo sobat setia jungle folk, pada kesempatan kali ini saya akan membahas tentang Google AMP. Sebenarnya apa sih google AMP itu? sebelum saya jelaskan lebih rinci saya ingin memberitahu anda apa kepanjangan dari AMP itu kepanjangan apa adalah Accelerated Mobile Pages. Google AMP ini merupakan produk baru dari google yang dirilis pada akhir 2015 lalu tepatnya pada bulan Oktober 2015. Pertama kali saya melihat AMP yaitu pada saat membuka google webmaster dimenu sebelah kiri tepatnya pada menu search appearance disitu muncul menu baru yaitu Accelerated Mobile Pages atau dalam bahasa indonesia laman ponsel dipercepat.

Apasih Google AMP itu ?

Accelerated Mobile Pages adalah sebuah proyek open source. AMP merupakan proyek yang dikembangkan oleh Google dan bertujuan untuk mempercepat akses ke suatu halaman situs mobile. AMP pertama kali diluncurkan pada bulan Oktober 2015, sejak kemunculannya AMP mendapat respon positif. Dalam kurun waktu empat bulan saja, sudah ada ratusan penerbit, perusahaan teknologi, dan iklan yang menggunakannya.

Pada dasarnya AMP berusaha untuk meminimalisir penggunaan JavaScript, CSS dan HTML. Sehingga suatu halaman web dapat diakses 4 kali lebih cepat dibandingkan yang tidak menggunakan AMP. AMP memprioritaskan pada pengguna web mobile, dengan demikian Anda bisa menghemat penggunaan data hingga 10 kali. Beberapa contoh situs besar yang menggunakan AMP antara lain, Kaskus, Kompas, Bola, Kapanlagi, Liputan6 dan situs lainnya. Untuk mengakses situs yang menggunakan AMP sangat mudah, Anda tinggal menuliskan kata kunci pada pencarian Google, kemudian Google akan menampilkan beberapa hasil pencarian yang ditandai dengan tanda petir.

Mengenal Lebih Dekat Tentang Accelerated Mobile Pages (Google AMP)

Bagaimana cara kerja Google AMP ?

Google Accelerated Mobile Pages (AMP) atau dalam bahasa indonesia Laman Ponsel Dipercepat pada dasarnya dalam sebuah template blog nya terdapat 3 macam kerangka seperti berikut :

Baca Juga :Cara memperbaiki error data terstruktur di webmaster

1.AMP HTML

Subset dari HTML, bahasa markup ini memiliki beberapa kustom tag. Jika Anda sudah familiar dengan HTML biasa, anda seharusnya tidak memiliki kesulitan beradaptasi laman yang ada ke AMP HTML.Pada dasarnya HTML dimodifikasi dengan beberapa properti tambahan. Brikut adalah contoh yang paling sederhana dari sebuah file AMP HTML :

<!doctype html>
<html ⚡>
 <head>
   <meta charset=”utf-8″>
   <link rel=”canonical” href=”hello-world.html”>
   <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
   <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>Hello World!</body>
</html>

Meskipun sebagian besar tag di halaman AMP HTML adalah tag HTML biasa, teapi beberapa tag HTML diganti dengan tag AMP yang lebih spesifik. Sebagai contoh, tag amp-img memberikan dukungan srcset penuh pada browser yang sebelumnya tidak mendukung tag tersebut.

2.AMP JS

Adalah merupakan kerangka kerja JavaScript (AMP Javascript Library) untuk halaman mobile. Fungsinya adalah web dapat dirender dengan cepat. Secara khusus merender sumber daya seperti laman, video, gambar, iframe  bersifat asynchronous. Perlu dicatat bahwa JavaScript eksternal tidak diperbolehkan dengan AMP. penggunaan tag AMP ditempat pada elemen terakhir padakode </head>.

Contoh penerapannya: <script async src=”https://cdn.ampproject.org/v0.js”></script>

AMP JS Library mengimplementasikan semua performa terbaik dari AMP dan mengelola pemuatan sumber daya serta memberi tag kustom untuk membuat render halaman lebih cepat.

3.Google AMP Cache

Google AMP Cache adalah jaringan pengiriman konten berbasis proxy untuk memastikan semua dokumen AMP valid dan meningkatkan kinerja halaman secara otomatis. Bila menggunakan Google AMP Cache, dokumen, semua file Java Script dan semua gambar dapat dimuat dengan lebih efisien.
Jadi apakah Ada sudah siap menggunanakan AMP pada situs web Anda? Dengan berbagai kelebihan dan kecepatan yang ditawarkan, saya rasa Anda wajib untuk menggunakan AMP. Dengan akses suatu halaman web yang cepat tentu pengunjung akan lebih merasa nyaman

Baca juga :Cara membuat agar blog seo mobile friendly

Bagaiaman Cara Mengetahui website/blog sudah support Google AMP ?

Jika kita telah menggunakan Google Webmaster Tool maka disana akan terlihat/mendeteksi laman blog versi AMP, Dan pada dasarnya sebuah tag canonical sebuah halaman AMP akan terlihat seperti dibawah ini :

<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>

atau kalian juga bisa mengunjungi google AMP testing tool yang sudah disediakan oleh google anda hanya cukup mensubmit URL blog sobat disini 

Untuk penerapan dasar pada HTML bisa anda seperti dibawah ini :

<!doctype html>
<html ⚡>
 <head>
   <meta charset=”utf-8″>
   <link rel=”canonical” href=”hello-world.html”>
   <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
   <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>Hello World!</body>
</html>

Pada penulisan di struktur HTML akan mengalami perubahan, seperti tag ad, embed, img, pixel, audio dan video akan berubah menjadi amp-ad, amp-embed, amp-img, amp-pixel, amp-audio dan amp-video. Sementara untuk CSS sepertinya tidak ada perubahan.

Sebagai contoh penggunaan salah satu markup tambahan diatas terlihat seperti dibawah ini, kode dibawah ini adalah penggunaan gambar untuk halaman:

<amp-img src=”http://korke21.blogspot.com/welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>

Sehingga jika menanamkan didalam CSS selector akan terlihat kode seperti dibawah :

amp-img {
  background-color: grey;
}

Untuk memasukan sumber audio pada laman anda, maka menggunakan element amp-audio. Kode ini harus ditempatkan di bawah kode :

<script async custom-element=”amp-audio” src=”https://cdn.ampproject.org/v0/amp-audio-0.1.js”><script>

Baca Juga :Cara agar blog muncul dihalaman pertama google

Kelebihan dan kekurangan menggunakan Google AMP

Seperti yang sudah kita bahas sebelumnya bahwa fokus dari Amp ini adalah pada kecepatan loading suatu blog atau website ketika pertama kali di kunjungi oleh visitor.

Kecepatan loading suatu blog akan sangat berpengaruh terhadap tingkat bouncing dari blog tersebut, jika dalam proses loading suatu blog memakan waktu yang cukup lama, maka tingkat bouncing blog tersebut dapat menjadi sangat tinggi atau di atas 50%, hal ini disebabkan pembatalan visitor dalam membuka blog tersebut karena memakan waktu yang cukup lama.

Bagi sebagian besar pengiklan tingkat bouncing yang tinggi akan sangat buruk dampaknya pada iklan yang mereka buat dan ingin ditampilkan.  Logikanya boro-boro orang dapat melihat iklan yang ingin ditampilkan sementara loading blognya saja sangat lambat!.

Dengan melihat dan memperhatikan sebagian kecil masalah diatas, disinilah kita dapat dengan sangat jelas melihat keuntungan jika menggunakan AMP Template atau AMP Themes, dengan kecepatan loading yang tidak diragukan lagi maka design suatu template Amp dapat dengan mudah menampilkan konten-konten iklan yang ada pada blog tersebut, tanpa harus menunggu loading yang begitu lama.

Jadi tunggu apalagi, kembangkan blog atau website anda kedepannya dengan menggunakan Amp template.

Sekian dari saya semoga ada manfaatnya

Source link