Daftar isi

Detail teknis Cerita Web

Important: this documentation is not applicable to your currently selected format ads!

Panduan ini menjelaskan semua detail teknis dan praktik terbaik yang seharusnya Anda tahu agar berhasil membuat Cerita Web dengan AMP.

AMP Valid

Cerita Web secara teknis adalah halaman web tunggal yang dibuat dengan AMP dan mengikuti spesifikasi AMP:

Mulai dengan jenis dokumen <!doctype html>.
Berisi <html ⚡> tingkat atas atau tag <html amp>.
Berisi tag <head> dan <body>.
Berisi tag<meta charset="utf-8"> sebagai anak atau turunan pertama dari tag <head>.
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>.
Berisi tag<link rel="canonical" href="page/url"> di dalam <head>-nya dengan href yang mengarah ke URL Cerita Web.
Berisi tag <meta name="viewport" content="width=device-width"> di dalam <head>-nya. Disarankan juga untuk menyertakan skala inisial=1.
Berisi kode boilerplate AMP di dalam tag <head>.

Perbedaan antara halaman web AMP dan Cerita Web yang dibuat dengan AMP adalah komponen amp-story. Ini adalah satu-satunya anak langsung dari <body> dokumen dan harus berisi atribut standalone. Semua halaman, lapisan, dan elemen Cerita Web ditentukan di dalam tag <amp-story>.

<!DOCTYPE html>
<html ⚡>
  <head>
    <meta charset="utf-8" />
    <title>Joy of Pets</title>
    <link rel="canonical" href="pets.html" />
    <meta name="viewport" content="width=device-width" />
    <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>
    <script
      async
      custom-element="amp-video"
      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
    ></script>
    <script
      async
      custom-element="amp-story"
      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
    ></script>
    <style amp-custom>
      ...;
    </style>
  </head>
  <body>
    <!-- Cover page -->
    <amp-story
      standalone
      title="Joy of Pets"
      publisher="AMP tutorials"
      publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
      poster-portrait-src="assets/cover.jpg"
    >
      <amp-story-page id="cover">
        <amp-story-grid-layer template="fill">
          <amp-img
            src="assets/cover.jpg"
            width="720"
            height="1280"
            layout="responsive"
          >
          </amp-img>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>The Joy of Pets</h1>
          <p>By AMP Tutorials</p>
        </amp-story-grid-layer>
      </amp-story-page>

      <!-- Page 1 -->
      <amp-story-page id="page1">
        <amp-story-grid-layer template="vertical">
          <h1>Cats</h1>
          <amp-img
            src="assets/cat.jpg"
            width="720"
            height="1280"
            layout="responsive"
          >
          </amp-img>
          <q
            >Dogs come when they're called. Cats take a message and get back to
            you. --Mary Bly</q
          >
        </amp-story-grid-layer>
      </amp-story-page>
      ...
    </amp-story>
  </body>
</html>

Ikuti Membuat tutorial Cerita Web pertama Anda dan baca dokumentasi referensi amp-story untuk mengetahui selengkapnya.

Kinerja puncak dan pengalaman pengguna

Pengguna mungkin melihat Cerita Web di area dengan koneksi jaringan yang lemah atau perangkat yang sudah tua. Pastikan mereka menikmati pengalaman mereka dengan mengikuti praktik terbaik ini.

Warna latar belakang

Tentukan warna latar belakang untuk setiap halaman Cerita Web. Mempunyai warna latar belakang memberikan fallback yang baik jika kondisi pengguna mencegah mereka mengunduh gambar atau aset video. Pilih warna yang mewakili warna dominan aset latar belakang halaman yang diinginkan, atau gunakan tema warna yang konsisten untuk semua halaman cerita. Pastikan warna latar belakang berbeda dari teks untuk keterbacaan.

Tentukan warna latar belakang untuk halaman dalam tag <style amp-custom> di tajuk dokumen Cerita Web atau inline pada komponen <amp-story-page>.

