Create First AMP HTML page
Posted By :Gagan Thakur |27th October 2018
In my previous article, I have described what is AMP (Accelerated Mobile Pages). Now in this article, we will learn about how to create the first AMP HTML page.
If you're creating AMP pages from scratch, you just need not worry because it is very simple and amazing as well.
The following markup is a decent starting point. Copy this and save it to a file with a .html extension.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, Oodles</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",
"datePublished": "2015-10-07T12: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>
</head>
<body>
<h1>Welcome to the Oodles technologies</h1>
</body>
</html>
AMP HTML documents must have:
| RULE | DESCRIPTION |
|---|---|
| Start with the <!doctype html> doctype. | The standard for HTML. |
| Contain a top-level <html ?> tag (<html amp> is accepted as well). |
Identifies the page as AMP content. |
| Contain <head> and <body> tags. | Optional in HTML but not in AMP. |
| Contain a <meta charset="utf-8"> tag as the first child of their <head> tag. | Identifies the encoding for the page. |
| Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag inside their <head> tag. As a best practice, you should include the script as early as possible in the <head>. | Includes and loads the AMP JS library. |
| Contain a <link rel="canonical" href="$SOME_URL"> tag inside their <head>. | Points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. |
| 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. | Specifies a responsive viewport. |
| Contain the AMP boilerplate in their <head>tag. | CSS boilerplate to initially hide the content until AMP JS is loaded. |
What is AMP Boilerplate?
AMP Boilerplate is a simple CSS style code that is compulsory to add in the head section. AMP HTML documents must contain the following boilerplate in their <head> tag.
Validate
Next, make sure that your AMP page is actually valid AMP. To validate your AMP page follow steps:
Step 1: Open your page in your browser.
Step 2: Add "#development=1" to the URL, for example, http://localhost:8000/oodlesAMP.html#development=1.
When you inspect the JavaScript output in the Developer Console, you will see this log entry:
Powered by AMP ? HTML
Step 3 : Open the browser's DevTools console and check for validation errors.
That is all we need to create our first AMP page, but of course, this is not everything we can do in AMP page. In the next section, we will cover how to add basics custom AMP elements, how to style your page and work out a responsive layout.
Reference :
https://www.ampproject.org/
Ready to innovate ? Let's get in touch
Follow us
We are ISO 9001:2015 Certified
Resources
Connect with us
Follow us
