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を表示した例

逆に、AMP側からは canonicalでリンクを張ります

<link rel="canonical" href="https://blog.h2o-space.com/2016/01/806/" />

こうして、後は Googleなどがクロールしてくれるのを待つばかり。

WordPressのサイトなら『AMP』プラグインで一発対応

WordPressでサイトを構築している場合は、Automatic社謹製のプラグインが提供されています。

これをインストールすれば、AMPの吐き出し(URL+/amp/)とお互いのリンクを張る部分を自動生成してくれます。この投稿もすでに吐き出されているはず。

AMPがどんな風に利用され、普及するのか、これからの展開が楽しみです。

Comments

comments

%d人のブロガーが「いいね」をつけました。