AMP（アンプ）とは、「Accelerated Mobile Pages」を略したもので、Googleが推奨するモバイルページの表示速度を高速化してユーザー満足度を高める手法のことです。2016年、アメリカで先立って始まったAMPは、6月20日に日本でも対応開始。今では数多くのWebページがAMPに対応しています。

今回は、AMPの基礎知識や導入方法について解説していきます。

目次

  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に自動変換してくれるプラグインも開発されています。

誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法

誰でも一瞬でできる！WordPressのプラグインを使ってAMPに対応する方法

今回は、WordPressのプラグインを使ってAMPに対応する方法をご紹介します。とても簡単に設定できますので、この機会に対応しておきましょう。

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

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

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

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

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

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

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

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

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

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

AMP（アンプ）が正しく設定されているか検証する方法

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

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

1.AMPテスト

amptest.jpg
AMPテスト

AMPテストは、Googleが提供しているチェックツールです。URLを入れるだけで、正しくAMPが設定されているか確認ができます。チェックは数秒で終わるので、AMPの導入をしたらまずは確認してみましょう。

AMPページ導入をテストするオススメツール4選

AMPページ導入をテストするオススメツール4選

Webサイトを運営する上で、表示速度を改善するためにAMP化している方も多いのではないでしょうか。AMP対応は正しい方法で導入しなければ、効果が反映されない場合があります。この記事では、AMPが正しく導入されているかテストするツールを紹介します。

2.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〜」と表示されていれば、正しく記述されています。

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

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

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

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

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

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

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

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

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

AMP（アンプ）ページのアクセス解析

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

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

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

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

AMP（アンプ）はユーザー満足度の向上に繋がる

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

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

表示速度高速化のためにできること

WordPress（ワードプレス）の表示速度を高速化する方法。SEOにも必須の改善方法とは

WordPress（ワードプレス）の表示速度を高速化する方法。SEOにも必須の改善方法とは

Webサイト構築で多く使われているWordPressはカスタマイズの自由度が高く様々なことができます。 しかしその一方で、自由度の高さからWebサイトの表示速度を落としてしまうケースもあります。表示速度が落ちてしまうと、読み込みが遅くなってしまうため、なにかと不都合も生じてしまうのです。 そこで今回は、WordPressの表示速度を高速化する方法について解説していきます。
ホームページ表示速度の分析が瞬時にできる！PageSpeed Insightsの使い方

ホームページ表示速度の分析が瞬時にできる！PageSpeed Insightsの使い方

ますますページ表示速度がUXの観点でも、SEOの観点でも重要になってきました。では、ページ表示速度はどのように調査すればよいのでしょうか。今回はGoogleが無料提供しているページ表示速度の調査ツール「PageSpeed Insights」の使い方を解説します。