How to Create a Basic AMP Page

When creating AMP (Accelerated Mobile Pages) pages and content, you should use the HTTPS protocol. AMP is optimized for mobile web browsing and intended to help webpages load faster.

images/articles/amp/amp-page.jpg

Step 1: Document Type

Start the code with the doctype. This is standard for any HTML page.

<!doctype html>

Step 2: HTML Tag

Replace top level <html> tag with <html amp> tag. This identifies that the page is AMP content.

<html amp>

Step 3: Head and Body Tags

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.

<meta charset="utf-8">

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.

<link rel="canonical" href="/$SOME_URL">

Step 7: Responsive Viewport

Add a meta tag inside the <head> tag for responsive viewport. It is also recommended to include initial-scale=1.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

It specifies a responsive viewport.

Step 8: Boilerplate Code

Add the AMP boilerplate code in the <head> tag.

<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>

Step 9: Images

For images in the document, replace the <img> with <amp-img> tag.

<amp-img src="/welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Step 10: Styles

Any styling to the AMP page and its elements is done using common CSS properties. For example,

<style amp-custom>
 /* any custom style goes here */
 body {
 background-color: white;
 }
 amp-img {
 background-color: gray;
 border: 1px solid black;
 }
</style>

Step 11: Link AMP and Non-AMP

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">

Final Steps

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.

AMP Validator

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.

  1. amp-ad
  2. amp-youtube
  3. amp-twitter
  4. amp-fit-text
  5. amp-carousel
  6. amp-analytics
  7. amp-sidebar
  8. amp-form
  9. amp-accordion
  10. amp-instagram