モバイルページを高速化するAMPと導入方法

これを読めば分かる「モバイル高速化ページ」のAMPとその導入方法

当初の予定より1日早く公開されたAMP（アンプ）ページ。元々、出版社の記事やニュースを、モバイル端末からでも待たせることなくスピーディーに閲覧できるようにするために開発されたAMPページですが、多くのSEOアナリスト、マーケター、広告主が注目しています。少し大げさかもしれませんが、AMPページの出現によって、今後のモバイルウェブの在り方が変わるかもしれないという事と、周りの競合他社がAMPページに対応することで、自社サイトへのAMP導入が必要になるかもしれないからだと思われます。

今回の記事では、「AMPページとは？」から、誰でもできる「AMPページ導入方法」まで、順を追って紹介していきたいと思います。6つのセクションで構成されていますので、読みたい項目だけクリックして読むことも出来ます。

  1. 劇的に表示速度を上げるAMPページ
  2. AMPページは、一体何が凄いのか？
  3. WordPressのAMP対応方法
  4. AMPページへのアナリティクス導入方法
  5. 役立つモバイル高速化ページのプラグイン
  6. AMPページのチェック方法とインデックス

1. 劇的に表示速度を上げるAMPページ (Accelerated Mobile Pages)とは？

AMP(アンプ)ページとは、Googleモバイル検索でのブラウジングをより快適にするために開発された「モバイル高速化ページ」で、従来のモバイルページより劇的に速くページ表示を可能にしたオープンソースのコードで作られたモバイルページになります。AMPページの正式名称は、「Accelerated Mobile Pages (モバイル高速化ページ)」ですが、日本のSEO業界では、AMPページと多く呼ばれています。（厳密にはアクセラレイティッド・モバイル・ページなので、「AMPページ」だとページを2回繰り返していることになるのですが、AMP(アンプ=増幅)という意味合いも込めてAMPページと総称されています。）

google検索のAMP結果

AMPプロジェクトとは？

AMPプロジェクトは、AMPページを普及させるためにGoogleが立ち上げたプロジェクト名で、モバイル端末でのインターネット利用をより快適にするために発足されました。元々は、出版社とテクノロジー企業との間で交わされていた議題（モバイルコンテンツのエコシステムの進歩）だったのが、そのままプロジェクトとして発足されました。このAMPプロジェクトには、数多くの放送局、出版社、広告社などが、ニュースサイトのフレームや広告掲載のフレームを、AMPページに対応させるために参加しました。

ベータ版モバイル検索（AMPページ閲覧用）のプレビューでは、厳選された大手メディア（BBC、産経ニュース、ニューヨーク・タイムズ、ワシントンポスト等）による、AMPページのテストランニングが行われましたが、そのプレビューの反響が大きく、世界中から数千ものメディアが、AMPプロジェクトへの参加に強い興味を示したとGoogleは伝えています。

なぜAMPプロジェクトが必要だったのか？

Google公式サイトの「Think with Google」によると、ECサイト並びに旅行サイトでは、ページの読み込みに3秒以上かかると、全体の40%の買い物客は、読み込みを待たずにサイトを離脱するという結果データーが出ました。又、Googleが引用したSOASTのリサーチによると、ページの読み込みに9.9秒かかると、離脱率が58%にもなるとの報告も出ています。（ページ表示速度3.3秒の場合は、20%の離脱率）

つまりは、コンテンツ内容の理由での離脱ではなく、ただ単純に「ページ表示速度」が遅いために無用に高まる離脱率を抑えることで、ウェブサイトのマネタイズ効果を高め、同時にモバイルユーザーのユーザビリティを向上させることが狙いになります。

2. それでは、AMPページは一体何が凄いのか？

