Googleは7月、AMP for Adwプログラムを発表。AMP形式の記事に最適化された広告がいよいよ導入されます。メディアやコンテンツ提供者ならば避けて通れなくなってきたAMPについて、今回はあらためてご紹介します。
AMPとは
AMP（アンプ）は「Accelerated Mobile Pages」の略で、モバイル表示高速化のプロジェクトのことを指します。
GoogleやTwitterなどが共同で開発を進めてきたもので、2016年Google検索に実装されました。
これを実現するフレームワーク自体をAMPと呼ぶこともあります。この仕様に沿って作成されたWebサイトでは、モバイル上で非常に素早く記事が表示され、ユーザーは快適にWebサイトを体験できるようになります。以下、ウェブマスターブログにて、見本のムービーがあります。
参考：Accelerated Mobile Pages プロジェクトについて -- 導入ガイド日本語版を本日公開しました
また、このプロジェクトはオープンソースで成り立っています。FacebookのInstant Articlesなど他にも類似のものはありますが、Github上からプルリクエストを送ったり、誰でも機能改善・提案に参加できることが特徴的です。
AMPを導入するメリットとは
ではなぜAMP導入するのでしょうか。
まず、Googleの検索結果の直下に表示されるようになるのでユーザーがコンテンツにたどり着くまでのプロセスが簡略化されます。
横スクロールで画像付きの記事が展開されるカルーセル形式であることも、閲覧者数のUXを向上させる仕組みになっていると言えるでしょう。
また、ページの読み込みスピードが上がり、ストレスによるユーザーの離脱軽減が期待できます。
これは、表示速度を上げるためにjavascriptや外部CSSを読まないようにしていたり、GoogleなどにページがキャッシュされていてWebサイトを読み込む必要がなかったりするためです。
実際に手持ちのスマートフォンで「朝日新聞」と検索してみてください。
アイキャッチ画像の下に「AMP」と表示されたカルーセルカードが検索結果に並んでいると思います。タップをしたり横スクロールをして、読み込みにかかるスピードが軽減されていることが実感できるはずです。
AMP実装手順（WordPressプラグイン編）
AMPは、ニュースやブログなどのコンテンツページのモバイル体験を快適にするためのものです。そのため、CMSであるWordPressを用いた運用をされている方のために、専用の「AMP」プラグインが用意されています。WordPressの管理画面上でプラグイン「AMP」を検索し、直接インストールできます。
もちろんAMPプラグインのページからダウンロードして「wp-content/plugins」のディレクトリへアップしても可能です。
その後管理画面で「有効化」し、「ダッシュボード > 設定 > パーマリンク設定」で「変更を保存」を押して更新。設定が完了したら、AMPバージョンのURLヘアクセスしてみましょう。
見たい記事のURLの末尾に「/amp/」もしくは「/?amp=1」を付けてブラウザで確認してみてください。
※既存のページURLが勝手にAMP対応されて表示されるわけではありません。
AMP実装手順（AMP HTMLページ作成編）
WordPressを使っていない静的なサイトに、HTMLで直接記述する方法です。「AMP HTML」の仕様に合わせてHTMLページを記述していきます。
AMP用のHTMLを別途新規で作る方法と、モバイル表示に対応したHTMLを更新する2パターンありますが、機能制限があったりなどの不具合が起こる可能性があるので、新規でAMP専用のHTMLを作成するのがオススメです。
箇条書きに羅列すると、以下のような変更を加えていきましょう。
・<html lang="ja"> → <html AMP lang="ja">へ変更
・<link rel="canonical" href="PCページ" />を設定
・<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">を追加
・<script async src="https://cdn.ampproject.org/v0.js"></script>を追加
・以下を追加
<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>
・<img> → <amp-img>へ変更
・<video> → <amp-video>へ変更
・<iframe> → <amp-iframe>へ変更
・javascript → 使用不可
・css →link relで読み込み不可のため、head内に<style amp-custom>を記述してその中で設定
サイトに合わせてもうひと工夫必要な箇所も出てくるかもしれません。以下公式サンプルを参考に調整してみてください。
公式サンプル：amphtml/examples at master · ampproject/amphtml · GitHub
AMP実装手順（WordPressプラグイン無し編）
WordPressは、PHPを使ってページを動的に（効率的に）管理するためのシステムです。静的HTMLの技術であるAMPとは本来は相容れないものです。プラグインを使う分には問題ありませんが、むやみにプラグインを編集すると動かなくなることがあります。
基本的には先ほどの「AMP実装手順（AMP HTMLページ作成編）」と同様にview pointやcanonical等を設定しつつ、PHPで条件分岐を設定して、AMPページのHTMLと通常ページのHTMLを切り替えて表示するように実装します。詳しくは以下のページも参考にしてみてはいかがでしょうか。
参考：AMPをワードプレスにプラグイン無しで設定する方法 | q-Az
まとめ
コンテンツを提供されているサイトなら、まずは試してみてもいいかもしれません。
AMP対応することで、検索結果でもリッチな表現がされるだけでなく、今後AMP対応が益々増えることが予想されるため、早めに実装しても問題ないでしょう。
AMP対応が完了すると、Googleサーチコンソール上の「検索での見え方」メニューに「Accelerated Mobile Pages」と追加されます。
実装の確認用としてもぜひご利用ください。
このニュースを読んだあなたにオススメ
ホームページの成果を伸ばす具体的な施策とは
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法
今更聞けない…。UI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）の意味を理解しよう