AMP(Accelerated Mobile Pages)とはモバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。
GoogleとTwitterで共同開発されています。
詳細は以下のサイトを参照してください。
AMP - a web component framework to easily create user-first web experiences
Whether you are a publisher, e-commerce company, storyteller...
amp.dev
AMPページを構成する重要な３つの要素
AMPページには次にあげる３つの要素があります。
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対応しておくのも有効な手段だと思います。
