WordPressにAMPを導入した結果(AMPプラグイン設定とエラー対処について)

2019-11-19
プラグイン

Google Adsensによる「AMP収益最適化のためのオンライン放送」を受講しました。噛み砕くと「AMPを導入してページ速度を向上させ、ユーザーを増やそう(検索上位を狙おう)」ということです。

AMPとはモバイルページの速度を速くするフレームワーク

AMP(Accelerated Mobile Pages)とは、直訳の通り「モバイルページの速度を上げる」フレームワークです。Webサイトのプログラムなどを除去し、シンプルな記事に変換して表示させることで、表示にかかる速度を速くします。その表示速度は1秒以下と言われており、モバイルユーザーの離脱を防ぐために導入する企業サイトが年々増えてきています。

さらに、GoogleやYahoo、Twitterといった大きなプラットフォームでは既にモバイルフレンドリーなページを優先的に上位へ表示させるシステムを構築しているため、AMPの導入によって表示速度が上がれば結果的に検索で上位表示されることにより、ユーザー数の増加が期待できます。

AMP化されているページを見分ける方法は、タイトル横にカミナリマークがついているかいないか。このカミナリマークはAMPマークです。

沢尻エリカ、MDMA入手先を供述

ニュース系は速度が命なので、ほとんどのサイトでAMPを導入しています。

メリットしかないように思えるAMPですが、例えばJavascriptなどのプログラムを多く使っているWebサイトなどでは、デザインや表示画面が崩れてしまうというデメリットもあります。これは、AMPのフレームワークがプログラムを除去してしまうからです。今後Webサイトを制作する側は、AMPによって表示が崩れないシステムを導入することが必須になりそうです。(GoogleはAMP導入を必須化してくると予想されます)

AMPを導入するメリット(速度を速くすると具体的に何が得なのか)

Googleによると、ページの表示速度が遅いことによる弊害を以下のように指摘しています。

  • 53%の訪問者はページの表示が3秒遅れるだけで離脱する
  • 79%のユーザーはパフォーマンスが悪いサイトには戻らない
  • 20%ものコンバージョン率が1秒表示が遅れるごとに減る
  • ページを読みこむスピードが10秒に近づくにつれ、離脱率は40%まで上がる

結果、視聴率を上げるなら速度は重要ということがわかったそうです。上記をまとめると、AMPを導入した方がユーザーが増えやすいサイトは下記の通りとなります。

  • モバイルユーザーの獲得を多く狙うサイト
  • ニュース、報道、SNSなど更新速度が重要なサイト
  • ページ読み込み速度が遅く、モバイルユーザーの離脱率が目立つサイト

当てはまる場合は、AMPの導入をおすすめいたします。Wordpressをお使いの方には、プラグインで簡単にAMPを導入することができます。

WordPressのAMPプラグインの導入と設定方法

私はyStandardという無料テーマを使用しているので、テーマが違う人は少し設定が変わるかもしれませんが、おそらく大きな違いはないと思います。

まずはプラグインの新規追加画面で「AMP」と検索します。この青いカミナリマークが目印です。これがWordpressの公式プラグインになります。

インストール後、有効化したら設定に入ります。

AMPプラグインの設定方法

WordPressのメニュー欄から「AMP > General」を選択。次に「Experiences」という項目があるので「Website」にチェックを入れます。その下の「Website Mode」は「Transitional」を選んでいますが、これは私が使っているテーマ(yStandard)推奨なので、各テーマに合ったものを選んでください。各項目の内容はこのようになっています。

  • 「Transitional」…AMPサイトと通常のサイトの両方が残る
  • 「Standard」…サイト全てをAMPサイトにする
  • 「Reader」…投稿ページだけをAMPサイトにする

yStandardをお使いの方は「外観 > カスタマイズ > AMP設定 > AMP有効化設定 >【β機能】AMPプラグイン連携機能を有効化」にチェックを入れます。(「AMP機能を有効化」のチェックは外す)

詳しい設定方法や説明はyStandard公式サイトに載っています。

AMPプラグインでGoogleアナリティクスを設定する

AMPプラグイン側でアナリティクスの設定をして、AMPサイトの解析を追加しましょう。Wordpressメニューの「AMP > Analytics」へ移動します。

「Type」枠には「googleanalytics」と入れ(ここに違う名前を入れるとカウントされない)、「ID」枠はそのままに。下の「JSON Configuration」にこのコードをペーストします。

