この記事は2016年12月26日に更新しました。

もうWebサイトにAMPは実装済みでしょうか。

AMPを実装すると、モバイルページの表示速度が高速化してユーザー満足度を高めることが出来ます。

そんなAMPをサポートする取り組みも盛んに行われています。2016年6月20日、日本でもGoogleNEWSがAMP対応したと発表されました。
アメリカでは4月中旬に、イギリス・フランス・ドイツなど主要6カ国についても6月上旬には対応済みとなっています。

今回は、今なにかと話題になっているAMPについて解説いたします。

AMPページの詳しい作成方法などは分からなくても、Web業界に関わる方であればその概要だけでも把握しておく必要があります。
まだ概要がよくわからない方はもちろん、すでにご存知の方も再確認として一読しておくことをオススメします。

目次

  1. AMPとは
  2. AMPに対する各プラットフォームの現状
    1. Google
    2. Yahoo
    3. はてなブックマーク
  3. AMPが速くなる仕組み
    1. プリレンダリングに最適化
    2. JavaScriptが使えない
    3. ローディングに優先順位がある
  4. AMPを構成する3要素
    1. AMP HTML
    2. AMP CDN
    3. AMP JS
  5. AMPを利用するメリット
    1. コンテンツが高速表示される
    2. 通常検索結果枠とは別の枠で表示される
    3. ユーザーのストレスを軽減できる
    4. 検索結果で上位表示される可能性が高くなる
    5. AMP専用枠 Live Tickerに表示される可能性がある
  6. AMPを利用するデメリット
    1. デザインやコンテンツがうまく表示されない可能性がある
    2. 一部の広告タグしか利用できない
  7. AMP実装方法
    1. AMP HTMLページ作成編
    2. WordPressにプラグインを使って実装する方法
    3. WordPressにプラグインを使わずに実装する方法
  8. AMPが正しく設定されているか検証する方法
    1. Chromeのデベロッパーツールを使用する
    2. サーチコンソールで確認する
    3. 構造化データテストツールを利用する
  9. AMPページのアクセス解析

AMPとは

AMP1.png
AMP 公式サイト
AMPとは、Accelerated Mobile Pagesの略でアンプと読みます。GoogleとTwitterが共同開発しているモバイル端末でホームページを高速表示するためのプロジェクト、またはAMP HTMLフレームワークのことです。

ユーザー体験の向上を目的として開発が進められていましたが、2016年2月24日にGoogle検索で対応開始となったことで、世の中で広く認知されるようになりました。

AMPを実装すると、モバイルページの表示速度が約4倍、データ量が約1/10になると言われています。

WordPressでは、通常のHTMLで作成したホームページをAMP HTMLに自動変換してくれるプラグインも開発されています。ferret内の以下のページで利用方法をご紹介していますので、ぜひ参考にしてみてください。

参考：
誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法｜ferret編集部

AMPに対する各プラットフォームの現状

AMPのプロジェクトは、様々なプラットフォームが続々と対応を始めています。各プラットフォームの対応状況をまとめてみました。

Google

Untitled.png
2015年にプロジェクト公開されたAMPですが、当初はAMP用の表示枠があり、そこにAMPコンテンツが表示されるようになっていました。通常の検索結果には影響を及ぼしていませんでした。しかし、2016年10月には、スマホ検索の通常検索結果もAMP対応されるようになりました。

googleampserp.gif
このように⚡マークのラベルが表示され、これがAMPで表示される通常検索結果になります。

Yahoo

yahooampserp.gif
Yahooの検索結果では、Googleと違いAMPマークのラベル表示などは行われていません。今後対応する予定ですが、導入時期は明確になっていません。

参考：
日本のYahoo!検索がAMPサポートを表明、日々5,800万のYahoo!検索ユーザーがAMPページにアクセスすることに | 海外SEO情報ブログ

はてなブックマーク

hatenaamp.gif
ソーシャルブックマークサービスとして人気のはてなブックマークも実はAMPに対応しています。アプリ版のはてなブックマークでは、AMP対応されているページが人気・新着エントリーに入ると⚡マークが表示されます。

この⚡マークが付いているものをクリックすると、AMPページへ飛び高速でコンテンツを見ることが出来ます。

hatenaserp.gif
また、検索結果のAMP枠にもはてなブックマークのページが表示されるようになっています。

AMPが速くなる仕組み

