Bagian 12
Sertakan Gambar
Menghubungkan halaman dengan
Dan ini ke halaman AMP
Langkah Kedua
Sertakan Gambar
Kebanyakan tag HTML dapat digunakan secara langsung di AMP HTML, tetapi tag tertentu, seperti
<img>tag, diganti dengan tag AMP HTML setara atau sedikit ditingkatkan (dan beberapa tag bermasalah yang langsung dilarang, lihat Tag HTML dalam spesifikasi ).
Untuk menunjukkan apa markup tambahan bisa terlihat seperti, inilah kode yang diperlukan untuk menanamkan gambar ke halaman:
<amp-img src = "welcome.jpg" alt = "Selamat Datang" height = "400" width = "800" > </ amp-img>
Untuk mempelajari mengapa kami mengganti tag seperti
<img>dengan <amp-img>, dan berapa banyak yang tersedia, kepala ke Sertakan Iframe dan Media .
Langkah Ketiga
Memodifikasi Penyajian Dan Tata Letak
Modifikasi Presentasi
AMP adalah halaman web; setiap styling ke halaman dan unsur-unsurnya dilakukan dengan menggunakan properti CSS umum. Unsur-unsur gaya menggunakan kelas atau elemen pemilih dalam stylesheet inline dalam
<head>, disebut <style amp-custom>:<style amp-kustom >
/ * gaya kustom goes here * /
body {
background-color : white ;
}
amp-img {
background-color : abu-abu ;
border : 1px padat hitam ;
}
</ style>
Setiap halaman AMP hanya dapat memiliki tertanam stylesheet tunggal, dan ada pemilih tertentu Anda tidak diizinkan untuk menggunakan. Pelajari semua tentang styling .
Mengontrol Tata Letak
AMP berikut aturan ketat ketika meletakkan elemen pada halaman. Pada halaman HTML biasa, Anda hampir secara eksklusif menggunakan CSS untuk lay out elemen. Tapi untuk alasan kinerja, AMP mengharuskan semua elemen memiliki ukuran eksplisit mengatur dari get-pergi.
Pelajari semua tentang bagaimana AMP merender dan layout halaman dan bagaimana Anda dapat mengubah tata letak di Bagaimana Mengendalikan Tata Letak .
Langkah Keempat
Preview dan Validasi
Preview halaman AMP seperti yang Anda akan melihat pratinjau situs HTML statis lainnya. Tidak ada langkah membangun atau preprocessing diperlukan. Antara:
- Membuka secara langsung di browser dari sistem file (unsur-unsur tertentu mungkin tidak bekerja karena XMLHttpRequests gagal).
- Gunakan web server lokal seperti Apache 2 atau Nginx . (Tip: Untuk web server cepat, lari
python -m SimpleHTTPServer.)
Selanjutnya, pastikan bahwa halaman AMP Anda sebenarnya AMP valid , atau tidak akan ditemukan dan didistribusikan oleh platform pihak ketiga seperti Google Search. Untuk memvalidasi:
- Buka halaman Anda di browser Anda.
- Tambahkan "
#development=1" ke URL, misalnya,http://localhost:8000/released.amp.html#development=1. - Buka DevTools konsol Chrome dan memeriksa kesalahan validasi.
Selengkapnya tentang validasi , dan apa yang harus dilakukan ketika Anda mendapatkan kesalahan.
Langkah Kelima
Siapkan Page anda untuk Discovery dan Distribusi
Dalam beberapa kasus, Anda mungkin ingin memiliki keduanya non-AMP dan versi AMP dari halaman yang sama, misalnya, sebuah artikel berita. Pertimbangkan ini: Jika Google Search menemukan versi non-AMP halaman itu, bagaimana cara tahu ada versi AMP itu ?
Menghubungkan halaman dengan <link>
Untuk mengatasi masalah ini, kita menambahkan informasi tentang halaman AMP ke halaman dan wakil non-AMP versa, dalam bentuk
<link>tag dalam <head>.
Tambahkan baris berikut ke halaman non-AMP:
<link rel = "amphtml" href = "https://www.example.com/url/to/amp/document.html" >
Dan ini ke halaman AMP
<link rel = "canonical" href = "https://www.example.com/url/to/full/document.html" >
Bagaimana jika saya hanya memiliki satu halaman?
Jika Anda hanya memiliki satu halaman, dan halaman yang merupakan halaman AMP, Anda masih harus menambahkan link kanonik untuk itu, yang kemudian akan hanya menunjuk ke dirinya sendiri:
<link rel = "canonical" href = "https://www.example.com/url/to/amp/document.html" >
Langkah-Langkah Terakhir Sebelum Mempublikasikan
Selamat! Anda telah menguji halaman Anda secara lokal dan memperbaiki semua kesalahan validasi, yang berarti halaman AMP pertama Anda siap dikirimkan.
Kenali cara kerja AMP dan semua sifat elemen dengan mencoba-coba navigasi di sebelah kiri, dan dapatkan informasi umum lainnya mengenai berbagai alat yang bisa membantu mempersiapkan produksi materi Anda dengan mengunjungi Memulai Alur Kerja Pengembangan Anda.
Sumber : ampproject.org
loading...
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
