AMP対応htmlファイルの作り方

以下は公式ほぼそのままなのですが、だいたい必須項目なのでそのまま使えると思います。
「⚡」という雷マークの絵文字がソースに入ります。間違いじゃありません。（⚡の代わりにampでも良い。）
viewportのinitial-scale設定と、<script type="application/ld+json">〜</script>の部分はオプションなのでなくてもOKです。

通常htmlページとAMP対応htmlページを両方作る場合はメタタグの規定の書き方があるので注意。


<!doctype html>

<html ⚡ lang="ja">

  <head>

    <meta charset="utf-8">

    <title>AMP対応htmlのサンプル</title>

    <link rel="canonical" href="http://xxx.xxx.xxx/">

    <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>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

    <script async src="https://cdn.ampproject.org/v0.js"></script>

  </head>

  <body>

    <h1>ここに本文が入ります。</h1>

  </body>

</html>

だいたい普通のhtmlです。あとは、<body>の中にコンテンツを作っていけばAMPページの完成です。

AMPでの画像配置

<amp-img>タグの利用例。AMPページでは、画像の幅・高さは必須です。
「layout="responsive"」を使うと、幅・高さを指定してもレスポンシブに対応するようです。

width、heightの設定は必須
layoutという属性が利用可能。（responsive、nodisplay）
画像が表示できなかった時のプレースホルダも見た目を整えよう。

<amp-img src="img/sample.jpg" alt="サンプルフォト" width="640" height="425" layout="responsive"></amp-img>

下の画像はわざと画像のリンク切れにしていますが、ロードできなかったときのプレースホルダ（空き領域）にも背景色なりCSSでデザインするようにと書かれていたので色をつけてみました。
（AMPデフォルトの読み込み中アニメーションみたいなのが表示されてますね）

<amp-img src="img/welcome.jpg" alt="amp-imgタグによる画像の設置例" width="640" height="240" layout="responsive"></amp-img>

通常版htmlページとAMP対応htmlページを二つ用意する場合

AMPをつかってページを作ってもPCから見ることはもちろんできるが、JavaScriptが使えなかったり（2016年1月時点）、外部CSSが読み込めなかったりするのでデザインが制限されます。
あくまでモバイルで速く！というところに重点を置いている技術なのでPC版とAMP版でページを分けたいことも多いはず。
そういう場合に、モバイルからのアクセスならAMP版、PCからのアクセスは通常版に振り分けるためにメタタグを相互に設定します。
hrefはプロトコルやドメインも正規化するため絶対パスで記述した方がよさそう。

// 通常版htmlページに追加するメタタグ（→AMPページへのamphtmlタグを設定）

<link rel="amphtml" href="http://xxx.xxx.xxx/index.amp.html">



// AMP版htmlページに追加するメタタグ（→通常html版ページへのcanonicalタグを設定）

<link rel="canonical" href="http://xxx.xxx.xxx/">

PCもAMPもひとつのhtmlで大丈夫なレイアウトの場合はcanonicalタグの一般的な記述で設定すればOK。

// AMP html版ページしか作らない場合のメタタグ（http://xxx.xxx.xxx/index.htmlがAMP html版ページ）

<link rel="canonical" href="http://xxx.xxx.xxx/">