1.プリレンダリングに最適化

通常ホームページやWebサイトにアクセスしようとすると、要求されたページを読み始め時間とともにページが表示されていきます。要するに、リンクがクリックされてからHTMLが読み込まれるためページが表示されるまでにタイムラグが生じていました。しかもスマホのネット回線は強くないため、よりページのローディング速度が遅くなる状態でした。

しかしAMPでは、ページを開く前に事前にページが読み込まれるようになり、速度が高速化します。

2.JavaScriptが使えない

JavaScriptは非常に広い範囲で使われていますが、多くのリクエストを発生させ、低速化の要因の1つになっていました。そのため、AMPではJavaScriptを使うことが出来ません。

3.ローディングに優先順位がある

ページ内に存在するコンテンツに、ローディングの優先順位をつけることで体感速度をアップさせています。例えば、スクロールさせないと表示されないような画像は、最初から表示させておく必要がないため優先順位は低くなります。他にも、iframeも優先順位が低く設定されています。

ホームページのHTMLをあらかじめGoogleまたはTwitter側でキャッシュ（保存）しているため、読み込み時間が短縮されページがこれまでより高速で表示されるという仕組みになります。

AMPを構成する3要素

AMPは高速化のため、使用できる要素が制限されています。

  1. AMP HTML
  2. AMP CDN
  3. AMP JS

AMP HTML

AMP HTMLは、HTML5をベースにしたAMP用に簡略化されたHTMLです。AMP用に独自のカスタマイズが加ているのが特徴です。主な点は以下です。

  • html要素にかと記述
  • 画像は ではなく、と記述
  • 画像は必ずwidth、heightを固定値で指定
  • 外部CSSが読み込めない。

などなど。これは一部なので、どんなものが他に使えて、使えないかなどは公式サイトを確認しましょう。

参考：
AMP公式サイト
https://www.ampproject.org/

AMP CDN

AMP CDNとは、AMP Projectが提供しているCDNです。CDNとは、コンテンツデリバリーネットワークのことで、CDNがコンテンツを配信してくれるので負荷分散が起き、高速化が実現できます。AMP CDNはAMPに特化したCDNをイメージすると分かりやすいです。AMP CDNにAMPコンテンツがキャッシュされれば、そのページはAMPページとして配信され、高速表示されます。

AMP JS

AMP JSとは、AMP HTMLのリソース読み込みやレンダリングを行うJavaScriptライブラリで非同期で読み出し、高速化を助けています。主な特徴としては、読み込みに優先順位が付けられ体感速度の向上を行っています。

AMPを利用するメリット

1.コンテンツが高速表示される

AMPでは、AMPが定義したJavaScriptのみ使用できます。広告などの読み込みによって処理が重くなってしまうJavaScriptの使用を制限することで、動画やアニメーションなどが瞬時にロードできるようにするためです。簡単にいえば、無駄なものを削ぎ落とすことで高速化するイメージです。
2度目以降アクセスする場合は、すでにキャッシュされているので更に高速表示されます。

2.通常検索結果枠とは別の枠で表示される

AMPに対応しているホームページは、Googleでのモバイル検索結果で表示されるトップニュースのカルーセル部分で記事を表示させることができます。
必ず表示されるわけではありませんが、ここで表示されることでホームページの認知度向上が期待できます。

なお、カルーセルが表示されたら記事のアイキャッチ画像の下に「AMP」と表記されていることがわかります。
この表記があるものをクリックすると、AMP対応ページが表示されます。

3.ユーザーのストレスを軽減できる

これまでよりページの表示速度が高速化するため、ユーザーがホームページを閲覧している際に「遅い」と感じることが少なくなります。
ユーザーは記事を読み進めやすくなり、ストレスなくホームページを閲覧することができます。

4.検索結果で上位表示される可能性が高くなる

今のところ、GoogleはAMPの対応/非対応を検索順位に反映させることはないと言っています。
しかし、先に述べたメリットでも挙げたように、AMP対応をすることでユーザーのストレスが軽減される、カルーセル部分に表示されるなどの要因からアクセスされやすくなると考えられます。

また、Googleの検索順位に関する施策は突然実施されることも少なくありません。よほどの理由がない限り、対応しておいた方がよいでしょう。

ferretも、AMPに対応しています。ぜひモバイル端末から以下のURLをクリックしてみてください。
AMPのメリットを直接感じることができます。
ferret

