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, advertiser or email sender, AMP makes it easy to create gr...
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対応しておくのも有効な手段だと思います。
