スマホ表示を高速化するAMP（Accelerated Mobile Pages）とは？
サーチコンソールにAccelerated Mobile Pages（以下AMP）という項目が追加されたことは、もうお気付きかと思いますが、2016年2月後半からgoogleの検索に追加表示されたというこのAMPとは実際のところ何なのか？現状、対応する必要があるのか？などをこの記事でご説明したいと思います。
目次
AMPとは
AMPとは、Accelrerated Mobile Pages（高速化されたスマホ向けページ）の略です。
Webサイトのモバイル端末表示を高速化するAMP（Accelerated Mobile Pages）。対応ページを実際に見たことのある方は、あまりの高速さに驚いたのではないでしょうか。
AMPはGoogleを含むいくつかの企業・団体が合同で推進されていますが、AMPに対応したページはGoogle検索と組み合わさった際に最高のパフォーマンスを発揮します。
具体的には、HTMLファイルをAMP特有の書式で作成することで、Googleモバイル検索からのページ読み込みが高速化される、というものです。この際、Googleモバイル検索結果表示にも「AMP対応」とラベルが付きます。
AMPページに対応するためには実際のページとは別でAMP HTMLに沿ってページを用意する必要がありますが、ウェブサイト管理の経験があれば、比較的悩まずに導入できるものです。
※レスポンシブデザインとはまた別の表示となります。
この表示速度が早いというAMP用ページを用意する際には、いくつもの禁止タグやJSの一部使用禁止などの制約が多く、また禁止されたタグの代わりとなるAMP専用のタグも用意されています。
このように、AMPに対応するためには多少の開発コストがかかることからAMPがどういったものなのかを正しく知り、管理しているサイトに必要かどうかを見極めましょう。
AMPの表示形式は？
スマホでAMPのデモページから検索結果を見てみると下記のようにAMP対応ページは左右にスライド可能なカルーセルで表示され、「AMP」とラベル表示されています。
通常の検索結果よりも上に表示されているため、クリックされる機会も期待できますね。
AMPデモページ：http://g.co/ampdemo
そして、AMPに対応した記事をタップすると、上記右のような個別ページに瞬時に移動して、さらに横にスライドすると前画面のカルーセルにあった隣のページが瞬時に表示されます。（ニュースアプリのような感じです。）
この、瞬時に表示されるのがAMPの最大の特徴と言えます。
なぜ表示速度が速いのかというとAMPに対応したページは、JSなどの使用禁止の他、あらかじめGoogleにキャッシュされることなどが挙げられます。
AMPページの動作
AMP対応するとどうなるかは、こちらのデモGIF動画を見ると分かりやすいでしょう。とても高速に モバイル検索結果ページ→AMPページへ移動→別ページヘ と遷移する様子が見られます。
（クリックで拡大）
このGIF動画をポイントごとに説明した図がこちらです。
あるいは、例えば「朝日新聞」でスマホ検索すると、既にAMP対応済みの朝日新聞サイトの動作を確認できます。AMPページの読み込みスピードは通常の約2倍程度（＝読み込み時間が前の半分）と言われます。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
AMP導入前のポイント – 注意点と対応条件
AMP導入検討の前に、ポイントをいくつか押さえておきましょう。
- モバイル検索結果画面で優遇される
AMP対応ページは、Googleモバイル検索の結果画面で、最上部に位置するカルーセル（検索結果サイトリストとは別に用意された、画像やスクロールなどが使えるコンテンツボックス）に掲載されることができます。その際対応ページには「AMP」マークが表示されます。
- GoogleはAMPページのキャッシュを表示する
Google検索画面からAMP対応ページへ移動すると、そのページのもともとのドメイン（例えば https://seopack.jp/…）ではなく、Googleのドメイン（https://www.google.co.jp/amp/…）になります。これはGoogleがAMPページをキャッシュして読み込んでいるためで、これも高速化に大きく貢献しています。 - 多くのJavaScriptやCSSが使えない
AMPが高速なのは「余計なコードやファイルを読まない」からです。
例えばJavaScriptも専用のコードしか使えず、他は読み込めません。それにより高速化が実現する一方で、当然、非AMPサイトで使っていたコードの多くが使えなくなります。 - AMPページで使えない広告がある
使えるコードの制限により、ある種のリスティングやプレイスメント広告はAMPページで使うことができません。現在は専用コードに対応させればGoogle AdSenseは表示可能です。今後は対応ベンダも増えてゆくでしょう。 - ニュース記事ページなどにしか使えない
基本的に、ニュースやブログの記事ページ（「リーフノード」）にだけ使うことができ、インデックスページやカテゴリ一覧、サイト内検索結果ページなど（「ハブノード」）には使えません。 - URL正規化が必要
AMPページは、元（＝パソコン版）のページとは別にファイルを用意する必要があり、URL正規化が必要です。AMPページ側はPC版を指定したcanonicalタグ、PCページにはAMP版を指定した「amphtml」タグを入れます。コードは後述のサンプルコードを参考にしてください。 - 直接のSEO効果はない
AMP対応しただけで順位上昇するわけではないため、基礎SEOが済んでおらず検索順位がついていないサイトでAMP対応だけしても、ほぼ意味はありません。
AMP対応すべきサイトの条件
このことから、今のところAMPを導入する意味があるのは、次の条件を満たすサイト（ページ）だけです。
・ニュース記事ページである
・AdSense広告だけを載せている、もしくは、AdSense以外の広告を載せていない
・既に基礎SEO対策が済み、順位が付いている
これらに当てはまるページは、AMP対応のメリットがありますが、当てはまらない場合は、今のところAMP対応は不要といえます。
導入の手順- AMP対応法
AMPページ作成手順は、多くの情報が英語のため、私たちには難解です。そこで、ガイドラインやサンプルコードの日本語訳し、以下でAMP作成の手順を説明します。
AMPページを作る – サンプルコード
まずは、次のAMPページサンプルコードを見てみましょう。
→ サンプルコード（適宜改変版） – amp-sample.html
このリンクをスマホからクリックするとAMPページ表示を確認できます。
このソースコードは下記の様になっています。
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<title>Sample document</title>
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
h1 {color: red}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "ようこそAMPページヘ - ホーム",
"image": [
"logofile.jpg"
],
"datePublished": "2016-05-24T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>ようこそAMPページヘ</h1>
<p>
ここに本文が入ります。
<amp-img src=sample.jpg width=300 height=300></amp-img>
</p>
<amp-ad width=300 height=250
type="a9"
data-aax_size="300x250"
data-aax_pubname="test123"
data-aax_src="302">
</amp-ad>
</body>
</html>
このソースを新規htmlファイルにコピペし、適宜書きなおして自身のサイトにアップすれば、動作テストや、テンプレートとしての活用が可能です。
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
Web版「AMPテストツール」活用法
AMPページの検証ができるWeb版AMPテストツールはインストールなどの必要がなく、URLアクセスだけでより役に立つ検証機能を利用できます。
https://validator.ampproject.org/へアクセスすることで利用することができます。初期画面は次のようになっています。
AMPロゴの下にあるURL入力フォームに、検証したいAMPページのURLを入れ、右の「VALIDATE」ボタンを押すと、即座に検証が始まります。
合格の場合はソースコードの下に「PASS」（合格／適合）と緑文字で表示されます。
AMP対応していないページのURLを入力した不合格の場合だと、赤丸（●）に「！」のアラートマークが表示され、ソースコードの下には赤で「FAIL」（不合格／不適合）と出ます。さらに下にはアラート箇所の説明も並びます。
リファレンス – HTMLタグと必須マークアップ
AMP対応HTMLでは、いくつかHTMLタグをそのまま使えますが、いくつかのタグはAMP専用タグに書き換える必要があります。（例：<img> → <amp-img> など）
また、記述必須のマークアップもあり、AMPページ作成時はこうした書式を守る必要があります。
使用可能なHTMLタグ
| タグ | 解説 |
|---|---|
| script | typeが application/ld+json でない場合は、使用禁止 |
| img, video, audio, iframe | 冒頭に「amp-」をつけたものを使用 （amp-img amp-video など） |
| base, frame, frameset, objeect, param, applet, embed, imput, textarea, select, option | 使用禁止 |
| form | 使用禁止 ※将来的に対応予定 |
| button | 使用可能 |
| a | ・href属性の値が javascript : から始まってはいけない ・javascript: から始まる場合は target 属性の値が _blank でなければならない ・それ以外は使用可能 |
| svg | ほとんどが使用可能 |
| onで始まるHTML属性 (onclickやonmouseover), style, XML関連の属性, javascript: | 使用禁止 |
| 定数の on と使う属性 | 使用可能 |
AMPページで必要なマークアップ
| 項目 | 解説 |
|---|---|
| doctype | ソースコードは<!doctype html>から始めること |
| html | トップレベルタグである<html amp>をソースに含むこと |
| head, body | <head> と <body> タグを含むこと |
| link rel=”canonical” | <head> タグの中に<link rel=”canonical” href=”$SOME_URL” /> を含み、当該AMP HTMLファイルの正規版HTML（存在しない場合はそのAMP HTMLファイル自身）を指定していること |
| utf-8 | <head> タグの子要素として <meta charset=”utf-8″> を含むこと |
| viewport | <head> タグ内に <script async src=”https://cdn.ampproject.org/v0.js”></script> を含むこと |
| AMPボイラープレートコード | <head> タグの中に、AMP定型文（AMP boilerplate codeと呼ぶ）を含むこと |
＼無料診断の活用で課題を明確に／
外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。
AMPは全てのサイトで導入するべきか？
質問を受けたGoogleスポークスマンのジョン・ミューラーは、オンラインQ&Aイベントで下記のように回答しました。
AMPチームなら「全部AMPにすべき」と答えるはずだ。
私もある意味そう思う。本当に高速なウェブサイトを作れることは間違いなく、サイトはほとんど即座に読み込まれることになる。現れてはすぐに消えるようなたぐいのテクノロジーではない。
では、AMP対応は必須なの？
ミューラーはこのように言っていますが、では本当に、全てのサイトは今すぐAMP対応を進めるべきなのでしょうか？
なお、先ほどのコメントの後で、ミューラーは下記のようにも続けています。
今のところ、Googleは、検索トップの「In the News」カルーセル、「トップストーリー」カルーセルでしか表示していないが、他の部分でもAMPコンテンツを表示したいと思っているところだ。
実は、AMP対応しても、ニュースサイトなど一部の対応ジャンルのサイトでないかぎり、Google検索に対するSEO効果はないのです。
そうなるとAMP対応は、やって損もないでしょうが、やはりほとんどのサイトにとっては、AMP対応しても直接的なメリットはないと言えます。
AMP対応でモバイルサイトが「爆速」化しても、早いからといってユーザーがコンバージョンしたくなるかというと、そんなことはありません。
ほとんどのサイトにとっては、AMPによる爆速化よりも、単純に訪問ユーザーを増やすことの方が、ダイレクトに売上増につながります。ビジネスサイトを改善したいのであれば、AMP対応の前に、もっと基本的なSEO対策を優先するようにすべきでしょう。
今後AMPに対応するべきかどうか
AMPページは、主にニュースのような記事コンテンツが検索結果に表示されることが考えられます。このことから、申し込みページやボリュームの大きなトップページをAMPに対応させる必要はありません。（AMPは今のところフォームタグなど使えない制約が多いため表現もできません）
長期的には、サイトの大部分に AMP を利用できるようになりますが、現時点では、AMP はリーフノードのコンテンツ(個々の記事ページやブログ投稿など)に最適化されており、ハブノードのコンテンツ(カテゴリ一覧、検索ページ、メインページなど)には最適化されていません。
また、WordPressのプラグインでもAMPに対応できるようですが、エラーが多いとの記事をよく見かけるため、導入するにはもう少し様子をみても良いかもしれません。
ただ、Googleは変わらずモバイルファースト推していますし、今後、実際の検索順位は低い場合でもスマホをAMPページに対応することによって検索結果のカルーセルに上位表示される可能性も充分考えられます。
この辺りと、通常行うSEO対策を考慮して導入を検討しましょう。
