Halo Sahabat Kang Rizky, berjumpa lagi ya di Blog yang sama ya, dalam kesempatan kali ini mimin akan berbagi Mengenal Projek Terbaru Google ...
Mengenal Projek Terbaru Google Yakni AMP HTML
January 09, 2024
Daftar Isi [Tampil]
Halo Sahabat Kang Rizky, berjumpa lagi ya di Blog yang sama ya, dalam kesempatan kali ini mimin akan berbagi Mengenal Projek Terbaru Google Yakni AMP HTML.
Pernah sahabat kangrizky.com mendengar Accelerated Mobile Page? Sebulan kebelakang ini Platfrom Google meluncuerkan projek terbaru yakni disebut dengan nama AMP HTML. AMP HTML atau Accelerated Mobile Page HTML adalah struktur website yang meminimalisir penggunaan pada JavaScript, CSS dan HTML.
Visi dari AMP HTML adalah agar webmaster tools bisa merancang halaman website yang loading sangat cepat, tanpa banyak pengaruh dibagian JavaScript ataupun lainnya. AMP HTML ini merupakan pengguna Website versi Mobile.
Untuk CSS tidak ada perubahan apapun, untuk HTML ada sedikit struktur berbeda dalam penulisannya, diantaranya seperti #tag #img atau #video menjadi amp-img dan amp-video.Untuk render yang sangat cepat, sahabat harus menggunakan versi AMP Javascript Library yang akan merender page dan menampilkan video, gambar, iframe dan lainnya dengan asynchronous. Hal yang wajib adanya dalam AMP HTML adalah sebagai berikut ini:
- Dimulai dengan
<!doctype html> - Menyertakan
<html ⚡>atau<html amp>. - Menyertakan
<link rel="canonical" href="$SOME_URL" />, pada tag head untuk mengetahui versi AMP HTML. - Menyertakan
<meta charset="utf-8">. - Menyertakan
<meta name="viewport" content="width=device-width,minimum-scale=1">pada tag head. - Menyertakan AMP Javascript Library
<script async src="https://cdn.ampproject.org/v0.js"></script>pada tag head. - Menyertakan
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>pada tag head.
Maka contoh HTMLnya yang dasar dari AMP HTML kurang lebih seperti dibawah ini :
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2024-1-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Selamat datang versi Mobile</h1>
</body>
</html>Beberapa hal yang harus sahabat perhatikan
Dalam membuat sebuah web berbasis versi AMP HTML, selain hal di atas ada beberapa hal yang harus sahabat perhatikan diantaranya sebagai berikut ini :
- Tidak diperbolehkan ada 2 tag
<style>, apabila sahabat ada penambahan maka perlu gunakan<style amp-custom>, itupun hanya boleh 1 saja yang diizinkan ya. - Tidak diperkenankan membuat inline CSS seperti code
<aside class='sidebar' style='margin-top:0;padding:10px'>. - Script harus external dan menggunakannya
async. - Script ini juga tidak diperbolehkan menggunakan attribute
type='text/javascript' - Seperti di atas tadi sahabat, tidak boleh menggunakan tag a
imgtapi wajibamp-img
Itu yang mimin ingat, nanti mimin akan tambahkan apabila ada aturan-aturan lain yang belum tertulis diblog mimin ini.
Sahabat Bisakah Blogspot itu menggunakan AMP HTML?
Jawaban mimin sangat Bisa. Dengan susah payah mimin telah mencoba membuat blogspot berbasis AMP HTML dan akhirnya juga berhasil. Untuk tutorial lebih jauh lagi mengenai penggunaan AMP HTML ini, mimin akan coba jelaskan di blog yang sudah mimin buat dengan basis versi AMP HTML.
Demikian Mengenal Projek Terbaru Google Yakni AMP HTML yang dapat kami sampaikan semoga bermanfaat.
Jika informasi ini bermanfaat, Jangan lupa Share ya teman-teman, Terima Kasih
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.
