Senin, Februari 15, 2016

Home » , » AMP HTML (ACCELERATED MOBILE PAGES)

AMP HTML (ACCELERATED MOBILE PAGES)

No comments
Saat saya menjelajah di ruang webmaster tools google, saya menemukan konten yang berisi AMP atau Accelerated Mobile Pages. Karena rasa penasaran saya mencoba menelusuri apa itu AMP (Accelerated Mobile Pages).

AMP atau Accelerated Mobile Pages adalah laman web yang dirancang khusus untuk pengguna web mobile dengan meminimalisir penggunaan html, CSS, maupun javascript dengan tujuan untuk memberikan proses load halaman web yang cepat dan singkat.

AMP html bekerja dengan AMP JavaScript library, susunan struktur html seperti biasa hanya  saja menambahkan AMP JS library sehingga mencukupi spesifikasi untuk AMP html. 
Yang perlu kita ketahui dan perhatikan dalam AMP Html adalah :
  • Mulai dengan doctype <!doctype html>
  • Memberikan tag <html ⚡> atau (<html amp>
  • Konten <head> and <body> opsional di html
  • Mengandung <link rel="canonical" href="$SOME_URL" /> untuk mengetahui versi AMP html
  • Mengandung <meta charset="utf-8">
  • Mengandung <meta name="viewport" content="width=device-width,minimum-scale=1"> terletak didalam tag head
  • Mengandung javascript library <script async src="https://cdn.ampproject.org/v0.js"></script> elemen terakhir di tag head
  • Mengandung konten <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>
Adapun Contoh html dasar dari AMP html seperti ini :
<!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>
Untuk memulai membuat AMP html anda silahkan kunjungi ampproject.org dan untuk mengetahui secara spesifik apa itu AMP klik disini.

 Semoga postingan ini dapat bermanfaat, sampai jumpa lagi di postingan berikutnya.

0 komentar:

Posting Komentar