モバイルサイトを高速表示するAMPに関する最新情報まとめ

cap100

2月24日にGoogleからモバイサイトを高速表示する仕組み、AMPが正式にリリースされました。

スマホの検索結果には、既にAMPに対応したコンテンツが表示され始めています。

AMPはGoogleが2015年の10月に立ち上げた、モバイルサイトを高速表示するためのプロジェクトです。GoogleAnalyticsなどのアクセス解析ツール、DoubleClickやAdsenseなどの広告ネットワークにも対応が完了しており、いよいよ盛り上がってきました。今年、急速に広まっていくことが予想されます。

今回は、モバイルサイトを高速表示する新しい仕組み、AMPについて紹介します。

スポンサーリンク

目次

  1. AMPとは
  2. 実際にAMPを体験してみよう
  3. AMPの仕組み
  4. AMPに対応しているサイト
  5. AMPへの対応方針(ブログはもう少し様子見でOK)
  6. AMPプロジェクト公式サイト
  7. AMPの導入方法や技術情報まとめ
    1. 基本技術情報
    2. 検索結果デモ
    3. テストツール
    4. Google Analyticsへの対応方法
    5. DoubleClick、Adsenseなどの広告ネットワークへの対応方法
    6. 課金型・購読型コンテンツへの対応方法
    7. AMP対応のためのWordpressプラグイン
  8. AMPのこれまでの主なニュースまとめ
  9. まとめ

AMPとは

AMP(Accelerated Mobile Pages)は、Googleが2015年10月に立ち上げた、モバイルサイトの表示を高速化するためのプロジェクトです。

AMP(アンプ)と読みます。

AMPに対応したサイトでは、Googleの検索結果に表示されたリンクをクリックすると、サイトが高速で表示されます。従来のモバイルサイトに比べて、4倍の速度で表示でき、データ量も1/10に抑えられるという検証結果が出ています。

実際にAMPを体験してみよう

AMPの表示サンプルは、こちらのGoogleの記事に動画があります。

「シャープ 買収」で検索してみたところ、AMP対応の検索結果が表示されました。
※AMPはモバイルサイト限定なので、PCではなく、スマホで確認してください。「事故」などニュース性のあるキーワードで検索すると、表示されやすいです。

↓このマークが表示されている検索結果が、AMPに対応している記事です。

cap

↓「シャープ 買収」で検索すると、AMP対応の検索結果が表示されました。
cap3

↓検索結果の記事を選択してみると、一瞬でページが表示されます。
cap4

↓AMPの検索結果では、左右にスワイプするだけで、検索結果の前後の記事を見ることができます。
cap5

AMPの仕組み

AMPは、HTMLを拡張したAMP HTML、AMP HTMLをレンダリングして表示するためのAMP JS、コンテンツを配信するキャッシュサーバーの3つで成り立っています。

AMPに対応するためには、モバイルサイトをAMPで決められた仕様に則ってコーディングします。HTMLの構造は基本的なサイトと似ていますが、AMP用に拡張され、全体的にとてもシンプルになっています。また、AMP用の構造化データを含める必要があります。

JSに関しては、AMP独自のライブラリが用意されており、これを利用してAMP HTMLのレンダリングを行います。JSは、AMP JSしか認められません。JSを共通化することで、サイトごとに異なるJSを読み込み必要がなくなり、高速化に繋がります。

AMPの仕様に従って作成された記事は、Googleのクローラーが自動的に認識します。後は、Googleが独自のキャッシュ技術などを使い、検索結果に表示されたサイトを高速表示する、というのが基本的な仕組みです。

AMPに対応しているサイト

現在のところ、AMPとして検索結果に表示されるのは、基本的に時事性のあるニュース系の記事だけです。

また、AMPに対応しているサイトでも、全ての検索結果がAMPとして表示されるわけではありません。表示されるときと、表示されないときがあります。

時事性の高い検索キーワード(「事故」など)で、AMP対応ページが表示されやすいようです。

また、AMPは現在のところ、記事を表示する技術なので、サイトのトップページなどはAMPとしては表示されません。

Googleのアナウンスでは、AMPに対応しているニュースサイトとして、朝日新聞、映画.com、zakzak、THE PAGE、産経ニュース、SankeiBiz、SANSPO.COM、シネマトゥディ、日刊スポーツ、BLOGOS、毎日新聞、マイナビニュース、レスポンスの13サイトが挙げられています。

AMPは現在、ニュース記事(NewsArticl)以外に、ブログ記事(BlogPosting)用の仕様も発表されています。

AMPへの対応方針(ブログはもう少し様子見でOK)

AMPへの対応としては、現在のところ下記の方針でいいと思います。

  • ニュースサイト
    AMP対応を進める。
    常に最新のニュースを発信しているようなニュースサイトでは、AMPを早めに導入することをおすすめします。
  • ブログ
    対応はまだ必要ない。
    ブログはもう少し様子見でOKだと思います。ただし、AMPは最先端のトレンドで、すぐにブログ記事も検索結果に表示されるようになりそうです。状況が常に変化しているので、いつでも対応できるように情報を集めておきましょう。
  • 上記以外の通常のサイト
    対応はまだ必要ない。
    そもそも技術仕様が決まっていません。必要に応じて情報だけ集めておきましょう。

AMP自体も常に新しい仕様が出ている段階なので、基本的には、まだ様子見で大丈夫だと思います。

今年中にはある程度対応が進んでいくと思うので、最新の情報だけキャッチアップしておきましょう。

AMPプロジェクト公式サイト

Accelerated Mobile Pages Project
AMPプロジェクトの公式サイト。

Accelerated Mobile Pages Project Blog
AMPプロジェクトのオフィシャルブログ。最新の情報はここでチェック。