Elemen pelapis

Tajuk sistem berisi kontrol, seperti ikon bisukan dan bagikan. Ini muncul pada indeks Z yang lebih tinggi dibanding video dan gambar latar belakang. Pastikan tidak ada informasi penting yang ditutupi oleh ikon ini.

Rasio aspek

Desain aset Cerita Web pada rasio aspek 9:16. Karena tinggi dan lebar halaman berbeda di tiap browser dan perangkat, jangan tempatkan konten penting di dekat tepi halaman.

Gambar poster

Gambar poster ditampilkan kepada pengguna sementara video diunduh. Gambar poster harus mewakili video agar transisi menjadi mulus. Tentukan gambar poster dengan menambahkan atribut poster ke elemen amp-video Anda dan menambahkannya ke lokasi gambar.

<amp-video autoplay loop
  width="720" height="1280" layout="responsive"
  poster="images/kitten-playing.png">
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
</amp-video>

Video

Semua video harus ditambahkan melalui komponen amp-video.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Resolusi dan mutu

Enkode video untuk menyesuaikan mutu untuk pengoptimalan yang disarankan berikut ini:

MP4	-crf 23
WEBM	-b:v 1M

Coba pertahankan segmen HLS di bawah durasi 10 detik.

Format dan ukuran

Pertahankan video agar lebih kecil dari 4 MB untuk meraih kinerja optimum. Pertimbangkan untuk membagi video besar hingga beberapa halaman.

Jika Anda hanya dapat menyediakan format video tunggal, sediakan MP4. Jika mungkin, gunakan video HLS dan tentukan MP4 sebagai standar (fallback) untuk kompatibilitas browser. Gunakan kodek video berikut ini:

MP4, HLS, dan DASH	H.264
WEBM	VP9

Tentukan vs src

Gunakan elemen anak <source> dalam komponen <amp-video> untuk menentukan sumber video daripada atribut src. Menggunakan elemen <source> memungkinkan Anda untuk menentukan jenis video dan menambahkan sumber video cadangan. Anda harus menggunakan atribut type untuk menentukan jenis MIME. Gunakan application/x-mpegurl atau application/vnd.apple.mpegurl untuk video HLS. Untuk semua jenis video lain, gunakan awalan MIME video/ dan ikuti dengan format video, seperti ”video/mp4”.

<amp-video
  id="video-page1"
  autoplay
  loop
  layout="fill"
  poster="https://example.com/media/poster.jpg"
>
  <source
    src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl"
  />
  <source src="https://amp-example.com/media/movie.mp4" type="video/mp4" />
</amp-video>

Maju otomatis setelah video

Atribut auto-advance-after diekspos dengan amp-story-page yang menentukan jika dan kapan sebuah halaman cerita harus maju tanpa harus diketuk pengguna. Untuk maju setelah sebuah video, arahkan atribut ke ID video.

<amp-story-page auto-advance-after="myvideo"></amp-story-page>

Pengalaman desktop

Format Cerita Web mendukung sebuah pengalaman desktop opsional. Ini mengubah pengalaman desktop menjadi mode bleed penuh menghanyutkan, menggantikan pengalaman tiga panel potret default dan memungkinkan pengguna perangkat seluler untuk melihat saat perangkat mereka dipegang secara horizontal.

Pilih dukungan desktop dengan menambahkan atribut supports-landscape ke komponen <amp-story>.

<amp-story
  standalone
  supports-landscape
  title="Joy of Pets"
  publisher="AMP tutorials"
  publisher-logo-src="assets/icon.svg"
  poster-portrait-src="assets/cover.jpg"
>
</amp-story>

Written by @CrystalOnScript

{{#initial}}Komponen Penting{{/initial}}{{^initial}}Komponen{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}Artikel Populer{{/initial}}{{^initial}}Hasil{{/initial}}

{{title}}

;(

Terjadi kesalahan…

¯\_(ツ)_/¯

Tidak ada hasil yang ditemukan.