Googleがスマートフォン向け Webサイトの「爆速」表示テクノロジーである「AMP（Accelerated Mobile Pages）」というプロジェクトを発表し、2016年 2月下旬にも Google検索に導入されるとのことです。
ここでは、AMPとは何かの紹介と、WordPressで運営しているサイトの対応方法をご紹介しましょう。
特殊HTMLで Google向けにコンテンツを提供するしくみ
AMPは、Googleがオープンソースで開発を進めるプロジェクトです。以下にオフィシャルサイトがあります（英語）。
冒頭にある短い映像で、利用イメージが掴めますが、例えば検索やソーシャルでのシェア、メッセージのやりとりで、これまでサイトのURLなどを共有した場合、Webブラウザーが起動して HTMLを読み込んで表示していました。そのため、内容を確認でいるまでに数秒時間がかかりました。
AMPでは、このロード時間をなくしてしまおうというコンセプトで、検索結果などから直接コンテンツの内容が例えばプレビューエリアなどに表示されます。
コンテンツは HTMLから取得されるのではなく、AMP用に準備された特殊な言語で構成されます。「特殊な言語」とは言っても、ほとんどHTMLとは変わりませんが、いくつかの制限があります。例えば、スタイルシートが外部からは読み込めない事や、画像をデバイスの幅に最適化するために、これまでの Webサイト制作の手法ではない方法、具体的には特殊な「amp-img」というタグで記述する必要があることなどが上げられます。
詳しくは、ドキュメントを参照すると良いでしょう。
HTMLと AMPの連携
HTMLと AMPは同じコンテンツ内容で、共存させることができます。その場合、head要素の中に AMPのパスを記述します。
<link rel="amphtml" href="https://blog.h2o-space.com/2016/01/806/amp/" />
ちなみに、AMPを Webブラウザーで閲覧すると、次のように表示されます。
逆に、AMP側からは canonicalでリンクを張ります
<link rel="canonical" href="https://blog.h2o-space.com/2016/01/806/" />
こうして、後は Googleなどがクロールしてくれるのを待つばかり。
WordPressのサイトなら『AMP』プラグインで一発対応
WordPressでサイトを構築している場合は、Automatic社謹製のプラグインが提供されています。
これをインストールすれば、AMPの吐き出し（URL+/amp/）とお互いのリンクを張る部分を自動生成してくれます。この投稿もすでに吐き出されているはず。
AMPがどんな風に利用され、普及するのか、これからの展開が楽しみです。
 |
インプレス
発売日 : 2014-11-14
|