Beranda » Mobile » 10 Komponen Ponsel Dipercepat Penting (AMP) Komponen Yang Harus Anda Ketahui
10 Komponen Ponsel Dipercepat Penting (AMP) Komponen Yang Harus Anda Ketahui
Laman Seluler yang Dipercepat atau AMP adalah inisiatif Google untuk membuat web seluler lebih cepat. Untuk mencapai tujuan ini, standar AMP membatasi cara Anda dapat menggunakan HTML, CSS, dan JavaScript, dan mengelola pemuatan sumber daya eksternal, seperti gambar, video, dan iklan melalui runtime sendiri.
Ini mensyaratkan Anda tidak bisa digunakan baik JavaScript khusus (ditulis oleh penulis atau pihak ketiga) atau elemen HTML terkait sumber daya seperti gambar dan video di dokumen AMP Anda.
Untuk menjembatani kesenjangan antara kebutuhan pengguna dan praktik kinerja terbaik, AMP memiliki Komponen spesifik kamu bisa gunakan sebagai pengganti elemen-elemen yang dikecualikan ini.
Komponen AMP adalah tag HTML tertentu. Mereka berperilaku mirip dengan tag HTML biasa: mereka memiliki tag pembuka dan penutup, atribut, dan kebanyakan dari mereka dapat ditata dengan CSS. Mereka dapat dengan mudah dikenali, seperti mereka selalu mulai dengan amp- awalan.
Ada dua jenis Komponen AMP: built-in dan diperpanjang Komponen.
Komponen AMP Terpasang
Built-in dibangun untuk runtime JavaScript AMP, jadi Anda tidak harus memasukkannya secara terpisah.
1. amp-img
menggantikan menandai dalam dokumen HTML AMP. Anda perlu menambahkan src dan alt atribut sama seperti ketika Anda bekerja dengan biasa elemen.
juga memiliki dua atribut lain yang diperlukan: Anda selalu perlu tentukan lebar dan tinggi atribut dalam nilai pixel integer, karena ini memungkinkan runtime AMP hitung tata letak sebelumnya.
Jika Anda menghendaki membuat gambar responsif, Tambahkan tata letak = "responsif" atribut. Itu tata letak atribut mengontrol tata letak dalam dokumen AMP, dan dapat ditambahkan ke Komponen AMP apa pun (pelajari lebih lanjut tentang ini di Sistem Tata Letak AMP).
Anda juga dapat menggunakan srcset atribut pada beri tag ke tentukan gambar yang berbeda untuk viewports dan kerapatan piksel yang berbeda. Ini bekerja dengan cara yang sama seperti dengan gambar non-AMP.
2. amp-video
dapat digunakan untuk menyematkan video HTML secara langsung dalam dokumen HTML AMP. Ini menggantikan dalam file AMP. Itu menandai malas memuat video untuk mengoptimalkan kinerja.
Sumber video harus dilayani melalui protokol HTTPS. Anda harus menambahkan lebar dan tinggi atribut, sama seperti dengan komponen.
Itu tag memiliki banyak atribut opsional, seperti putar otomatis dan poster yang dapat Anda tentukan untuk menyempurnakan bagaimana video HTML5 Anda ditampilkan.
mendukung mp4, webm, ogg, dan semua format lain yang didukung oleh HTML5
Jika mau, Anda juga bisa tambahkan video cadangan untuk pengguna dengan browser yang tidak mendukung video HTML5, menggunakan mundur atribut dan Tag HTML.
Browser Anda tidak mendukung video HTML5.
3. amp-iklan dan emb-amp
memberi Anda kotak pasir iframe di mana kamu bisa tampilkan iklan Anda. Anda harus menayangkan iklan Anda melalui protokol HTTPS.
Anda tidak dapat menjalankan skrip yang disediakan oleh jaringan iklan Anda sendiri. Alih-alih, runtime AMP menjalankan JavaScript dari jaringan yang diberikan di dalam kotak pasir. Kamu hanya perlu menentukan jaringan mana yang Anda gunakan, dan tambahkan data Anda.
Itu komponen mengharuskan Anda untuk tambahkan dimensi iklan menggunakan lebar dan tinggi atribut.
Anda dapat menentukan jaringan iklan yang Anda gunakan dengan mengetik atribut. Lihat daftar jaringan iklan yang didukung.
Setiap jaringan iklan memiliki sendiri data-* atribut yang juga perlu Anda tambahkan. Untuk melihat mana yang Anda butuhkan, klik jaringan iklan Anda di daftar di atas.
adalah alias dari , dokumentasi tidak banyak bicara tentang hal itu selain dapat digunakan sebagai gantinya kapan itu secara semantik lebih akurat. Karena Google berjanji untuk mengembangkan komponen AMP terkait iklan dari waktu ke waktu, ini mungkin berubah di masa mendatang.
4. amp-pixel
Dengan , kamu bisa tambahkan piksel pelacakan ke dokumen HTML AMP Anda untuk hitung tampilan halaman. Hanya memiliki satu atribut, yang diperlukan src atribut, di mana Anda perlu tentukan URL milik piksel pelacakan.
Itu tag memungkinkan penggantian URL standar, yang berarti kamu bisa menghasilkan nilai URL acak untuk melacak setiap tayangan.
Lihat Panduan Pergantian URL AMP jika Anda ingin menggunakan komponen ini. Perhatikan bahwa Anda tidak dapat mendesain komponen.
Komponen AMP yang Diperpanjang
Sebagai komponen AMP yang diperluas bukan bagian dari runtime JavaScript, kamu selalu perlu mengimpornya dalam bagian dari halaman AMP di mana Anda ingin menggunakannya.
Catatan: versi komponen dapat berubah di masa mendatang, jadi jangan lupa untuk melakukannya periksa versi saat ini dalam dokumentasi.
5. amp-audio
menggantikan Tag HTML5, dan memungkinkan untuk langsung menyematkan file audio HTML5 di halaman AMP.
Untuk menggunakannya, Anda harus menentukan src, lebar dan tinggi atribut, dan Anda juga dapat menambahkan tiga atribut opsional: putar otomatis, lingkaran dan diredam.
Ini juga bisa menjadi ide bagus tambahkan file audio cadangan untuk pengguna dengan browser yang tidak mendukung HTML5. Anda dapat melakukan ini dengan menggunakan mundur atribut dan tag, sama seperti dengan yang disebutkan di atas komponen.
Itu Komponen AMP mendukung format audio yang sama dengan Tag HTML5.
Browser Anda tidak mendukung audio HTML5.
Menggunakan , sertakan skrip berikut dalam bagian dari dokumen AMP Anda:
6. amp-iframe
menampilkan iframe dalam dokumen AMP. telah dibuat lebih aman daripada iframe HTML biasa. Karena itu mereka kotak pasir secara default.
Ada beberapa aturan terkait Anda harus mengikuti untuk lulus validasi.
Anda harus menentukan lebar, tinggi, dan bak pasir atribut. Itu bak pasir atribut kosong secara default, tetapi Anda dapat memberikan nilai yang berbeda untuk memodifikasi perilaku iframe, contohnyasandbox = "bolehkan skrip"memungkinkan iframe menjalankan JavaScript. Anda dapat menggunakan atribut iframe standar juga.
Sedangkan dimensinya ditentukan oleh lebar dan tinggi atribut, ada cara untuk mengubah ukurannya saat runtime. Untuk menggunakan komponen, tambahkan skrip berikut ke halaman AMP Anda:
7. amp-akordeon
Akordeon merupakan pola UI yang sering dalam desain seluler, karena menghemat ruang, tetapi tetap menampilkan konten dengan cara yang dapat diakses. memungkinkan untuk cepat tambahkan akordeon ke halaman AMP.
Bagian dari akordeon harus menggunakan Tag HTML5, dan harus menjadi anak langsung dari menandai.
Setiap bagian harus memiliki dua anak langsung:
satu untuk pos
satu untuk konten (konten juga bisa berupa gambar)
Menggunakan diperluas atribut pada setiap bagian yang ingin Anda kembangkan secara default.
Bagian 1
Isi Bagian 1
Seksi 2
Isi Bagian 2
Bagian 3
Gambar untuk Bagian 3
Untuk menggunakan komponen dalam dokumen AMP Anda, sertakan skrip berikut:
8. amp-lightbox
menambahkan lightbox ke berbagai elemen (dalam kebanyakan kasus, gambar) pada Halaman Seluler yang Dipercepat.
Saat pengguna berinteraksi dengan elemen, misalnya mengetuknya, lightbox perluas dan isi seluruh viewport. Kamu butuh tambahkan tombol atau kontrol lain dimana pengguna dapat mengetuk.
Catat itu amp-lightbox hanya dapat digunakan dengan nodisplay tata letak.
Untuk menggunakan komponen, Anda perlu mengimpornya dengan kode berikut:
9. amp-korsel
Korsel sering digunakan dalam desain seluler, jika memungkinkan menampilkan banyak elemen serupa (paling sering gambar) di sepanjang sumbu horizontal. Hasil AMP juga disajikan dalam format carousel di Google Search.
Itu komponen memungkinkan Anda untuk menambahkan komidi putar ke situs Anda. Itu anak langsung dari komponen akan dianggap sebagai item dari korsel. Anda harus menentukan dimensi carousel dengan lebar dan tinggi atribut.
Anda dapat menggunakan opsional mengetik atribut untuk ditentukan cara menampilkan item korsel. Jika mengetik atribut mengambil "korsel" nilai, item akan ditampilkan sebagai strip berkelanjutan (ini adalah default), sedangkan "slide" nilai akan menampilkan item dalam format slide.
Itu Tag juga memiliki atribut opsional lain yang dapat membantu Anda menyempurnakan hasilnya.
Pada contoh di bawah ini, perhatikan bahwa korsel dan semua itemnya gunakan yang sama lebar dan tinggi nilai-nilai.
Itu komponen memerlukan penambahan skrip berikut:
10. amp-analytics
dapat digunakan untuk mengumpulkan data analitik di halaman AMP. Saat ini, mendukung empat jenis peristiwa pelacakan, namun ini bisa berubah di masa depan:
Tampilan halaman
Klik Jangkar
Timer
Bergulir
Menggunakan , kamu butuh tambahkan objek konfigurasi JSON di dalam a
Tambahkan skrip berikut ke bagian dari halaman HTML AMP Anda untuk mengimpor komponen:
Kata-kata terakhir
Dalam posting ini, kami telah melihat semua komponen AMP bawaan, dan beberapa yang diperluas. Karena Halaman Seluler yang Dipercepat masih baru, banyak hal dapat berubah di masa mendatang, jadi ada baiknya untuk mengawasi dokumentasi baik di Github atau di situs AMP resmi.
Karena komponen AMP ini adalah open source, Anda juga dapat berkontribusi untuk pengembangan membuat komponen Anda sendiri. Jika Anda ingin melihat bagaimana halaman AMP lengkap terlihat dengan komponen yang berbeda, Anda dapat memeriksa beberapa contoh ini di Github.