少し前置きが長くなってしまいましたが、ここから本題であるAMPページの何が凄いかを説明していきたいと思います。

  • モバイルページを高速化させるAMPページ

    従来のモバイルページと比較すると、AMPページの読み込み速度（ページ表示速度）は、約85%速くなるとされています。つまり、ページの読み込みに4秒かかっていたのが、AMPページに切り替えるだけで、0.6秒で表示することが出来るようになります。高速化の仕組みを簡単に説明すると、Googleのクラウド上で（通常はアクセス端末のブラウザーに保存される）で、対象となるAMPページのキャッシュが保存され、そのキャッシュを直接ユーザー端末に返すことにより、これまでより4倍以上速くページの表示を可能にしました。

  • AMPページはオープンソース

    AMP HTMLは、オープンソースなので、誰でも使用が許可されています。そして、Googleモバイル検索だけでなく、TwitterもAMPページに対応しているため、AMPページのリンクが貼られたツイートをクリックすれば、一瞬でページを表示出来ます。

  • AMPページのコードはAMP HTML

    AMPページのコードは、HTMLがベースとなっているので、ある程度HTMLを理解していれば、AMP HTMLでのAMPページ制作が簡単に行えます。また、WordPressではAMPのプラグインがリリースされています。

  • 非同期のJavaScriptは使用が可能

    非同期のJavaScriptであれば使用ができます。ただし、自身が書いたJavaScriptやサードパーティー製のJavaScriptは使用することが出来ません。しかし、優先度低くロードされるiframes内では、サードパーティー製のJavaScriptの使用が可能となっていますが、レンダリングをブロックしてはいけません。

  • AMPページでの広告掲載

    AMPプロジェクトの真のゴールは、有効なモバイル広告収益の確保にあります。したがって、AMPに対応した広告ネットワークであれば、広告の掲載が可能になります。ちなみに、AdsenseはAMP対応していますので、下記のコードを広告を表示させたい場所に貼りつけるだけ。但し、あらかじめ”width”と”height”の数値を指定する必要があります。

    “data-ad-client”と”data-ad-slot”は、取得したAdsenseのコードの中に書いてあるものを入力。

  • Googleアナリティクスによるデータ集計

    AMPページのデータ集計は、Googleアナリティクスを使うことで出来ます。但し、通常のウェブページとは設定方法が異なりますので、下記の「AMP対応のGoogleアナリティクス導入方法」にて説明いたします。

3. WordPressのAMP対応方法

WordPressで投稿した記事を、全て自動で、しかも簡単にAMPページにするプラグインをご紹介します。

WordPressのAMP対応方法1

  1. まず初めに、WordPressにログインします
  2. 次に、サイドメニューからプラグインの下層にある「新規追加」をクリック
  3. 検索ボックスに、”AMP”と入力して検索を開始します
  4. 1番最初に「AMP」いうプラグインがあるので、インストール
  5. 最後に、インストールしたプラグインを有効化

これで、AMPページの対応は完了になりますが、アクセス解析などのJavaScriptも同時に省略されてしまいますので、このプラグイン内にあるファイル “single.php” を編集する必要があります。

4. AMP対応のGoogleアナリティクス導入方法

AMPページは、同期するJavaScriptの使用が出来ません。それ故、AMPページのデータ集計をするためには、従来のウェブページとは異なる仕組みで動くアナリティクスのコードの記述が必要になってきます。AMPプラグインを使用していないAMPページは、1番から3番をスキップして、4番と5番のみを参照して下さい。

  1. サイドメニューから、プラグイン下層の「プラグイン編集」をクリック
  2. 「編集するプラグインを選択:」のドロップダウンメニューから「AMP」を選択
  3. 右側に表示されている複数のファイルから、「amp/templates/single.php」をクリック
  4. head要素内に、下記のコードを貼りつける

  5. body要素内に、以下のコードを貼りつける

  6. “UA-XXXXX-Y”は、アナリティクス設定から → プロパティ → プロパティ設定 → トラッキングIDを入力。但し、GoogleはAMP用に別のトラッキングIDを作成することを推奨しています。

アナリティクスの新しいトラッキングIDの作成方法

AnalyticsのトラッキングID設定方法1

新しくトラッキングIDを作成する場合は、まずプロパティを作成する必要があります。「アナリティクス設定」ページの左から2番目にあるドロップダウンメニューの「新しいプロパティを作成」を選択し、、以下のように設定を行います。設定する項目は、「トラッキングの対象」、「ウェブサイトの名前」、「ウェブサイトの URL」、「業種」、「レポートのタイムゾーン」です。最後に「トラッキングIDを取得」ボタンを押せば、トラッキングIDが自動で発行されます。作成されたIDは、「アナリティクス設定」ページの左から2番目にあるドロップダウンメニューから確認出来ます。