5.AMP専用枠"Live Ticker"に表示される可能性がある

GoogleAMP-1.png

2016年秋頃に導入されると見られている"Live Ticker"ですが、Digidayによると現在既に導入されているAMPのカルーセル枠の上（赤枠の部分）に表示されるとされています。
通常のAMPのカルーセル枠よりも大きな表示になると見られており、ここにはAMPコンテンツのみが表示されます。

通常の検索結果の上に表示されるカルーセルAMP枠でさえ目立っていましたが、それ以上に目立つLive Tickerは流入に大きく寄与しそうです。

AMPを利用するデメリット

1.デザインやコンテンツがうまく表示されない可能性がある

AMPが定義したJavaScript以外が多様されているコンテンツを2次利用している場合など、デザインやコンテンツが表示されない可能性があります。
AMPで禁止されているタグは多数ありますので、AMP対応を行うなら事前にタグのチェックはしておきましょう。

2.一部の広告タグしか利用できない

広告を掲載しているホームページの場合、限られた配信業者の広告タグしか利用できません。
記事執筆時現在(2016年4月21日)は、以下の配信業者が対応しています。

  • A9
  • AdReactor
  • AdSense
  • AdTech
  • Doubleclick
  • i-mobile

これらの配信業者のタグを使用する場合でも、高速表示する、HTTPSで作成された安全なクリエイティブを提供するなどの点に注意する必要が有ります。

AMP実装手順

AMP HTMLページ作成編

AMP HTMLの仕様に合わせてAMPページを作成していきます。

<!doctype html>
<html ⚡>
<head>
　　<meta charset="utf-8">
　　<link rel="canonical" href="hello-world.html">
　　<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
　　<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></body>
</html>

AMP HTMLには以下のようなルールがあります。箇条書きに羅列すると、以下のような変更を加えていきましょう。

・<!doctype html>で宣言を開始する
・<html> ではなく <html amp> もしくは <html ⚡>
・<head>タグ内に <link rel="canonical" href="$SOME_URL" /> タグを入れて、AMPの元となったHTMLページを指定する。HTMLページがない場合は、AMPページ自身を指定。
・<meta charset="utf-8">を<head>の開始タグ直後に配置する
・<head>タグ内に<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">を追加
・<script async src="https://cdn.ampproject.org/v0.js"></script>を<head>の閉じタグの直前に追加
・<img> → <amp-img>へ変更
・<video> → <amp-video>へ変更
・<iframe> → <amp-iframe>へ変更
・javascript → 使用不可
・css →link relで読み込み不可のため、head内に<style amp-custom>を記述してその中で設定

サイトに合わせてもうひと工夫必要な箇所も出てくるかもしれません。以下公式サンプルを参考に調整してみてください。

参考：
AMP HTML ページを作成する|Accelerated Mobile Pages Project

WordPressにプラグインを使って実装する方法

amp01.jpeg
AMPは、ニュースやブログなどのコンテンツページのモバイル体験を快適にするためのものです。そのため、CMSであるWordPressを用いた運用をされている方のために、専用の「AMP」プラグインが用意されています。WordPressの管理画面上でプラグイン「AMP」を検索し、直接インストールできます。

もちろんAMPプラグインのページからダウンロードして「wp-content/plugins」のディレクトリへアップしても可能です。

その後管理画面で「有効化」し、「ダッシュボード > 設定 > パーマリンク設定」で「変更を保存」を押して更新。設定が完了したら、AMPバージョンのURLヘアクセスしてみましょう。

見たい記事のURLの末尾に「/amp/」もしくは「/?amp=1」を付けてブラウザで確認してみてください。
※既存のページURLが勝手にAMP対応されて表示されるわけではありません。

WordPressにプラグインを使わずに実装する方法

WordPressは、PHPを使ってページを動的に（効率的に）管理するためのシステムです。静的HTMLの技術であるAMPとは本来は相容れないものです。プラグインを使う分には問題ありませんが、むやみにプラグインを編集すると動かなくなることがあります。

基本的には先ほどの「AMP実装手順（AMP HTMLページ作成編）」と同様にview pointやcanonical等を設定しつつ、PHPで条件分岐を設定して、AMPページのHTMLと通常ページのHTMLを切り替えて表示するように実装します。詳しくは以下のページも参考にしてみてはいかがでしょうか。

