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>
Facebook comments
Include
<script async custom-element="amp-facebook-comments" src="https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js"></script>
Code
<amp-facebook-comments width="300"
height="350"
layout="responsive"
data-numposts="5"
data-colorscheme="dark"
data-locale="es_ES"
data-order-by="time"
data-href="https://htmlcheatsheet.com/">
</amp-facebook-comments>
Social share buttons
Include
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Code
<amp-social-share type="facebook" width="30" height="30"
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com">
</amp-social-share>
<amp-social-share type="twitter" width="30" height="30"
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com">
</amp-social-share>
<amp-social-share type="gplus" width="30" height="30"
data-param-text="HTML Cheat Sheet"
data-param-url="https://htmlcheatsheet.com">
</amp-social-share>
Carousel
Include
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
Code
<amp-carousel width="300"
height="200"
layout="responsive"
type="slides">
<amp-img src="/img1.jpg"
width="300"
height="200"
layout="responsive"
alt="a demo image"></amp-img>
<amp-img src="/img2.jpg"
width="300"
height="200"
layout="responsive"
alt="another cool image"></amp-img>
<amp-img src="/img3.jpg"
width="300"
height="200"
layout="responsive"
alt="and the last one"></amp-img>
</amp-carousel>
Important ‼
Define AMP page location on Desktop site
<link rel="amphtml" href="https://htmlcheatsheet.com/m/">
Link back to Desktop from AMP
<link rel="canonical" href="https://htmlcheatsheet.com/">
Image tag
<amp-img src="/m/cheatsheet.jpg" alt="Cheat Sheet" layout="responsive" height="200" width="300"></amp-img>
Keep in mind!
Don't use !important CSS
https:// highly recommended
No custom .JS files
Only 50Kb inline style allowed in <style amp-custom> </style>
Common attributes
fallback, heights, layout, media, noloading, on, placeholder, sizes, width and height
Video
Include
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Example
<amp-video controls
width="600"
height="400"
layout="responsive"
poster="geekprank.png">
<source src="geekprank.webm"
type="video/webm" />
<source src="geekprank.mp4"
type="video/mp4" />
<div fallback>
<p>Video element not supported.</p>
</div>
</amp-video>
Attributes
src, poster, autoplay, controls, controlsList, loop, crossorigin, disableremoteplayback, noaudio, rotate-to-fullscreen
artwork, artist, album, title
Youtube Video
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<amp-youtube
data-videoid="VeeFwwAz7no"
layout="responsive"
width="480" height="270"></amp-youtube>
Actions, events
Syntax
eventName:targetId[.methodName[(arg1=value, arg2=value)]]
Example
on="submit-success:lightbox1;submit-error:lightbox2"
<div id="cookie-consent">The site is using Cookies!</div>
<button on="tap:cookie-consent.hide">OK, I understand!</button>
Events
show, hide – shows/hides the target element
toggleVisibility, toggleClass
scrollTo(duration=INTEGER, position=STRING) –
focus – make the target element gain focus
open – opens the amp-image-lightbox with the source image being the one that triggered the action
close – closes the lightbox
change – on input & select
input-debounced – 300ms passed since an input value change
input-throttled – change event fired maximum once every 100ms
tap – click or tap
slideChange – amp-carousel[type="slides"]
toggleAutoplay – amp-carousel[type="slides"]
goToSlide(index=INTEGER) – advance the carousel to the index
lightboxOpen – amp-lightbox fully visible
lightboxClose – amp-lightbox fully closed
sidebarOpen – amp-sidebar fully open
sidebarClose – amp-sidebar fully closed
play, pause, mute, unmute, fullscreen – video controls
firstPlay – first user interaction with video
timeUpdate – video playing position changed
submit – form is submitted
clear – clears values in the inputs
submit-error – form submission response is an error
play, pause – controls amp-audio
refresh – refreshes data from the src and re-renders the amp-list
selectUp(delta=INTEGER), selectDown(delta) – moves the amp-selector up/down by a value
open, close, toggle – amp-sidebar controls
navigateTo(url)
goBack – go back in history
print – Opens the Print Dialog
amp-bind
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
Button changes 'World' to 'John':
<p [text]="'Hello ' + str">Hello World</p>
<button on="tap:AMP.setState({str: 'John'})">
amp-state
Initialize state:
<amp-state id="thisState">
<script type="application/json">
{
"foo": "bar"
}
</script>
</amp-state>
thisState.foo=="bar"
Update state with AMP.setState()
<button on="tap:AMP.setState({foo: 'bar', baz: myAmpState.someVariable})"></button>
<input type="range" on="change:AMP.setState({myRangeValue: event.value})">
AMP.pushState
<button on="tap:AMP.pushState({foo: '123'})">Set 'foo' to 123</button>
Facebook like
Include
<script async custom-element="amp-facebook-like" src="https://cdn.ampproject.org/v0/amp-facebook-like-0.1.js"></script>
Code
<amp-facebook-like width=90 height=20
layout="fixed"
data-layout="button_count"
data-href="https://www.facebook.com/htmlcoding/">
</amp-facebook-like>
iFrame
Include
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Use it for Google Maps or anything else
<amp-iframe width="400"
title="Collection of HTML codes"
height="300"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen
frameborder="0"
src="https://htmlcheatsheet.com/">
<amp-img layout="fill"
src="/placeholder.jpg"
placeholder></amp-img>
</amp-iframe>
Accordion menu
Include
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
Example
<amp-accordion>
<section expanded>
<h4>Title 1</h4>
<p>Add any text.</p>
</section>
<section>
<h4>Title 2</h4>
<div>Add any <strong>HTML</strong> content.</div>
</section>
<section>
<h4>Title 3</h4>
<figure>
<amp-img src="/demo.jpg"
width="400"
height="200"
layout="responsive"
alt="description"></amp-img>
<figcaption>This is an image</figcaption>
</figure>
</section>
</amp-accordion>