1. TOP
  2. ブログ
  3. AMP(Accelerated Mobile Pages)対応のHTML作成方法

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

更新日:2018年7月9日

本サイトでは、スマートフォンなどでも高速にページを表示できるようにできる限りGoogleの推奨している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ページの設定

<link rel="canonical" href="PC版ページのURL">

・PC版ページの設定

<link rel="amphtml" href="対象AMPページURL">


上記のように様々な制約がありますが、これから作成するページや表示が遅いページで対応が可能であれば、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テスト検証ページ

以上。


B!

前の記事:Django Template(テンプレート) HTMLタグをエスケープしないで表示する

次の記事:Django Template(テンプレート) 長い文字列を文字数で途中で省略する

  • カテゴリ:
  • AMP