Learn how to create a basic AMP HTML page, stage it, test it, and get it ready for publication.
The basic AMP HTML page includes the following mark-up:
<!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" />
<script src="https://cdn.ampproject.org/v0.js" async></script>
<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 everywhere",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>AMP HTML documents MUST
- start with the doctype
<!doctype html>. - contain a top-level
<html ⚡>tag (<html amp>is accepted as well). - contain
<head>and<body>tags (They are optional in HTML). - contain a
<link rel="canonical" href="$SOME_URL" />tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. - contain a
<meta charset="utf-8">tag as the first child of their head tag. - contain a
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">tag inside their head tag. - contain a
<script src="https://cdn.ampproject.org/v0.js" async></script>tag as the last element in their head. - contain
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>in their head tag.
Most HTML tags can be used unchanged in AMP HTML. Certain tags have equivalent custom AMP HTML tags; other HTML tags are outright banned (see HTML Tags in the specification).
Content pages include more features than just the content. To get you started, here's the basic AMP HTML page now with an image:
<!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" />
<script src="https://cdn.ampproject.org/v0.js" async></script>
<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 everywhere",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img>
</body>
</html>Learn more about how to include common features.
AMPs are web pages; add custom styling using common CSS properties.
Style elements inside <style amp-custom>
using class or element selectors in an author-defined,
inlined stylesheet:
<!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" />
<script src="https://cdn.ampproject.org/v0.js" async></script>
<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 everywhere",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
<style amp-custom>
<!-- any custom style goes here; and remember, body margin can not be declared -->
body {
background-color: white;
}
amp-img {
background-color: gray;
}
</style>
</head>
<body>
<h1>Welcome to the mobile web</h1>
<amp-img src="welcome.jpg" alt="Welcome" height="2000" width="800"></amp-img>
</body>
</html>Learn more about adding elements, including extended components, in How to Include Common Features.
Externally-loaded resources (like images, ads, videos, etc.) must have height and width attributes. This ensures that sizes of all elements can be calculated by the browser via CSS automatically and element sizes won't be recalculated because of external resources, preventing the page from jumping and around as resources load.
Moreover, use of the style attribute for tags is not permitted, as this optimizes impact rendering speed in unpredictable ways.
Learn more in the AMP HTML Components specification.
Test the page by viewing the page in your local server and validating the page using the Chrome DevTools console.
- Include your page in your local directory, for example,
/ampproject/amphtml/examples. - Get your web server up and running locally.
For a quick web server, run
python -m SimpleHTTPServer. - Open your page, for example, go to http://localhost:8000/released.amp.html.
- Add "#development=1" to the URL, for example, http://localhost:8000/released.amp.html#development=1.
- Open the Chrome DevTools console and check for validation errors.
Congrats! You've tested your page locally and fixed all validation errors.
Learn more about tools that can help you get your content production ready in Set Up Your Build Tools.