参考：AMPをワードプレスにプラグイン無しで設定する方法 | q-Az

AMPが正しく設定されているか検証する方法

AMPが正しく設定されているかを確認する方法は、主に3つあります。

  1. Chromeのデベロッパーツールを使用する
  2. Google Search Console(以下、サーチコンソール)で確認する
  3. 構造化データテストツールを利用する

1.Chromeのデベロッパーツールを使用する

Chromeのデベロッパーツールでは、AMP HTMLが定められている仕様に従って記述されているかを検証できます。

amp02.jpeg
まず、AMP対応している該当のページを開いた状態でデベロッパーツールを起動します。
この際、URLの末尾に「#development=1」をつけてください。

画面右上のアイコン(画像赤枠部分)をクリックすると、プルダウンでメニューが表示されますので、この中から「その他のツール」を選択します。
するとさらにメニューが開きますので「デベロッパーツール」を選択してください。

なお、ショートカットキー「Ctrl + Shift + C(Macの場合はCommand + Shift + C)」でも開けます。

amp03.jpeg
デベロッパーツールが表示されたら「Console(画像赤枠部分)」をクリックします。
ここで「Powered by AMP HTML – Version〜」と表示されていれば、正しく記述されています。

2.サーチコンソールで確認する

Googleからの評価を把握できるサーチコンソールでも、正しくAMP対応できているかを確認することができます。
この機能は2016年にサーチコンソール内に追加されました。

amp04.jpeg
サーチコンソールを開きます。
画面右横のメニューのうち「検索での見え方」をクリックするとさらに詳細なメニューが表示されますので、その中から「Accelerated Mobile Pages」を選択してください。

amp05.jpeg
インデックス数やエラーの原因・対象のページなどが表示されます。
こここで表示されているエラーをもとに、対応すべきページについては速やかに修正するようにしましょう。

3.構造化データテストツールを利用する

構造化データテストツールとは、構造化マークアップをチェックして、正しく解析・認識されているかを確認することができるツールです。
Googleより、無料で提供されています。
このツールを使用して、正しくAMP対応できているかを確認することができます。

amp06.jpeg
まず、構造化データテストツールにアクセスします。
以下のURLよりアクセスしてください。

構造化データテストツール

amp07.jpeg
チェックしたいAMP対応のページのURLを入力し、テストを実行します。するとテスト結果が表示されます。
ここで「エラー」や「警告」が出ている場合は、AMPの記述に誤りがありますので修正してください。エラー・警告が0の場合は、正しく記述されています。

AMPページのアクセス解析

AMPでは、ページの高速表示に影響を与えてしまうタグや読み込み速度を落とすスクリプトの使用が制限されています。
そのためAMPに対応しているホームページでは、アクセス解析が難しい状態にありました。

しかし規模の大きなメディアになってくると、アクセス解析タグを複数使用している場合もあります。
そこでGoogleは、Googleアナリティクスに対応したことを公式ブログで発表しました。

実装の簡単な手順としては、AMPに対応したGoogleアナリティクスようのJavaScriptをロードして「 」のタグを書き、この中に計測内容を記述する、とされています。
詳しくは以下の公式ブログを参照ください(英語表記です)。

参考：Announcing GA Support for Accelerated Mobile Pages (AMP) Analytics｜Analytics Blog

まとめ

Googleは今のところAMPを検索結果のランキング要因とするかについては明言を避けています。
しかし、AMPによってユーザー体験が向上すればユーザー満足度が向上し、対応していないホームページに比べてこれまで以上に閲覧されるページとなっていくことは明らかです。

ホームページを構成するコンテンツや裏側で動作するコードなどによっては、AMP対応をいまだ検討している運営者の方もいらっしゃるでしょう。
AMPを活用するメリット・デメリットなどをよく鑑みて、自社のホームページを閲覧してくれるユーザーの満足度向上をめざしましょう。

このニュースに関連するカリキュラム

ホームページの成果を伸ばす具体的な施策とは

ホームページの成果を伸ばす具体的な施策とは

売上アップの公式は、訪問数Ｘ成約率Ｘ客単価で表せますが、具体的に何をしたらいいのかまでイメージをふくらませることが必要です。具体的な行動の成果をチェックしながら、ホームページを調整し精度をあげていく、それこそがホームページ運営といえます。