{
     "vars": {
         "account": "UA-自分のアナリティクストラッキングID"
     },
     "triggers": {
         "trackPageview": {
             "on": "visible",
             "request": "pageview"
         }
     }
 }

「自分のアナリティクストラッキングID」という項目には自分のIDを入れてください。
(自分のアナリティクストラッキングIDは「アナリティクス管理画面 > 管理 > プロパティ > プロパティ設定」で確認できます)

これでSaveをすれば完成。自然とAMPページが生成され、検索結果にも反映されるようになります。

AMPページの確認方法

AMPの設定が終われば、自分のサイトがAMP化されているか確認しましょう。確認したいサイトやページを表示させ、URLの一番後ろに「amp」をつけます。

例:http://officehojo.com/blog/2019/11/18/newyearscard2020/amp

すると、ちょっとシンプルになった自分のサイトが表示されるはずです。表示されなければAMP化は失敗してるのかもしれません。

その他、Google Sefarch ConsoleでもampページのURLを入力してチェックすることができます。ここでもURLの最後に/ampをつけましょう。

AMPにエラーが出たときにチェックしたい「AMP Validator」

AMPプラグインには、エラーをお知らせしてくれる「Validator URLs」と「Error Index」という項目があります。もしAMPページにエラーが出ている場合はここで確認することができます。

ここで指摘されているエラーは「AMP Validator」でも検証ができるようです。詳しい使い方は、手軽にAMPエラーをチェックする方法(Chrome拡張「AMP Validator」の使い方)というサイトが参考になりました。

プラグインの更新でAMPエラーが増えた実例

2020年1月2日の更新により、なぜかAMPページがクローラーに検索されないようになってしまいました。指摘されているのは使用しているテーマ「yStandard」と、yStandardの公式プラグインの「yStandard Blocks」、そしてダウンロードボタンを設置できる「Simple Download Monitor」です。ただ、この期間にテーマ(yStandard)の更新はなかったので、おそらくプラグインじゃないかと思っています。

確認のため、yStandardのWebサイトに問い合わせてみたところ、テーマによるエラーではないことは確定しました。今はこの2つのプラグインを停止し、検証を行っている状況です。

サーチコンソールで指摘されているエラー:
1. タグ「noscript enclosure for boilerplate」がドキュメントで複数回使用されています。
2. 指定できるのは、amp-boilerplate と amp-custom の「style」タグのみです(ドキュメント ヘッドにのみ指定できます)。

WordPressのAMPエラーでアドセンス収益が下がった

AMPエラーが出た時、PV数やユーザー数に変化はなかったのですが、大きな変化が出たのがアドセンスの収益です。具体的には自動広告の表示回数が半分以上に下がりました。

今まで1日5000回だった広告の表示回数が2000回にまで減り、アドセンスのヘルプに問い合わせてみたら自動広告部分が爆減しているとこと。とりあえず手動広告を増やす方向に切り替え、3000回にまで回復しましたが、金額で言うと1日1000円〜2500円まで上がっていた日収が、100円〜300円にまで下がりました。恐るべし、プラグインのエラー弊害。

検証後、エラーが改善されました

エラーで指摘されていた「yStandard Blocks」と「Simple Download Monitor」のプラグインを停止後、元の状態に戻りました!ということは、ダウンロードボタンを今後どうするかということになりますね。downloadタグで追加する方法もありますが、HTML5はSafariの対応が追いついていないそうなので、もう少し考えます。

AMP化した後の速度比較(ちょっと早くなった)

左が通常ページのモバイルスピード、右がAMP化したページのモバイルスピード

25が酷すぎるだけに、67でもかなりの改善です!iphoneで確認してみましたが、体感はかなり早くなった。

アドセンスの自動広告はAMP対応済み

2019年秋頃のアップデートにより、AMP化されたアドセンス自動広告。広告設定画面でAMPをオンにしていれば勝手にAMP広告に挿しかわるまで進化しました。

通常のページには通常の広告、AMPページにはAMP広告といった認識機能がついているので、あれやこれやいじるよりも自動広告にお任せした方が楽だしいいですよ。

ただし、前にも書いた通り、エラーが出ると一発で下がってしまうのでご注意ください。

アドセンスの導入と詳細についてはこちら→Googleアドセンスの登録と審査、収益について

モバイルバージョンを終了