When creating AMP pages and content, you should use the HTTPS protocol.
Start the code with the doctype. This is standard for any HTML.
Step 2: HTML Tag
Replace top level <html> tag with <html amp> tag. This identifies that the page is AMP content.
The <head> and <body> tags are optional in HTML, but not in AMP.
Step 4: Page Encoding
Add <meta charset="utf-8"> tag as the first child of the <head> tag. This identifies the encoding for the page.
Step 5: AMP JS Library
Include and load the AMP JS library. Add the following code inside the <head> tag.
<script async src="https://cdn.ampproject.org/v0.js"></script>
As a best practice, you should include the script as early as possible.
Step 6: Canonical URL
Add a <link rel="canonical" href="/$SOME_URL"> tag inside the <head>. This points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
Step 7: Responsive
Add a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside the <head> tag. It is also recommended to include initial-scale=1.
Specifies a responsive viewport.
Add the AMP boilerplate code in the <head> tag.
Step 9: Images
For images in the document, replace the <img> with <amp-img> tag.
Step 10: Styles
Any styling to the AMP page and its elements is done using common CSS properties. For example,
/* any custom style goes here */
border: 1px solid black;
Add information about the AMP page to the non-AMP page and vice-versa, in the form of <link> tags in the <head>.
Add the following to the non-AMP page:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
And the following to the AMP page (already done in step 6):
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
Preview the AMP page just as you would preview any other HTML site. Next, validate the page to make sure that your AMP page is actually valid AMP.
Extended AMP Components
These are extensions to the base library that must be explicitly included in the document as custom elements. Custom elements require specific scripts that are added to the <head> section.