Getting started Amp

on

Getting started


This is a quick start guide to get you up and running with AMP.
For more detailed instructions, visit the Create your first AMP page tutorial.

Step 1: Get the AMP HTML template

This is the basic HTML you need for an AMP page:
<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello AMP world</title>
    <link rel="canonical" href="hello-world.html">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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>
  </head>
  <body>
    <h1>Hello AMP World!</h1>
  </body>
</html>

Step 2: Add components to your page

Build up your AMP page by adding components, like an image:
<amp-img src="https://www.ampproject.org/examples/images/amp.jpg"
  width="900" height="508" layout="responsive"></amp-img>
Or a YouTube video:
<!-- this script is required for amp-youtube and must be in the <head> section  -->
<script async custom-element="amp-youtube"
      src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

...

<amp-youtube data-videoid="9Cfxm7cikMY"
    layout="responsive"
    width="480" height="270"></amp-youtube>
And much more. See the list of available components in AMP.

Step 3: Style your elements

To style elements on your AMP page, add CSS to an inline stylesheet named <style amp-custom> in the <head> of your document:
<style amp-custom>
  amp-img {
    margin: 0.5em;
  }
  body {
    max-width: 900px;
  }
</style>

Step 4: Validate your AMP HTML

Make sure your AMP pages are valid AMP HTML by verifying the pages with the AMP Validator.
For other validation tools that you can use, see Validate AMP pages.

Next Steps

To dive further into the basics of an AMP page, visit the Create your first AMP page tutorial.
Here are other resources to help your experience:

Comments

Post a Comment