AnalyticsのトラッキングID設定方法2

以上が、AMPページへのGoogleアナリティクス導入方法になります。より細かい設定をしたい方は、Google Developersを参照してみて下さい。ちなみに、AMPプラグインの更新を行うと、”single.php” に貼りつけたアナリティクスのコードが上書きされてしまいますので、AMPプラグインの更新を行ったら、再度同じ手順でコードを貼りつける必要があります。

☆★☆★☆★☆★朗報です★☆★☆★☆★☆
実は、あるプラグインをインストールすると、公式AMPプラグインの更新を行っても、再度アナリティクスコードの貼りつけをする必要がありません。とっても便利なサードパーティーのプラグインがリリースされているので紹介します。

5. PageFrogのモバイル高速化ページ専用プラグイン

WordPressのpagefrogプラグイン

先ほど触れましたが、WordPressが作成した公式「AMP」プラグインは、誰でも簡単にAMPへの対応ができますが、現時点では重大な欠点があります。それは、AMPプラグインをバージョンアップすると、アナリティクスやAdsense導入の為に編集したファイル “single.php” が上書きされてしまうため、再度編集する必要が出てくることです。そこで、お勧めしたいのが、PageFrogからリリースされた「Facebook Instant Articles & Google AMP Pages」のプラグインです。

このサードパーティーのプラグインは、公式「AMP」プラグインと連動しているため、Googleアナリティクスのようなウェブ解析ツールやAdsenseなどの広告の編集が、WordPress管理画面から直接行うことが出来ます。当然ですが、公式AMPプラグインのバージョンアップを行っても、PageFrog側のファイルは上書きされることはないので、保存した設定等も全て残ります。

しかも、それだけではありません。GoogleのAMPだけでなく、Facebookの「インスタント記事」やAppleの「News Format」のモバイル高速化ページにも対応しております。（現時点ではAppleは未対応）

それでは、PageFrogの「Facebook Instant Articles & Google AMP Pages」の設定手順を説明していきます。

モバイル高速化ページのAMPの設定

  1. WordPressのAMP対応方法の1番～3番を参照。又は、ダウンロードページに行く
  2. インストールが終わったら、プラグインを有効化させる。もし、公式AMPプラグインがまだインストールされていない場合は、公式AMPプラグインのインストールボタンが表示されるので、そこからインストールを行ってください。
  3. サイドメニューにある「Mobile Formats」をクリックして、「Google AMP HTML」の緑色の設定ボタンを押します。下の写真では既に設定が完了しているので、「Ready ✔」となっています。

    4. WordPressのpagefrogプラグイン2

  4. サイドメニューの「Mobile Formats」下層にある「Settings」をクリックして、「GOOGLE AMP HTML」の設定を以下のようにします。次に「投稿」にチェックマークを入れて、下の「Enable AMP」ボタンを押すと、これまでの記事が全てAMPページで作成されます。

    5. WordPressのpagefrogプラグイン3

    もし、特定の投稿をAMPページにしたくない場合は、WordPress投稿を編集する画面の右側にある「AMP HTML」のボックスから、✔を外して「公開」ボタンを押せば、AMPページを削除する事が出来ます。

    WordPressのpagefrogプラグイン6

  5. 「FACEBOOK INSTANT ARTICLES」をしている人は、AMPと同様に設定して下さい。（上級者向け：固定ページのモバイルページ高速化は、マニュアルで作成すことをお勧めします）
  6. 最後に、「Save All Settings」ボタンを押して、設定完了です。

ウェブ解析ツールの設定（Googleアナリティクス）

Googleアナリティクスだけでなく、その他のウェブ解析ツールも、PageFrongにて設定が可能です。

