AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Membuat halaman HTML AMP Anda

Markah berikut ini merupakan titik awal atau boilerplate yang baik. Salin dan simpan ke dalam berkas berekstensi .html.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.dev/id/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width">
    <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>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Sejauh ini, konten pada badan halaman ini cukup mudah dipahami. Namun, banyak kode tambahan di bagian tajuk yang mungkin tidak bisa langsung dipahami. Mari kita uraikan markah yang diperlukan.

Gunakan HTTPS: Saat membuat konten dan halaman AMP, sebaiknya Anda memprioritaskan penggunaan protokol HTTPS (bukan HTTP). Meskipun HTTPS tidak wajib digunakan untuk dokumen AMP itu sendiri atau untuk gambar dan font, banyak fitur AMP yang mewajibkan penggunaan HTTPS (cth.: video, iframe, dan banyak lagi). Untuk memastikan halaman AMP Anda sepenuhnya memanfaatkan semua fitur AMP, gunakan protokol HTTPS. Anda dapat mempelajari HTTPS lebih lanjut dalam "Mengapa HTTPS Penting".

Gunakan Penghasil Boilerplate AMP agar dapat dengan cepat memulai pembuatan halaman AMP baru.

Markah yang diperlukan

Dokumen HTML AMP HARUS:

Aturan Deskripsi
Mulai dengan jenis dokumen <!doctype html>. Standar untuk HTML.
Berisi tag <html ⚡> level teratas
(<html amp> juga diterima).		 Mengidentifikasi halaman sebagai konten AMP.
Berisi tag <head> dan <body>. Opsional pada HTML, tetapi tidak pada AMP.
Berisi tag<meta charset="utf-8"> sebagai anak atau turunan pertama dari tag <head> mereka. Mengidentifikasi pengodean untuk halaman tersebut.
Berisi tag <script async src="https://cdn.ampproject.org/v0.js"></script> di dalam <head>-nya. Sebagai praktik terbaik, Anda seharusnya menyertakan skrip ini sedini mungkin di dalam <head>. Menyertakan dan memuat perpustakan JS AMP.
Berisi tag <link rel="canonical" href="$SOME_URL"> di dalam <head>. Mengarah ke versi HTML reguler dari dokumen HTML AMP, atau ke dokumen HTML AMP itu sendiri jika tidak ada versi HTML seperti itu. Pelajari lebih lanjut dalam Membuat Halaman Anda Mudah Ditemukan.
Berisi tag <meta name="viewport" content="width=device-width">. Disarankan juga untuk menyertakan skala inisial=1. Menentukan viewport yang responsif. Pelajari lebih lanjut dalam Membuat Halaman AMP yang Responsif.
Berisi Kode boilerplate AMP di tag <head>. Boilerplate CSS awalnya menyembunyikan konten hingga JS AMP dimuat.

Metadata opsional

Selain persyaratan dasar, contoh kita juga mencakup definisi Schema.org di bagian tajuk, yang bukan merupakan persyaratan wajib untuk AMP, tetapi diperlukan untuk mendistribusikan konten Anda di tempat-tempat tertentu (contoh: di korsel cerita teratas Google Search).

Kunjungi referensi berikut ini untuk mempelajari lebih lanjut:

Kabar baik! Itu saja yang diperlukan untuk membuat halaman AMP pertama kita, tetapi tentu saja, belum banyak yang masuk ke badan halaman. Di bagian selanjutnya, kita akan membahas cara menambahkan elemen dasar, seperti gambar, elemen AMP kustom, cara menata halaman, dan membuat tata letak yang responsif.

Bab sebelumnya Bab selanjutnya