Sebelum kita mulai , harus kita ketahui dulu apa itu AMP ? AMP atau
1. Markup berikut ini adalah titik awal pengkodean atau boilerplate, Salin ini dan simpan ke sebuah file dengan ekstensi .html contoh indeks.html
2. Isikan didalam tags body, sejauh ini, cukup sederhana. Tapi ada banyak kode tambahan di tiags head halaman yang mungkin rumit. Mari kita mendekonstruksi mark-up.
Kebanyakan tag HTML yang dapat digunakan secara langsung di AMP HTML, tetapi tag tertentu, seperti <img> tag, diganti dengan kustom tag AMP HTML
Untuk menunjukkan markup tambahan bisa terlihat dibawah ini, inilah kode yang diperlukan untuk mmenyertakan gambar ke halaman:
<amp-img src = "selamatdatang.jpg" alt = "Selamat Datang" height = "400" width = "800"> </ amp-img>
4. Memodifikasi Penyajian dan Tata Letak
Memodifikasi presentasi
AMP adalah mark-up halaman web , setiap styling ke halaman dan unsur-unsurnya dilakukan dengan menggunakan properti CSS umum. unsur-unsur gaya menggunakan class atau element dalam stylesheet inline di <head> yang disebut <style amp-custom> :
Mengontrol tata letak
Sebuah rules ketika meletakkan elemen pada halaman.
Pada halaman HTML biasa, Anda hampir secara eksklusif menggunakan CSS untuk lay-out element .
Tapi untuk alasan kinerja, AMP mengharuskan semua elemen memiliki ukuran eksplisit yang teratur tidak berantakan.
5. Tampilan dan Validasi Pada halaman berbasis AMP , anda akan melihat pratinjau situs HTML statis .
Tidak ada building atau preprocessing yang diperlukan.
Antara lain :
-Membuka secara langsung di browser anda
(unsur-unsur kode tertentu mungkin tidak bekerja karena XMLHttpRequests Error )
-Menggunakan server web lokal seperti Apache 2 atau Nginx.
(Tips: Untuk web dengan server cepat, jalankan python -m SimpleHTTPServer )
Selanjutnya, pastikan bahwa halaman AMP Anda adalah AMP yang valid, atau tidak akan ditemukan dan didistribusikan oleh platform pihak ketiga seperti Google Search.
Cara Untuk Memvalidasi:
- Buka halaman Anda di browser Anda.
- Tambahkan "#development=1" ke url hamalan anda , misalnya, http://localhost:8000/released.amp.html"#development=1"
- Buka Chrome DevTools Console dan periksa kesalahan validasi.
6. Siapkan halaman Anda untuk Penjelajahan dan Publikasi
Dalam beberapa hal, Anda mungkin ingin memiliki halaman dengan Non-AMP dan versi AMP dari halaman yang sama, misalnya, sebuah artikel tentang berita.
Pertimbangkan hal ini sebelumnya Jika saja Google Search menemukan versi non-AMP dari halaman itu, bagaimana caranya mengetahui ada versi AMP itu ?
Cara 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 di <head>.
Tambahkan baris berikut ke halaman non-AMP:
Dan ini ke halaman AMP
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 halaman tersebut :
Accelerated Mobile Pages
Dan dalam bahasa indonesia Akselerasi Halaman Pada Perangkat Ponsel , AMP adalah mark-up HTML dengan beberapa pembatasan pada halaman untuk kinerja yang lebih handal dan beberapa ekstensi untuk membangun konten yang kaya akan HTML dasar , AMP JS memungkinkan dan menjamin render cepat pada halaman berbasis AMP HTML .
Jika anda ingin tahu lebih banyak bisa melihat di situs resmi AMP Project di atas ,1. Markup berikut ini adalah titik awal pengkodean atau boilerplate, Salin ini dan simpan ke sebuah file dengan ekstensi .html contoh indeks.html
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hanya Contoh AMP </title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Ini adalah sebuah contoh dari halaman yang menggunakan AMP",
"datePublished": "2016-04-",
"image": [
"logo-halaman.jpg"
]
}
</script>
<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>
</head>
<body>
<h1>Selamat datang di ThryBuss</h1>
</body></html>
2. Isikan didalam tags body, sejauh ini, cukup sederhana. Tapi ada banyak kode tambahan di tiags head halaman yang mungkin rumit. Mari kita mendekonstruksi mark-up.
Dokumen HTML AMP haruslah :
DiMulai dengan DOCTYPE <! DOCTYPE html>.
Mengandung top-level <html> tag dan ( ataupun <html amp> ).
Mengandung tags <head> dan <body> .
Mengandung <link rel = "canonical" href = "$ url_situs" /> tag di dalam head yang menunjuk ke versi HTML biasa dari dokumen AMP HTML .
Mengandung <charset = "-8 utf" meta> tag pertama dari tag head.
Mengandung tags <meta name = "viewport" content = "width = device-width, minimum-scale= 1"> di dalam tag head, Ini juga dianjurkan untuk menyertakan initial-scale=1.
Mengandung tags <script async src = "https://cdn.ampproject.org/v0.js"> </ script> sebagai elemen terakhir di head .
Berisi tag sebagai berikut di <head> :
<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>
3. Menyertakan Gambar
Kebanyakan tag HTML yang dapat digunakan secara langsung di AMP HTML, tetapi tag tertentu, seperti <img> tag, diganti dengan kustom tag AMP HTML
Untuk menunjukkan markup tambahan bisa terlihat dibawah ini, inilah kode yang diperlukan untuk mmenyertakan gambar ke halaman:
<amp-img src = "selamatdatang.jpg" alt = "Selamat Datang" height = "400" width = "800"> </ amp-img>
4. Memodifikasi Penyajian dan Tata Letak
Memodifikasi presentasi
AMP adalah mark-up halaman web , setiap styling ke halaman dan unsur-unsurnya dilakukan dengan menggunakan properti CSS umum. unsur-unsur gaya menggunakan class atau element dalam stylesheet inline di <head> yang disebut <style amp-custom> :
<style amp-custom>
/* tulis css anda disini*/
body {
background-color: white;
}
amp-img {
background-color: gray;
border: 1px solid black;
}
</style>
Mengontrol tata letak
Sebuah rules ketika meletakkan elemen pada halaman.
Pada halaman HTML biasa, Anda hampir secara eksklusif menggunakan CSS untuk lay-out element .
Tapi untuk alasan kinerja, AMP mengharuskan semua elemen memiliki ukuran eksplisit yang teratur tidak berantakan.
5. Tampilan dan Validasi Pada halaman berbasis AMP , anda akan melihat pratinjau situs HTML statis .
Tidak ada building atau preprocessing yang diperlukan.
Antara lain :
-Membuka secara langsung di browser anda
(unsur-unsur kode tertentu mungkin tidak bekerja karena XMLHttpRequests Error )
-Menggunakan server web lokal seperti Apache 2 atau Nginx.
(Tips: Untuk web dengan server cepat, jalankan python -m SimpleHTTPServer )
Selanjutnya, pastikan bahwa halaman AMP Anda adalah AMP yang valid, atau tidak akan ditemukan dan didistribusikan oleh platform pihak ketiga seperti Google Search.
Cara Untuk Memvalidasi:
- Buka halaman Anda di browser Anda.
- Tambahkan "#development=1" ke url hamalan anda , misalnya, http://localhost:8000/released.amp.html"#development=1"
- Buka Chrome DevTools Console dan periksa kesalahan validasi.
6. Siapkan halaman Anda untuk Penjelajahan dan Publikasi
Dalam beberapa hal, Anda mungkin ingin memiliki halaman dengan Non-AMP dan versi AMP dari halaman yang sama, misalnya, sebuah artikel tentang berita.
Pertimbangkan hal ini sebelumnya Jika saja Google Search menemukan versi non-AMP dari halaman itu, bagaimana caranya mengetahui ada versi AMP itu ?
Cara 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 di <head>.
Tambahkan baris berikut ke halaman non-AMP:
<link rel ="amphtml" href = "https://www.contoh.co/url/ke/amp/dokumen.html"/>
Dan ini ke halaman AMP
<link rel = "canonical" href = "https://www.contoh.co/url/ke/penuh/dokumen.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 halaman tersebut :
<link rel = "canonical" href = "https://www.example.com/url/to/amp/document.html"/>
Semoga artikel ini bermanfaat bagi anda yang ingin mempercepat loading web pages anda pada perangkat ponsel .
Belum ada tanggapan untuk "Cara Membuat Halaman AMP HTML"
Post a Comment