WordPressのpagefrogプラグイン4

  1. 「Mobile Formats」下層にある「Analytics」をクリックして、「GOOGLE ANALYTICS」アイコンを押します。
  2. 「Sign in with Google」ボタンをクリックして、このプラグインのGoogleアナリティクスへのアクセス許可をします。
  3. ポップアップウィンドウが表示されるので、その中から該当のプロパティ名（下の写真ではAMP）の横にある「Choose Site」ボタンをクリックします。下の写真では、既に選択されているので、表示されているボタンが異なります。どのプロパティか分からないときは、プロパティの名前の下に表示されているトラッキングIDを参照して下さい。

    4. WordPressのpagefrogプラグイン5

  4. プロパティを選んだら、緑色の「Enable Integration」ボタンを押して完了です。（上の写真では、すでに有効になっているので黄色のボタンになっています）

この「Facebook Instant Articles & Google AMP Pages by PageFrog」プラグインには、その他に設定できる項目が「Styling（スタイル）」と「Ads（広告）」があります。「Styling」では、PNGのロゴを入れたり、フォントの種類や色を選べます。「Ads」では、「Sign in with Google」ボタンを押して、このPageFrogプラグインにAdsenseへのアクセス許可することで、Adsenseの広告掲載も可能です。（アナリティクス同様に、事前にAMPページ用「広告ユニット」を作成して下さい）

6. AMPページが正しく作成されているかのチェックとインデックス

  • Google Chromeのデベロッパーツールによる検証

    ChromeにてAMPページを開いて、ULRの最後に「#development=1」と入力してページをロードします。例えばyourdomain.com/news/article01/amp/の場合だと、yourdomain.com/news/article01/amp/#development=1となります。そして、Windowsのショートカットキーでは（Ctrl + Shift + i）、Macでは（Cmd + Opt + i）を同時に押して、デベロッパーツールを立ち上げます。次に「Console」をクリックして、「Powered by AMP ⚡ HTML – Version xxxxxxxxxxxxx」の後に、「AMP validation successful」と表示されていればOKです。エラーがある場合は、赤字でエラーの個所が表示されます。

    デベロッパーツールによるAMPのチェック方法

  • Google Developerによる構造化データの検証

    Google Developerにある構造化データ テストツールにて、AMPページの構造化データのチェックが出来ます。まずは、構造化データ テストツールを開き、「Fetch URL」をクリックします。次に対象のAMPページのURLを入力して、赤い「FETCH＆VALIDATE」ボタンを押すだけで、適切に認識されているか確認が出来ます。

    構造化データ テストツールによる構造化データのチェック方法

  • AMPページのインデックスを促す方法

    AMPページがGoogleにクロールされるためには、通常のウェブページ（非AMPページ）に、下のコード（1段目と2段目）をhead要素に貼りつける必要があります。Googlebotが、ウェブページをクロールした時に、以下のコードを確認できれば、AMPページも一緒にクロールする仕組みになっています。（AMPページには、1段目のみのカノニカルタグの記述が必要です）

長くなってしまいましたが、以上が「モバイルページを高速化するAMPと導入方法」になります。決して難しくはありませんが、設定する項目が多いのと、公式AMPプラグインでは、ウェブページのコーディングにより、エラーになる場合もあります。初めでも触れましたが、AMPページはインターネットで情報を頻繁に発信する出版社などは、利用する価値は高いですが、全てのサイトに当てはまるわけではないので、毎日ブログ更新を行わないのであれば、AMPに対応させる必要はないかもしれません。

役立ったら「シェア」お願いします！「TOP」ニュースに戻る
RSS
EMAIL
FACEBOOK
GOOGLE
https://www.dmarketing.jp/news/what-is-accelerated-mobile-pages/
TWITTER
follow us in feedly
このエントリーをはてなブックマークに追加

コメントする

▼▼▼▼ 「関連のある記事」 ▼▼▼▼
ebayがモバイルページを高速化するAMPを採用のサムネイル
2016年のSEO対策：上位表示するための8つ「On-page SEO要因」のサムネイル
すぐ読める10秒ネタ
Googleモバイル検索がAMPのサポート開始を2016年2月24日に決定のサムネイル
▽▽▽▽ 同カテゴリー記事 ▽▽▽▽