AMP Basics
Required AMP HTML Structure
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Page Title</title>
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;...}</style>
<noscript><style amp-boilerplate>body{-webkit-animation:none}</style></noscript>
<style amp-custom>
/* Your custom CSS here (max 75KB) */
</style>
</head>
<body>
<!-- AMP content here -->
</body>
</html>
Restricted / Disallowed Elements
These HTML tags are not allowed in AMP pages:
<img><video><audio><iframe><script> (custom)<form method="GET"> (use amp-form)<style> (only amp-custom)<base><link> (except fonts)
Common AMP Components
| Component | Replaces | Example |
|---|---|---|
amp-img | <img> | <amp-img src="img.jpg" width="800" height="600" layout="responsive" alt="..."></amp-img> |
amp-video | <video> | <amp-video src="video.mp4" width="640" height="360" controls layout="responsive"></amp-video> |
amp-audio | <audio> | <amp-audio src="audio.mp3" controls></amp-audio> |
amp-iframe | <iframe> | <amp-iframe src="https://..." width="500" height="300" layout="responsive" sandbox="allow-scripts"></amp-iframe> |
amp-carousel | Carousel/Slider | <amp-carousel type="slides" layout="responsive" width="600" height="400">...</amp-carousel> |
amp-accordion | Accordion | <amp-accordion><section><h2>Title</h2><p>Content</p></section></amp-accordion> |
amp-form | <form> | <form method="post" action-xhr="/submit" target="_top">...</form> |
amp-analytics | Analytics scripts | <amp-analytics type="googleanalytics">...</amp-analytics> |