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.
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><metacharset="utf-8"/><title>Joy of Pets</title><linkrel="canonical"href="pets.html"/><metaname="viewport"content="width=device-width"/><styleamp-boilerplate>body{-webkit-animation:-amp-start8ssteps(1,end)0s1normalboth;-moz-animation:-amp-start8ssteps(1,end)0s1normalboth;-ms-animation:-amp-start8ssteps(1,end)0s1normalboth;animation:-amp-start8ssteps(1,end)0s1normalboth;}@-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><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;}</style></noscript><scriptasyncsrc="https://cdn.ampproject.org/v0.js"></script><scriptasynccustom-element="amp-video"src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script><scriptasynccustom-element="amp-story"src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script><styleamp-custom>...;</style></head><body><!-- Cover page --><amp-storystandalonetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/AMP-Brand-White-Icon.svg"poster-portrait-src="assets/cover.jpg"><amp-story-pageid="cover"><amp-story-grid-layertemplate="fill"><amp-imgsrc="assets/cover.jpg"width="720"height="1280"layout="responsive"></amp-img></amp-story-grid-layer><amp-story-grid-layertemplate="vertical"><h1>The Joy of Pets</h1><p>By AMP Tutorials</p></amp-story-grid-layer></amp-story-page><!-- Page 1 --><amp-story-pageid="page1"><amp-story-grid-layertemplate="vertical"><h1>Cats</h1><amp-imgsrc="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>
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.
Semua video harus ditambahkan melalui komponen amp-video.
<amp-videocontrolswidth="640"height="360"layout="responsive"poster="/static/inline-examples/images/kitten-playing.png"><sourcesrc="/static/inline-examples/videos/kitten-playing.webm"type="video/webm"/><sourcesrc="/static/inline-examples/videos/kitten-playing.mp4"type="video/mp4"/><divfallback><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”.
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.
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-storystandalonesupports-landscapetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/icon.svg"poster-portrait-src="assets/cover.jpg"></amp-story>
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.