Di era digital saat ini, kecepatan dan performa situs web adalah kunci utama untuk memberikan pengalaman terbaik bagi pengguna. Accelerated ...
Di era digital saat ini, kecepatan dan performa situs web adalah kunci utama untuk memberikan pengalaman terbaik bagi pengguna. Accelerated Mobile Pages (AMP) adalah sebuah inisiatif dari Google yang dirancang untuk memuat halaman web dengan cepat di perangkat mobile. Dengan memanfaatkan AMP, pengembang web dapat memastikan bahwa konten mereka ditampilkan dengan optimal, mengurangi waktu muat, dan meningkatkan keterlibatan pengguna.
Artikel ini akan membahas cheat sheet penting untuk AMP HTML, yang dapat membantu Anda memahami dan mengimplementasikan teknologi ini dengan lebih efisien. Kami akan merangkum berbagai elemen, atribut, dan praktik terbaik yang perlu Anda ketahui agar dapat memaksimalkan penggunaan AMP dalam proyek web Anda.
Mari kita mulai dengan memahami dasar-dasar AMP HTML dan bagaimana ini dapat memberikan manfaat luar biasa bagi situs web Anda.
Hello World
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello World!</title>
<link rel="canonical" href="https://htmlcheatsheet.com">
<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": "Hello World",
"datePublished": "2018-08-08T12:02:41Z",
"image": [
"logo.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>
<style amp-custom>
p{
margin: 1em;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Images
Basic syntax
<amp-img src="/m/cheatsheet.jpg" alt="Cheat Sheet" height="200" width="300"></amp-img>
Responsiveness
<amp-img
src="/narrow.jpg"
srcset="/wide.jpg 640w,
/narrow.jpg 320w"
width="1200"
height="800"
layout="responsive"
alt="demo image">
</amp-img>
Layout types
nodisplay – works like display: none style.
fixed – fixed width & height
responsive – fills container automatically to aspect ratio
fixed-height – keeps the specified height unchanged
fill – fills available height & width
container – lets its children define its size, like a normal div
flex-item – works like display:flex style
intrinsic – responsive until it reaches its height and width
CSS media queries
@media screen and (max-width: 720px){
p{font-size: 0.9em;}
}
Element media queries:
<amp-img
media="(min-width: 720px)"
src="demo.jpg"
width=300
height=200
layout="responsive">
</amp-img>
Placeholder
Shows a placeholder while the element is being loaded:<amp-anim src="animation.gif"
layout="responsive"
width="300"
height="200">
<amp-img placeholder
src="demo.jpg"
layout="fill">
</amp-img>
</amp-anim>
Fallback
When an element is not supported:<amp-img alt="Demo"
width="300"
height="200"
layout="responsive"
src="videofile.webp">
<amp-img alt="Demo"
fallback
width="300"
height="200"
layout="responsive"
src="image.jpg"></amp-img>
</amp-img>
Hide loading indicator
noloadingGoogle Analytics
Include
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Replace UA-XXXXXXXX-1 with your code
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars":{
"account": "UA-XXXXXXXX-1"
},
"triggers":{
"trackPageview":{
"on": "visible",
"request": "pageview"
}
}
}
AdSense
Include
<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
After the opening body tag, add your ID.
<amp-auto-ads type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"></amp-auto-ads>
Sidebar ☰
Include
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
Custom CSS:
.sidebar{padding: 10px;margin: 0;color: #FFF;font-weight:bold;}
#sidebar1{background: #CE5937;}
.sidebar > li{list-style: none;margin-bottom:10px;}
.sidebar a{text-decoration: none;color: #FFF;}
.close-sidebar{font-size: 1.5em;padding: 5px 15px;cursor: pointer;color: #FFFFFF;}
.headerbar{background: #CE5937;color: #FFF;line-height: 30px;position: fixed;top: 0;left: 0;right: 0;height: 40px;z-index: 1000;}
.headerbar a{text-decoration: none;color: #FFF;}
amp-sidebar
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<a href="/" class="site-name">MySite</a>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li><a href="https://htmlg.com/">Editor</a></li>
<li><a href="https://html5-templates.com/">Templates</a></li>
<li><a href="https://htmlcheatsheet.com/">Cheat Sheet</a></li>
</ul>
</amp-sidebar>
Tidak ada komentar