WhatsApp

When creating AMP pages and content, you should use the HTTPS protocol.

Step 1

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

<!doctype html>

Step 2: HTML Tag

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

Step 3

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.

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.

Step 8

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,

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

Step 11

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

Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive