モバイルページをAMP対応し高速表示させるプラグイン「AMP」

本ブログを運営し、ある時期から急にページビューがガクンと減りました。

「一体何が起こったんだ???」と、ブログを運営していて年末なら訪問者が若干減ることはあってもここまで極端に下がったことはありませんでした。

理由がわからずあれこれ調べてたらあることに気づいたのです。

 

グーグルアナリティクスで本ブログのページビューの動向を確認したところ、訪問者の「デバイス別セッション数」が普段ならだいたい【デスクトップ:50%、モバイル40%、タブレット10%】くらいでした。

ただページビューが減ったあたりの日付からはモバイルが5%前後に極端に減っていたのです。

このデータはあくまで「検索に使用されたデバイスの割合」ではありますが明らかにモバイルユーザーが減ったのは何か原因があると思いました。

「本当に何が起こったんだ???」
と、あれこれ調べてみるとおそらくワードプレスのプラグイン「AMP」を知らないうちに有効にしてたのではないか、という結論に辿り着きました。

AMP(アンプ)とは

AMP(Accelerated Mobile Pages)とはモバイルページの表示を高速化させるためにGoogleが推進している手法です。

モバイルページをAMP化することにより従来のページが簡略化され、表示されるまでの高速化が実現できます。

なおAMP化されたページはモバイル上では通常のURLの最後に「/amp」などamp用のパスが追加されます。

AMP化されたページの状態

ワードプレスプラグインAMP対応
それでは従来のページとAMP化されたモバイルのページを比較してみます。

スマートフォンからGoogleの検索で「あまゆい レビュ―」と入力すると本ブログのゲーム批評「天結いキャッスルマイスター」のタイトルが1ページ目に表示されます。(2019年2月現在)

現在は既にAMP対応しているのでアドレスの前に稲妻マークがついてます。

 

ワードプレスプラグインAMP対応https://takarikaruga.com/2017/12/13/amayui/

こちらはAMP化される以前のモバイルページの画面です。
所持してるスマホ画面と同サイズにはめこみ合成で検証しています。

この時はファーストビューでは記事がまるで見えませんでした。
ランダムに表示されるアドセンス広告の大きさによっては一番下の画像も隠れそうです。

 

ワードプレスプラグインAMP対応https://takarikaruga.com/2017/12/13/amayui/amp/

こちらが現在のAMP化されたモバイルページのスクリーンショットです。
トップ画像が非表示になり上が空いた分、随分すっきりした印象です。

その分、下の目次まで表示されているので記事を読んでいただける可能性はいくらか高まります。

そして強調したい「2017年に~」のhタグの文言も辛うじて表示されてます。
(※表示範囲は所持してるスマホの画面サイズによります。)

 

ワードプレスプラグインAMP対応ただページ全体を見渡すとCSSのデザインがはずれ、かなりシンプルな仕上がりとなってます。

AMPの特徴

・従来のページより高速表示が可能になる

・AMPのページのURLは末尾に「/amp」などのパスが追記される・CSSなどでカスタマイズされたデザインははずれ、シンプルなページが表示される

・設定をしてもすぐには反映されない(従来のインデックス同様、クローラーの巡回待ちと思われる)

・AMP化されたページの閲覧記録はグーグルアナリティクスにはそのままでは反映されない(対処可能)

・グーグルアドセンスの広告も表示されなくなる(対処可能)

・関連記事やSNSシェアなど一部のプラグインの機能もはずれる(対処可能)

・従来のアフィリエイト広告はASP側でAMP用の広告コードを用意してるものもある

 

AMP対応することでSEOへの問題点は?

Googleは最近の傾向でモバイルページの閲覧時でも見やすく使い勝手のいい「モバイルユーザビリティ」のページを評価して検索表示を優先させてるというのは有名な話です。

一昔に比べ、スマートフォンの普及や進化なども早いため、スマホユーザーに向けたページ作りというのが重要になってきます。

 

ただこの「モバイルページのAMP化」は「モバイルユーザビリティ」とは全く別の話で、Googleも「サイトをAMP化しないからといって検索表示が下がるわけではない」と公言してます。

例外として「ユーザーに本当に遅い体験を提供しているようなページについてのみ影響はする」とも言っています。

つまり元々極端に重いページでなければ直接的にはSEOにはほとんど関係のない話になります。

ただ、一方では別の見解があります。

 

・AMP化しないページは表示されるまでに時間がかかる

・表示に時間がかかると途中で離脱されてしまう恐れがある

・離脱されるということは1セッションあたりのユーザーの滞在時間が減る

・滞在時間の少ないページは評価が下がり、結果的に検索表示に不利になる

 

…厄介な話ですね。
直接的に関係なくてもユーザー動向次第で結果的にSEOに影響がでるのではないかということです。

 

AMPスマホの表示

一つ言えるのはAMP化を適用するということは、これらのことを踏まえた上で、最終的に自分で判断するしかないということです。

今現在は緊急に急いで対応する必要はないように思えますが、Googleが言うところの「サイトをAMP化しないことで検索表示が下がるわけではない」という話もいつまで通用することかわかりません。

私がグーグルアドセンスの審査に出した時はちょうど審査基準が改変された時期で、ネット上の合格基準の情報はひと昔前の話ばかりでほとんど役に立ちませんでした…。

ご存知のようにYoutubeの収益化の条件も短い期間で次々に審査基準が厳しくなっていき、最近では某有名ユーチューバーもアカウント停止されたという話もあります。

それまで問題がなかったことでも近い将来にはどうなってるかわかりません。

 

つまり冒頭の私の失敗はワードプレスの使用時にプラグインのアップデートなどを手動で行い、いつの間にかインストールされてた「AMP」というプラグインを知らないうちに有効化していました。

その影響でモバイルページが次々と「/amp」が末尾につくAMP対応ページとなり、それが優先して表示されるようになってた為、設定してないグーグルアナリティクスには反映されてなかったのです。

これは推測ですが間違いないと思ってます。(実際、ここを対処したことでめでたく解決してます。)

 

ブラグイン「AMP」の設定方法

ワードプレスをご使用されてる方はプラグイン「AMP」を利用することでモバイルページを簡単にAMP化させることができます。

それでは以下の手順で設定方法をお伝えします。

インストールと設定

ワードプレスプラグインAMP対応設定まずはワードプレス管理メニューの「プラグイン」→「新規追加」で「AMP」と入力して検索をします。

すると上記のようなAMPのプラグインが表示されますのでインストールして「有効」にしてください。

なお都合によりAMP化をやめる場合はここを「無効」にするだけで元に戻ります。

・・・・AMP対応の設定は以上です。
これだけで記事ページが順次AMP化されていきます。

※有効も無効も検索表示に反映されるまでに数日かかる場合があります

 

ワードプレスプラグインAMP対応設定なお管理メニューに新たに追加された「AMP」→「General」ではさらに細かい設定ができます。

 

・Template Mode
AMPページのスタイルを選択できます。
Paired:アクティブなテーマに沿った最適なAMPページを生成します。
Classic:基本的なデザインでシンプルなAMPページを生成します。

私はデフォルトのClassicにしました。
Pariredが良さそうな気もしましたが使用しているテーマによって大きく左右されて別の問題も発生しそうと思いましたので。

AMP化するならシンプルで、と割り切りました。

 

・Supported Templates
AMPを適用させる対象をチェックします。「投稿(記事)」ページは必須です。

なおこの固定ページのチェックは入れてもそのままでは反映されません。
別途、「Facebook Instant Articles & Google AMP Pages by PageFrog」などのプラグインを入れることにより固定ページもAMP対応ができるようになります。

プラグイン「AMP」に関する問題点

インストールして有効化するだけでAMPページが生成されるので非常に便利なプラグインですが、使用してみて気になったところをいくつか挙げます。

このAMP化のプラグイン自体、まだ不安定な要素があるようです。

 

・AMP化されるページとされないページがある
順番は定かではありませんが、順次クローラーが巡回して生成されていきます。
なかなか対応されなかったページも数日後にはしっかりと対応されてました。どうしても反映されない場合は一度プラグインを無効にしてから再度有効にするという情報もあります。
明確な効果は確認不可能ですが試してみてはいかがかと思います。
・サーチコンソールにエラー情報が届くようになる
同じようなページの作り方でも「なぜこのページだけが?」という感じて特定のページにエラーが発生することがあります。
ただサーチコンソールは同じような作りでもエラーが出るページと出ないページがあるのはAMPに限った話ではないので私は深くは考えません。
固有の問題ならなおさら探るのはそれなりに手間と時間がかかると思われます。
・レイアウト崩れや予期しない不便が生じる
これはAMPプラグインだけの問題か定かではありません。
使用してるテーマや作り方は十人十色ですのでSSL化同様、インストールしてる他のプラグインとの相性含めやってみないとわからないところはあります。
こちらも固有の問題の場合はそれなりに労力が必要になります。
・グーグルアナリティクスにAMPページが反映されない
これはプラグインの問題ではありません。
私が今回AMP化に至った原因です。

AMP化されたことでURLの末尾に「/amp」などが追加されることで「別のページ」として扱われるのでグーグルアナリティクスには再度、設定する必要があります。
方法は次に記載します。

グーグルアナリティクスにAMPページを表示させる方法(2019年2月現在)

ワードプレスプラグインAMP対応グーグルアナリティクスの設定まずはグーグルアナリティクスの管理画面から「トラッキング情報」→「トラッキングコード」を選択します。

トラッキングIDが表示されるので「UA-XXXXXXXXX-X」のIDをメモ帳などにコピーしておいてください。

 