AMPの導入方法や技術情報まとめ

AMPを導入するための技術情報を紹介します。GoogleAnalyticsなどのアクセス解析ツール、DoubleClickやAdsenseなどの広告ネットワーク、有料の課金型コンテンツや購読に会員登録が必要なコンテンツにも対応できます。

基本技術情報

基本的な情報は公式サイトとGitHubにあります。

What Is AMP? | Accelerated Mobile Pages Project
AMPプロジェクトの公式サイトです。導入に必要な情報は、基本的にここに書いてあります。

AMP HTML | GitHub
GitHubに最新版が公開されています。

Accelerated Mobile Pages プロジェクトについて — 導入ガイド日本語版を本日公開しました | Google ウェブマスター向け公式ブログ
AMP 導入ガイドの日本語版ガイドラインが公開されています。数少ない日本語の公式情報です。

AMP(Accelerated Mobile Pages)ってなんで速いの。 | Qiita
AMPで高速表示する基本的な仕組みを解説しています。

検索結果デモ

Googleが公式リリース前にデモ用の検索ページを公開していました。

AMP Demo
GoogleがAMPの正式リリース前に公開していた、デモ用の検索ページ。PCではなく、スマホで確認してください。

テストツール

Googleからテストツールが公開されています。

Structured Data Testing Tool – Google Developers
AMP対応のURLを入力すると、構造化データのチェックができます。

Validate AMP Pages | Accelerated Mobile Pages Project
Chromeの拡張機能を使って、AMP対応ページのテストができます。Chromeの拡張機能を開いたら、AMP対応ページのURLの最後に「#development=1」を加えて、ページを読み込むと、Consoleにチェック結果が表示されます。

AMP error report preview in Search Console | Official Google Webmaster Central Blog
Googleサーチコンソール(旧ウェブマスターツール)でも、AMP対応ページとしてインデックスされたページ数や、エラー内容を確認できます。

Google Analyticsへの対応方法

AMP対応ページでもGoogleAnalyticsを使ったアクセス解析ができます。

Accelerated Mobile Pages (AMP) – Analytics Help
AMP対応ページで Google Analyticsを使うための要件

Adding Analytics to your AMP pages | Google Developers
AMP対応ページヘのGoogle Analyticsの導入方法

DoubleClick、Adsenseなどの広告ネットワークへの対応方法

DoubleClick、AdSenseなど20以上のネットワークが対応しています。

Integrating ad networks into AMP | Github
AMP対応ページヘの広告(Adネットワーク)の導入方法

課金型・購読型コンテンツへの対応方法

課金が必要な有料コンテンツや、会員登録が必要な購読型コンテンツにも対応しています。

AMP Publisher Sample | GitHub
課金型・購読型コンテンツへの対応方法

AMP対応のためのWordpressプラグイン

AMP対応ができるWordPressプラグインが公開されています。

AMP | WordPress Plugins
※まだリリースされたばかりで、これから改善していきますという感じです。それでも、インストールするだけである程度AMP対応ができるので、一度試してみると、AMP対応のサイトがどんな感じか分かります。
インストールしたら、記事のURLにの最後に「/amp/」をつけると、AMP対応されたページが表示されます。AMPは記事のみの機能なので、サイトトップページで試しても変わらないので気をつけてください。

AMPのこれまでの主なニュースまとめ

2015/9
Googleがモバイルサイトでは、コンテンツの表示に3秒以上かかると、多くのユーザーが閲覧を止めてしまうという記事を発表。
Speed Is Key: Optimize Your Mobile Experience | Think with Google

2015/10/7
GoogleがAMPプロジェクトを立ち上げる。初期のプロジェクトメンバーはTwitter, Pinterest, WordPress.com, Chartbeat, Parse.ly, Adobe Analytics、LinkedIn。 
Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

2016/1/20
Googleサーチコンソール(旧ウェブマスターツール)が、AMPに関する機能の提供を開始しました。AMP対応ページとしてインデックスされたページ数や、エラー内容を確認できます。
AMP error report preview in Search Console | Official Google Webmaster Central Blog

2016/1/25
AMPが20以上の広告ネットワークに対応。
AMP: WHAT ABOUT ADS? | Official Google Blog

2016/2/9
AMPが有料コンテンツや購読に会員登録を必要とするコンテンツに対応。
AMP: SUPPORTING PAYWALLS AND SUBSCRIPTIONS | Official Google Blog

2016/2/19
Google AnalyticsがAMPのサポートを開始。
アナリティクスが AMP (Accelerated Mobile Pages)のサポートを開始 | アナリティクス 日本版 公式ブログ

2016/2/25
GoogleがAMPリリースに関する公式アナウンスを発表。
モバイルウェブをもっと速く | Google Japan Blog

まとめ

AMPは間違いなく今年の注目技術です。多くのサイトで導入が進むと思われます。

特に、ニュース系サイトはすぐに導入を進めることをおすすめします。Google検索結果でトップに表示されるので、SEO対策としても必須です。

通常のブログについても導入が始まると思いますが、まだ技術的なハードルが高めなので、ブログについては簡単に導入できる方法がまとまるまで様子見で大丈夫だと思います。WordPressについてもプラグインが出ていますが、細かい設定がまだできないので、バージョンアップ待ちです。

ニュースやブログ以外の通常のサイトについては、まだ技術的な仕様が固まっていないので、情報収集をしておくだけで大丈夫でしょう。

AMPが広まることで、ユーザーのモバイル体験がまた一段と変わってきそうです。最新の情報に注意しながら、対応していきましょう。

スポンサーリンク

人気の記事

コメントを投稿する

  • Posted on 2016.02.27
  • Views 4,330