AMP

Praktik terbaik untuk membuat artikel AMP

Panduan ini menyediakan beberapa praktik yang direkomendasikan yang sebaiknya Anda terapkan saat membuat artikel AMP.

Warna background

Anda harus menentukan warna background untuk halaman artikel AMP. Dengan memiliki warna background, Anda memberikan pengalaman pengguna fallback yang baik meskipun kondisi jaringan yang buruk mencegah pengguna mendownload aset gambar atau video.

  • Warna background harus mewakili warna dominan pada aset background halaman.
  • Pilih warna yang memungkinkan transisi yang lancar dengan gambar atau halaman itu sendiri. Anda dapat memilih untuk:
    • Menggunakan warna dominan yang mewakili gambar/video.
    • Menggunakan warna tema yang konsisten untuk semua halaman dalam artikel.
  • Warna background harus berbeda dengan warna font agar teks dapat dibaca bahkan sebelum gambar dimuat.

Teks

Memastikan keterbacaan

Pastikan overlay teks pada halaman mudah dibaca:

  • Pilih warna font yang kontras dengan gambar dan warna background.
  • Tambahkan overlay gradien di antara gambar dan teks untuk mengontraskan teks dan gambar.

Teks yang ringkas

Perlu diingat bahwa artikel AMP didesain untuk menawarkan pengalaman yang lebih visual, sehingga teks pada halaman perlu dibuat seringkas mungkin (tidak lebih dari 1-2 kalimat). Pertimbangkan dengan cermat tujuan dan alur baca jika Anda yakin teks yang lebih panjang diperlukan.

Video

Menentukan atribut poster

poster adalah gambar yang ditampilkan di UI sampai video didownload. Secara umum, poster dapat berupa frame pertama video, walaupun gambar apa saja bisa digunakan. Namun, Anda harus memilih gambar yang mewakili video dan memungkinkan transisi yang lancar. Jika Anda memilih frame pertama, pastikan itu bukan frame kosong sementara.

Dimensi yang direkomendasikan untuk gambar poster adalah: 720 px (lebar 720 px x tinggi 1280 px).

Contoh: Menentukan poster

<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>

Menentukan <source> vs src

Saat menentukan sumber untuk amp-video.

Contoh: Menentukan beberapa file sumber

<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>

Ukuran/Panjang video

  • Untuk mendapatkan performa optimal, Anda harus menyediakan video dengan ukuran maksimal 4 MB.
  • Untuk video yang panjang, pertimbangkan membagi video di beberapa halaman.
  • Untuk halaman sampul, hindari video berukuran sangat besar.

Format video

Jika Anda hanya dapat menyediakan satu format video, sediakan MP4. Namun, jika mungkin, gunakan video HLS dan tentukan MP4 sebagai fallback untuk browser yang belum mendukung video HLS. HLS menjalankan streaming kecepatan bit adaptif, yang dapat menyesuaikan kualitas video dengan kecepatan sambungan internet pengguna.

Format video HLS tidak didukung pada browser Chrome untuk Desktop (bahkan melalui emulasi sekalipun), sehingga fallback MP4 harus ditentukan untuk semua traffic desktop ke halaman Anda. Untuk men-debug video HLS, Anda harus menggunakan perangkat seluler sebenarnya melalui proses debug USB.

Resolusi video

Video artikel AMP selalu ditampilkan vertikal (tampilan potret) dengan rasio tinggi lebar yang diharapkan sebesar 16:9. Gunakan resolusi yang direkomendasikan untuk tiap jenis streaming video:

Video streaming type Resolution
Non-adaptive 720 x 1280 px
Adaptive 720 x 1280 px
540 x 960 px
360 x 480 px

Untuk perangkat seluler yang rasio tinggi lebarnya tidak 16:9, video mungkin akan di-crop secara vertikal atau horizontal agar pas dengan viewport.

Codec video

  1. Untuk MP4, gunakan H.264.
  2. Untuk WEBM, gunakan VP9.
  3. Untuk HLS atau DASH, gunakan H.264.

Kualitas video

Pengoptimalan transcoding

Ada berbagai fitur yang dapat Anda gunakan untuk mengenkode video dan menyesuaikan kualitas video selama encoding. Berikut ini beberapa di antaranya:

Tool Notes
FFmpeg Recommended optimizations:
  • For MP4, use -crf 23.
  • For WEBM, use -b:v 1M.
avconv Recommended optimizations:
  • For MP4, use -crf 23.
  • For WEBM, use -b:v 1M.
Shaka Packager An encoder that can also output the HLS format including the playlist.

Ukuran segmen HLS

Pastikan durasi segmen HLS tidak lebih dari 10 detik.

Maju ke halaman berikutnya setelah video berakhir

Jika ingin maju otomatis dari satu halaman ke halaman berikutnya setelah video selesai diputar, Anda harus menetapkan nilai atribut auto-advance-after untuk <amp-story-page> ke id video, bukan ke panjang yang diharapkan dari video itu. Artinya, Anda harus menggunakan

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

bukan

<amp-story-page auto-advance-after="9s">

Hal ini karena pemutaran video dan penayangan halaman mungkin tidak dimulai pada waktu yang persis sama, atau panjang yang diberikan mungkin tidak benar, sehingga terdapat perbedaan antara durasi yang diharapkan dengan durasi yang sebenarnya. Kondisi ini dapat menyebabkan video diulang, yang bisa mengganggu perhatian pengguna.