
AMP(Accelerated Mobile Pages)とは?今から導入するための基礎知識と手順書マニュアル
- 2016年7月6日
- ニュース
この記事は2016年12月26日に更新しました。
もうWebサイトにAMPは実装済みでしょうか。
AMPを実装すると、モバイル ページ の表示速度が高速化して ユーザー 満足度を高めることが出来ます。
そんなAMPをサポートする取り組みも盛んに行われています。2016年6月20日、日本でも
Google
NEWSがAMP対応したと発表されました。
アメリカでは4月中旬に、イギリス・フランス・ドイツなど主要6カ国についても6月上旬には対応済みとなっています。
今回は、今なにかと話題になっているAMPについて解説いたします。
AMP
ページ
の詳しい作成方法などは分からなくても、Web業界に関わる方であればその概要だけでも把握しておく必要があります。
まだ概要がよくわからない方はもちろん、すでにご存知の方も再確認として一読しておくことをオススメします。
目次
- AMPとは
- AMPに対する各プラットフォームの現状
- AMPが速くなる仕組み
- AMPを構成する3要素
- AMPを利用するメリット
- AMPを利用するデメリット
- AMP実装方法
- AMPが正しく設定されているか検証する方法
- AMPページのアクセス解析
AMPとは
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のプロジェクトは、様々なプラットフォームが続々と対応を始めています。各プラットフォームの対応状況をまとめてみました。
2015年にプロジェクト公開されたAMPですが、当初はAMP用の表示枠があり、そこにAMP
コンテンツ
が表示されるようになっていました。通常の
検索結果
には影響を及ぼしていませんでした。しかし、2016年10月には、スマホ検索の通常
検索結果
もAMP対応されるようになりました。
このように⚡マークのラベルが表示され、これがAMPで表示される通常
検索結果
になります。
Yahoo
Yahooの
検索結果
では、
Google
と違いAMPマークのラベル表示などは行われていません。今後対応する予定ですが、導入時期は明確になっていません。
参考:
日本のYahoo!検索がAMPサポートを表明、日々5,800万のYahoo!検索ユーザーがAMPページにアクセスすることに | 海外SEO情報ブログ
はてなブックマーク
ソーシャルブックマークサービスとして人気のはてなブックマークも実はAMPに対応しています。
アプリ
版のはてなブックマークでは、AMP対応されているページが人気・新着エントリーに入ると⚡マークが表示されます。
この⚡マークが付いているものをクリックすると、AMP ページ へ飛び高速で コンテンツ を見ることが出来ます。
また、
検索結果
のAMP枠にもはてなブックマークのページが表示されるようになっています。
AMPが速くなる仕組み
1.プリレンダリングに最適化
通常ホームページやWebサイトにアクセスしようとすると、要求された ページ を読み始め時間とともに ページ が表示されていきます。要するに、 リンク がクリックされてから HTML が読み込まれるため ページ が表示されるまでにタイムラグが生じていました。しかもスマホのネット回線は強くないため、よりページのローディング速度が遅くなる状態でした。
しかしAMPでは、 ページ を開く前に事前にページが読み込まれるようになり、速度が高速化します。
2. JavaScript が使えない
JavaScript は非常に広い範囲で使われていますが、多くのリクエストを発生させ、低速化の要因の1つになっていました。そのため、AMPでは JavaScript を使うことが出来ません。
3.ローディングに優先順位がある
ページ 内に存在する コンテンツ に、ローディングの優先順位をつけることで体感速度をアップさせています。例えば、スクロールさせないと表示されないような画像は、最初から表示させておく必要がないため優先順位は低くなります。他にも、iframeも優先順位が低く設定されています。
ホームページの HTML をあらかじめ Google または Twitter 側でキャッシュ(保存)しているため、読み込み時間が短縮され ページ がこれまでより高速で表示されるという仕組みになります。
AMPを構成する3要素
AMPは高速化のため、使用できる要素が制限されています。
- AMP HTML
- AMP CDN
- AMP JS
AMP HTML
AMP HTML は、 HTML5 をベースにしたAMP用に簡略化された HTML です。AMP用に独自のカスタマイズが加ているのが特徴です。主な点は以下です。
- html要素に
<html ⚡>
か<html amp>
と記述 - 画像は
<img>
ではなく、<amp-img>
と記述 - 画像は必ず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"に表示される可能性がある
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
これらの配信業者のタグを使用する場合でも、高速表示する、 HTTP Sで作成された安全なクリエイティブを提供するなどの点に注意する必要が有ります。
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 に プラグイン を使って実装する方法
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のデベロッパー ツール を使用する
Chromeのデベロッパー ツール では、AMP HTML が定められている仕様に従って記述されているかを検証できます。
まず、AMP対応している該当のページを開いた状態でデベロッパー
ツール
を起動します。
この際、
URL
の末尾に「#development=1」をつけてください。
画面右上のアイコン(画像赤枠部分)をクリックすると、プルダウンでメニューが表示されますので、この中から「その他の
ツール
」を選択します。
するとさらにメニューが開きますので「デベロッパー
ツール
」を選択してください。
なお、ショートカットキー「Ctrl + Shift + C(Macの場合はCommand + Shift + C)」でも開けます。
デベロッパー
ツール
が表示されたら「Console(画像赤枠部分)」をクリックします。
ここで「Powered by AMP
HTML
– Version〜」と表示されていれば、正しく記述されています。
2.サーチコンソールで確認する
Google
からの評価を把握できるサーチコンソールでも、正しくAMP対応できているかを確認することができます。
この機能は2016年にサーチコンソール内に追加されました。
サーチコンソールを開きます。
画面右横のメニューのうち「検索での見え方」をクリックするとさらに詳細なメニューが表示されますので、その中から「Accelerated Mobile Pages」を選択してください。
インデックス
数やエラーの原因・対象のページなどが表示されます。
こここで表示されているエラーをもとに、対応すべき
ページ
については速やかに修正するようにしましょう。
3.構造化データテスト ツール を利用する
構造化データテスト
ツール
とは、構造化マークアップをチェックして、正しく解析・認識されているかを確認することができるツールです。
Google
より、無料で提供されています。
このツールを使用して、正しくAMP対応できているかを確認することができます。
まず、構造化データテスト
ツール
にアクセスします。
以下の
URL
よりアクセスしてください。
チェックしたい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を活用するメリット・デメリットなどをよく鑑みて、自社のホームページを閲覧してくれるユーザーの満足度向上をめざしましょう。