AMP(Accelerated Mobile Pages)対応のHTML作成方法

AMP対応すれば、ファーストビューがすぐに表示できる、CDN（コンテンツデリバリーネットワーク）が使用されてクラウドにキャッシュされたHTMLや画像をすぐに応答してもらえるというメリットがあります。その代わり、HTMLの作成に制限があり対応に時間がかかったり、既存のJavascript処理はできなくなる事もありますので、どのような制約があるか記載しておきます。

1．基本的にJavascriptは使用できず、AMPページ用のAMP JS ライブラリのみ使用可能。

2．CSSは外部ファイルから読み込みできず、Head内にインラインで記載して、50KB以下の制限あり。

3．HTMLタグの使用に一部制限があり、例えば <img>タグは <amp-img>というカスタムエレメンツを定められた方法で記載。
　　img, video, audio, iframe はカスタムエレメンツ使用。
　　formは amp-form コンポーネントの使用が必要。

4．HTMLを決められたフォーマットにしておく。

5．PC版と別ページにする場合は、canonicalタグとアノテーションタグで、関連付けを設定。

・AMPページの設定

・PC版ページの設定

上記のように様々な制約がありますが、これから作成するページや表示が遅いページで対応が可能であれば、AMP対応HTMLにしておけば、ユーザーのブラウザには高速表示されるとうメリットがあります。
詳細の仕様は下記参照。
AMP HTML スタートガイド

作成したAMP対応HTMLページがAMPに対応できているかは、以下の手順でChromeブラウザで確認できます。

1.Chromeブラウザで AMP ページを開きます。

2.URL に「#development=1」を追加します。以下が例です。
http://localhost:8000/released.amp.html#development=1

3.Chrome DevTools Console を開いて検証エラーを確認します。

また、公開したAMP対応HTMLページについては、以下のページで検証できます。
GoogleAMPテスト検証ページ

以上。