How to Create a Basic AMP HTML Page
Ready to build an AMP file? This tutorial will teach you how to create a basic AMP HTML page, stage it, test it, and get it ready for publication.
Write the basic AMP HTML page
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" />
<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": "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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>Required mark-up
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,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1.
- contain a <script async src=”https://cdn.ampproject.org/v0.js"></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).
Include an image
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" />
<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": "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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</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.
Add some styles
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" />
<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": "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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</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.
Page layout
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 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
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.
Final steps before publishing
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.
PageFrog is an free WordPress plugin designed to help publishers easily publish and manage content for mobile formats such as Facebook Instant Articles and Google AMP HTML. Download PageFrog Now
