Cara Membuat Halaman AMP Untuk Pemula

Ini Ceritaku, Cara Membuat Halaman AMP Untuk Pemula - Sebelum membahas mengenai cara membuat halaman AMP, ada baiknya kita tahu dahulu apa AMP. AMP atau Accelerated Mobile Pages adalah salah satu cara untuk membuat halaman konten status dengan render ringan dan cepat. Ada beberapa hal yang tidak bisa lepas dari halaman AMP diantaranya HTML AMP, Library JS AMP, Cache AMP.


Membuat halaman AMP

Halaman AMP sebenarnya tidak jauh berbeda dengan HTML, hanya dibedakan dengan penambahan AMP. Berikut ini adalah file AMP sederhana dan bisa anda kembangkan. Tidak perlu dijelaskan jika anda sudah mengerti mengenai dasar-dasar pada HTML.

<!doctype html>
<html amp lang="en">
 <head>
   <meta charset="utf-8">
    <title>Welcome To AMP</title>
   <link rel="example" href="example-project.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
      {
        "@context": "http://exaample.com",
        "@type": "lifestyle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2017-12-09T12: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 My World!</h1>
<h2>example for this Ini Ceritaku</h2>
</body>
</html>

Beberapa tag yang berbeda dengan html biasa inilah yang disebut sebagai tag AMP dan berfungsi memudahkan penerapan pola umum dengan performa yang bagus. Sejauh anda mengerti dengan kode-kode dasar HTML maka tidak sulit untuk memahami kode ini, karena kode AMP hanyalah pengembangan dari HTML.

Menambahkan Gambar Melalui Kode AMP

Kode-kode yang digunakan dalam HTML bisa anda gunakan dalam AMP juga, terutama dalam memasukan file berupa gambar. Tag <img></img> hanya perlu ditambahkan “amp” didalamnya. 

Berikut ini adalah contoh sederhana kode AMP ketika ingin memasukan file gambar
<amp-img src=”example1.jpg” alt=”welcome” height=”450” width=”750”></amp-img>

Modifikasi Presentasi dan kontrol layout

Karena AMP pada dasarnya adalah laman web, maka setiap penerapan gaya dalam elemen maupun halaman digunakan kode css pada umumnya. Penerapan gaya elemen dalam stylesheet sisipan dalam <head> yang disebut <style amp-custom>. Berikut ini contoh penggunaan secara detailnya.

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: blue;
    border: 2px solid pink;
  }
</style>

Setelah selesai memodifikasi, tentu akan diperlukan kontrol layout sendiri. Karena dua hal ini tidak bisa lepas artinya harus ada untuk saling melengkapi. AMP mengikuti rule lebih kompleks saat melakukan layout elemen pada halaman AMP. Pada AMP kontrol diperlukan set ukuran karena berkaitan dengan alasan kinerja AMP nantinya.

Tinjau dan Validasi Halaman

Seperti halnya HTML, sebelum melakukan validasi kode ada baiknya anda melakukan peninjauan dahulu bagaimana tampilan halaman AMP. Untuk proses peninjauan ini anda bisa menggunakan browser secara langsung dari sistem file, atau menggunakan web lokal host (misalkan Apache atau Nginx). Tetapi sebelumnya pastikan dahulu kode-kode yang anda gunakan benar dalam pelatakannya.

Setelah melakukan tinjauan mengenai kode dan perangkatnya, selajutnya adalah memvalidasi halaman yang telah anda buat. 

Caranya cukup sederhana.
  1.  Buka halaman yang telah anda buat di browser 
  2. Menambahkan kode #development=1” pada url (misal: http://localhost:600/released.amp.html#development=1 
  3. Buka konsol Chrome DevTools lalu periksa kesalahan validasinya.

Persiapkan Halaman untuk Pencarian dan Distribusi

Untuk menautkan halaman pada kode AMP caranya kurang lebih sama dengan ketika menggunakan html. Untuk contoh penggunaannya seperti yang dituliskan dalam contoh berikut
<link rel="amp-html" href="https://www.example.com/url/to/amp/doc.html">

Sentuhan Terakhir Sebelum Publish

Setelah melakuakn validasi, peninjauan secara mendetail maka berikan sentuhan terkahir untuk kemudian halaman AMP siap di publish. Pelajari juga mengenai prinspi kerja AMP seperti apa, selain memberikan petunjuk juga memberikan pengetahuan mendalam bagi anda.


Demikian artikel kali ini tentang Cara Membuat Halaman AMP khususnya untuk pemula. Semoga artikel ini bisa memudahkan Anda dalam mencari referensi tentang membuat halaman AMP. Terima kasih

0 Response to "Cara Membuat Halaman AMP Untuk Pemula"

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.