Making Your Site AMP Compliant

Testing

Tool: amp-validator

The AMP Validator is a command line tool. You can feed it a URL or a local file path and it will spit out all the things you need to change to make your site AMP compliant.

npm install -g amp-validator  
amp-validator ~/path/to/project  

Html

Documentation: amp getting started

The top of your html document should look like this.

<!doctype html>  
<html ⚡>  
<head>  
  <!-- https://www.ampproject.org/docs/get_started/create/basic_markup.html -->
  <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",
      "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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  ...
</head>  

Images

Documentation: amp-img

All images in your site must be referenced with use of the <amp-img> element. Height and width are now required attributes.

The layout attribute isn't required but is important to understand if you want your images to behave correctly. The potential values of layout are FILL, FIXED, FIXED_HEIGHT, FLEX_ITEM, NODISPLAY, RESPONSIVE

<amp-img  
  src="img/appstore.png"
  width="200"
  height="60"
  layout="responsive"
  alt="Download from the App Store"
></amp-img>

Styles

Documentation: amp css

You can't reference any external stylesheets except fonts when using AMP. Instead implement a build process that will inject your sass/css into the head of your html documents.

All styles must be defined in the <head> of the page, within a <style amp-custom> tag. [Link is] disallowed with the exception of custom fonts.

<!-- Okay -->  
<style amp-custom>  
  /* All custom styles go here */
</style>

<!-- Not Okay -->  
<link href='css/custom.css' rel='stylesheet' type='text/css'>

<!-- Okay -->  
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>  

Scripts

Documentation... just trust me

You can't use <script> tags with AMP. But fear not keep reading to learn about the custom AMP components you can use to achieve some of the same functionality.

Google Analytics

Documentation: amp-analytics

Just replace "UA-XXXXXXXX-XX" with your Analytics identifier.

<head>  
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  ...
</head>  
<body>  
  ...
  <amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXXXXX-XX"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      }
    }
  }
  </script>
  </amp-analytics>

</body>  

Extended Components

Documentation: amp extended components

AMP has other custom components you can use. Here is a list:

amp-access  
amp-accordion  
amp-analytics  
amp-anim  
amp-audio  
amp-brid-player  
amp-brightcove  
amp-carousel  
amp-dailymotion  
amp-dynamic-css-classes  
amp-facebook  
amp-fit-text  
amp-font  
amp-fx-flying-carpet  
amp-iframe  
amp-image-lightbox  
amp-instagram  
amp-install-serviceworker  
amp-jwplayer  
amp-kaltura-player  
amp-lightbox  
amp-list  
amp-mustache  
amp-pinterest  
amp-reach-player  
amp-sidebar  
amp-social-share  
amp-soundcloud  
amp-springboard-player  
amp-twitter  
amp-user-notification  
amp-vimeo  
amp-vine  
amp-youtube  

Resources