ワードプレスプラグインAMP対応グーグルアナリティクスの設定続いてワードプレス管理メニューに新たに追加された「AMP」→「Analytics」を選択します。

「Type」に「googleanalytics」と入力します。

「JSON Configuration」の空欄に以下のコードを貼り付けます。

 

{
“vars”: {
“account”: “UA-●●●●●●●●●”
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}

●の部分には先ほど控えておいたUAから始まるトラッキングIDを貼り付ます。

最後に下の「Save」をクリックして設定完了です。

 

※ネット上で今回のようにAMPプラグインのアナリティクス設定をする際、ブラグイン編集を紹介してる操作を多く見かけます。
ただこの操作は指定ファイルを探す手間がかかるのとphpファイルを直接いじる危険性があり、恐らく情報が古いと思われます。(実際プラグインインストール時のアイコンも違いましたし…。)
私は今回の手順だけで設定できました。

 

ワードプレスプラグインAMP対応グーグルアナリティクスの設定設定が成功するとグーグルアナリティクスに徐々に閲覧された「/amp」付きのURLが表示されるようになります。
「/amp」が付いてないのはPCの方です。

試しにリアルタイムで自分のスマホからAMPページを閲覧してる時にアナリティクス上でカウントされているか確認してみてください。

 

AMP対応の方法は以上になりますがいかがでしたでしょうか?
プラグインをインストールするだけなのでAMP化自体はそんなに難しいことではありません。
最悪、無効にすれば元に戻すこともできます。

ただデザインや一部機能が制限されるのでいざやってみると満足できない表示になってしまうこともあるかもしれません。

その時は「モバイル表示の高速化」と「デザイン、機能性」を天秤にかけて最終的によくご自身で判断して試してみてください。
(簡単な色の設定程度は管理画面でも行えます。)

 

なおAMP化するとグーグルアドセンスの広告も消えてしまいますが新たにAMP用の広告ユニットを作成して指定されたファイルを書き換えれば表示させることができます。
詳細は下記の内容をご覧ください。

 

AMP対応したページにグーグルアドセンスの広告を表示させる方法(自動広告も対応)

AMP対応したページにグーグルアドセンスの広告を表示させる方法モバイルページにおいて高速表示を実現できるAMP化はGoogleも推奨していますが、設置したグーグルアドセンスの広告が表示されなくなることが問題です。
そこで今回ご紹介する手順に沿って進めばAMPでも広告を表示させることができるようになります。(19/03/23)
記事を読む

 

それにしてもGoogleが推奨するAMP化でGoogleの広告を表示させなくしてしまうというのも変な話ですね(苦笑)。

<2019年3月10日追記>
お伝えした通り、私は知らない内にずっとAMPを設定していましたが、今では「/amp」のAMP対応したスマホページもきちんとグーグルアナリティクスに反映されてます。
 
ページビューは戻りつつある、というよりもAMP適用前の時期より一段階上がってる感じがします。直接的な効果は断定できませんが、少なくともAMPを設定したことによってページビューが下がったというのはなさそうです。

スマホページの訪問者の滞在時間も全体的に増えてる気がします。
 
やはりデザインに凝ったページよりシンプルで軽いページの方が好まれると実感しました。

<2019年7月24日追記>
サイトにグーグルアドセンスの広告を設置してる方は、AMPにもアドセンス広告を表示させることをおススメします。
方法は上のリンク先からご覧ください。同じ記事でもPCよりAMPページの方が訪問者が多い日がありますし、モバイルの方が広告が目立つためかアドセンス広告のクリック率が比較的高いです。
 
AMP化して広告が表示されなくなったままじゃ本当にもったいないので必ず設定しましょう。

 

 

常時SSL化の流れと注意点と修正方法について説明します

常時ssl化運営するサイトのセキュリティを高めた常時SSL化をGoogleは推奨しています。
今回はSSL化するにあたっての流れから事前の注意点や問題の修正の仕方などを説明させていただきます。(18/07/29)
記事を読む

ザ・トール(THE THOR)はSEOに強くアフィリエイトに最適なワードプレスの優良テーマ

ワードプレスのテーマ ザ・トール hte thor「ザ・トール(THE THOR)」は、SEO対策に特化した検査上位表示に有利なワードプレスのテーマです。
本来はプラグインをインストールしなければいけない機能なども豊富に標準で搭載し、アフィリエイトにも便利なツールが用意されています。(19/010/27)
記事を読む


考察TOPへ
HOMEへ

スポンサーリンク
>ザ・トールはアフィリエイトサイトの強力な味方となる多機能を搭載したワードプレステーマ

ザ・トールはアフィリエイトサイトの強力な味方となる多機能を搭載したワードプレステーマ

【THE THOR(ザ・トール)】は本来プラグインが必要となる機能の多くを標準搭載しているワードプレステーマです。さらに検索エンジンから評価されやすい内部構造を追求し、収益・集客にとことんこだわり多くのアフィリエイターに愛用されています。

CTR IMG