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