Let's take a look at the most basic AMP page possible. It consists of the AMP boilerplate code that will be used in every AMP page you write. You can find this code at /ch1/amp.html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="https://theampbook.com/ch1/amp.html" />
<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;-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>
</head>
<body>Hello World!</body>
</html>
Note when copying the boilerplate code: the <style amp-boilerplate>...</noscript> markup must all be on a single line. If copying from the ebook version of this book, you may run into issues with unwanted line-breaks, so it's recommended to copy the source code from the github repository for this book, or from theampbook.com.
Save this file as amp.html on your web server, and open it up in your browser (any browser will do, even a desktop browser). You should see Hello World! printed to the browser. Well done, you've created your first AMP page!
Nearly every line you see in this example is required in every AMP page you will write. Let's walk through the code and use it to highlight the minimum requirements of all AMP pages:
- AMP pages must start with <!doctype html> followed by <html amp> or <html>
- AMP pages must contain <head> and <body> tags
- The opening <head> tag must be immediately followed by:
<meta charset="utf-8">
- Next it must include the AMP JS library, with:
<script async src="https://cdn.ampproject.org/v0.js"></script>
- It must contain a canonical tag pointing to its associated desktop HTML version, or pointing to itself if there is no associated page:
<link rel="canonical" href="amp.html" >
- It must include a viewport meta tag:
<meta name="viewport" content="width=device-width,minimum-scale=1">
(initial-scale=1 is also recommended)
- AMP pages must include the following style boilerplate within the <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>
Ironically, the AMP lightning bolt symbol is slow to type, since you won't find it on your keyboard. It's the unicode high voltage sign character, code point U+26A1. Using copy-paste is the easiest way to get it into your documents.
is slow to type, since you won't find it on your keyboard. It's the unicode high voltage sign character, code point U+26A1. Using copy-paste is the easiest way to get it into your documents.
