Pengertian dan cara penggunaan google AMP (Accelerated Mobile Pages)
Kali ini saya akan mencoba membahas pengertian dari google AMP (Accelerated Mobile Pages) dan cara penggunaannya pada html.
Apa itu amp ?
Accelerated Mobile Pages (AMP) adalah produk baru google untuk perangkat mobile yang diciptakan untuk mempermudah dan memperingan dalam penerimaan halaman website bagi pengguna internet yang menggunakan smartphone/handphone.
Kenapa harus amp ?
ketika kita membuka website tanpa amp, halaman website akan di kirim penuh bersama data-data yang dibutuhkan layaknya dihalaman desktop, sehingga pengguna smartphone dengan koneksi terbatas akan kesulitan dan membutuhkan waktu lama dalam menerima data-data dari website tersebut, penggunaan paket data pun akan meningkat. Dengan adanya amp, data yang dikirim akan disesuaikan dengan kebutuhan saja sesuai dengan peraturan yang diberikan oleh google sendiri.
Bagaimana cara penggunaan nya?
hal-hal yang perlu diperhatikan dalam penggunaan amp pada html yaitu
<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />
kode diatas diletakkan dalam tag <head> pada halaman amp yang nanti akan anda buat,
kemudian siap kan template tersendiri untuk halaman amp yang akan anda buat.
contoh kode dipersiapkan antara lain sebagai berikut
<!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>
kode di atas adalah contoh, anda bisa melakukan penyesuaian sesuai dengan kebutuhan anda. data dapat anda sesuaikan dengan data halaman non amp.
setelah anda mempersiapkan template amp tersebut, anda dapat langsung memberikan link ke arah halaman amp anda pada halaman non amp dalam tag <head> dengan kode berikut
<link rel="amphtml" href="https://www.example.com/url/to/amp-version.html" />
setelah semua kode sudah anda pasang, anda dapat melakukan resubmit sitemap atau gunakan menu ambil sebagai google yang ada di web master tool, dan yang perlu anda ingat adalah anda tidak perlu membuat sitemap tersendiri untuk halaman amp anda, karena dengan menggunakan sitemap awal yang pernah anda buat, amp akan terdeteksi dengan sendirinya apa bila anda telah menambahkan kode diatas.
Untuk melakukan pengecekan apakah halaman amp yang anda buat tidak terdapat error, anda dapat menggunakan tool dari google berikut.
AMP TEST
sekian tentang Pengertian dan cara penggunaan google AMP (Accelerated Mobile Pages)
sumber : https://www.ampproject.org/id/docs/get_started/create/basic_markup
Subscribe to:
Post Comments (Atom)
0 Response to "Pengertian dan cara penggunaan google AMP (Accelerated Mobile Pages)"
Post a Comment