AMP(Accelerated Mobile Pages)とはモバイル端末でウェブページを高速表示するための手法

AMP(Accelerated Mobile Pages)とはモバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。
GoogleとTwitterで共同開発されています。

参考 AMPとはAccelerated Mobile Pages Project AMP

AMPページを構成する重要な3つの要素

AMPページには次にあげる3つの要素があります。

AMP HTML

AMP HTMLは、安定したパフォーマンスを実現するための制限が設定されたHTMLです。

AMP JS

AMP JSライブラリは、AMP HTMLページの高速なレンダリングを確実に行えるようにするものです。

AMP Cache

Google AMP Cache は、キャッシュされた AMP HTML ページの配信に利用できます。

AMP HTML

AMP HTMLページ内の大半のタグは通常のHTMLタグが利用できますが、一部のHTMLタグはAMP固有のタグに置き換えられます。

各タグの仕様

タグ AMP HTMLでのステータス
script タイプがapplication/ld+jsonない場合は禁止されapplication/ld+json 。
例外は、AMPランタイムおよびスクリプトタグをロードして拡張コンポーネントをロードするための必須のスクリプトタグです
例外以外の他の値も必要に応じて追加できます。
noscript 許可されました。
ドキュメント内のどこでも使用できます。
指定すると、JavaScriptがユーザーによって無効になっている場合、 <noscript>要素内のコンテンツが表示されます。
base 禁止されています。
img amp-img置き換えられました。
注: <img>はHTML5によるVoid Elementなので、終了タグはありません。
ただし、<amp-img>は終了タグ</amp-img>ます。
video amp-video置き換えられました。
audio amp-audio置き換えられました。
iframe amp-iframe置き換えられました。
frame 禁止されています。
frameset 禁止されています。
object 禁止されています。
parameter 禁止されています。
applet 禁止されています。
embed 禁止されています。
form 許可されました。
<amp-form>の拡張が必要です。
input ほとんどの場合、<input[type=file]> 、<input[type=button]> 、<input[type=password]> 、<input[type=file]>などの一部の入力タイプを除いては 、関連タグも使用できます
<fieldset> 、 <label>
button 許可されました。
style amp-boilerplateに必要なスタイルタグ 。
カスタムスタイリングの目的で、ヘッドタグにもう1つのスタイルタグが追加されています。
このスタイルタグには、属性amp-customが必要です。
link microformats.orgに登録されているrel値は許可されています 。
ホワイトリストに関連価値がない場合は、問題を提出してください 。
ブラウザに副作用があるprerender preconnect 、 prerender 、 prefetchなどのstylesheetやその他の値は許可されません。
ホワイトリストのフォントプロバイダからスタイルシートを取得する特別なケースがあります。
meta http-equiv属性は、特定の許容値に使用できます。
詳細については、AMPバリデータの仕様を参照してください。
a href属性の値は、javascript:始めることはできません。
設定されている場合、target属性値は_blankなければなりません。
svg ほとんどのSVG要素は許可されています。

必須マークアップ

AMPでは以下のタグが各ドキュメントに必須となります。

  • <!doctype html> という文書型宣言で開始する。
  • 最上位階層のタグを <html ⚡>(<html amp> でも可)にする。
  • <head> タグと <body> タグ(HTML ではどちらも任意)を含める。
  • ヘッド部に <link rel=”canonical” href=”$HOME_URL”> タグを入れて、AMP HTML 版の通常の HTML バージョンを指定する。該当する HTML が存在しない場合は自身を指定する。
  • head タグの最初の子要素を <meta charset=”utf-8″> タグにする。
  • head タグ内に <meta name=”viewport” content=”width=device-width,minimum-scale=1″> タグを含める。initial-scale=1 も入れることをお勧めします。
  • head タグの最後の要素を <script async src=”https://cdn.ampproject.org/v0.js”></script> タグにする(これによって AMP JS ライブラリがインクルードされ、読み込まれます)。
  • 次の内容を <head> タグの中に含める。
    <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>

AMP Cache

AMP Cacheは有効な AMP ドキュメントを配信する、プロキシベースのコンテンツ配信ネットワーク(CDN)です。
AMPに対応したページはAMP Cacheにキャッシュされ配信されることで表示スピードのアップをはかります。

まとめ

AMP対応は面倒のように見えますがWordPressでサイトを構築しているのであれば、利用するテーマによってはチェックを付けるだけでAMPに対応したページを自動で出力してくれるテーマもあります。
そのようなテーマを選んで簡単にAMP対応しておくのも有効な手段だと思います。