WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

WordPressサイトの個別投稿をAMP対応にする意味や意義、対応させた後どうなるのか?の検証

公開日:2019(令和元)年12月29日/最終更新日:

, , ,
AMP対応できているときの画面



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

2016年にネット上のページをスマホなどモバイル環境で高速表示させよう!で発足したAMP化プロジェクト。新しい取り組みだからと様子を見ていましたが、もう3年近くになるんですね。

今後も続いていくみたいだし、それじゃあそろそろやってみますか!でも・・・何だかネットで検索すると賛否両論・・・大丈夫かなぁ・・でまずはテストサイト、次にそれほどアクセスのないサイト(要するに何か影響が出てもダメージが少ないサイト)から始めてみました。

WordPressのサイトをAMP対応にするには

  1. AMP対応させるためのプラグインを使う
  2. AMP対応のテーマを使う
  3. 自力でAMP対応させる

のいずれか。私の場合はプラグイン使用と自力の両方を行いました。

印象としては「まーーーーーめんどくさい!!」これに尽きます。

そして、サイトごとにフロントエンド表示で使っているプラグインや独自機能が違うので、単にプラグインを有効化してもAMP対応のページにはなりませんし、これはAMP対応テーマでも同じ。エラーが出たら特定して修正して・・というのが何等かのカスタマイズをしてしまった?WordPressサイトでは必ず必要です。

それでも自力対応させるためにいろいろ試行錯誤した後でAMP対応テーマやAMP対応のためのプラグインのコードを覗いてみると、いかにいろいろなケースにも対応させよう!!という努力が伝わってきます。

それ位WordPressをAMPに対応させるのは「まーーーーーめんどくさい」んです。

このことから、多分ネガティブ思考の方々は

  • プラグイン有効化したのにAMP対応にならんかった
  • AMP対応テーマだというので高価なテーマ買ったのにできんかった
  • AMP対応にしたけど何がどう変わったのかがわからん
  • 他のネガティブ思考のページを見てAMP対応をやめた

のだと個人的には推察します。理由は前述した通り、そのサイトの状況に合わせて修正をする能力が必要だからです。現段階ではプラグインやテーマはそれらのフィードバックを受けて対応できるように、また、汎用でないものはスルーしている状況でしょうから自力で微調整していくしかないでしょう。

ただ間違いないことは、AMP対応にすることで本当にページは瞬速で開くようになるということです。今までのレスポンシブ表示なんか使えなーーーい!とはっきり認識できる位すごいです。

私の場合、最初はプラグインで実装してエラーにいろいろ対処するうちに、こんなに修正がいるなら自力で行っても一緒なんじゃないの??ということで、ha-Basicという自作テーマに対して自力でAMP対応させました(テスト段階なのでこのサイトはこの記事の公開段階ではまだやってません・・)。

前述したようにテストサイト→まあどうでもいいサイト??と進め、ある程度完成してきています。

が、素朴な疑問、AMP対応になると何がどう変わるんだ??というのが湧いてきました。

確かにURL末尾に「?amp=1」を付けるとAMP対応のページは表示されますけど、だから何??AMP対応した方、不思議に思いませんでしたか??

AMP対応(AMP化)というキーワードでいろいろな参考ページを見させていただきましたが、どれもページの表示がされるまでは書かれていたものの、その後どうなる?というのは見つけられませんでした。

そこで、AMP対応をしたページがその後どうなるのか?どういうふるまいをするのか?を検証して記事にしました。私と同じAMP対応初心者の方で、そこを疑問に思った方の参考になれば幸いです。

むしろ、それが分かってないのに単純に表示速度とSEO効果がある?という言葉だけに心躍ってAMP化すると後悔することもあるかも知れません・・・。

前置きが長くなりました。それではここからが本題です。

AMPページが表示されるまでの流れ

ここではWordPressサイトをAMP対応にするという技術的なことについては割愛し、その後の流れを紹介します。AMP対応にする手順や苦労話(プラグインを使用した例)は

で紹介していますし、巷にいろいろな記事がありますので参考にしてください。

AMP対応させた後どういうことが起こるのかを簡単に紹介すると

  • Googleのモバイルクローラーが巡回してきて、AMPページとしてインデックス(登録していく)
  • インデックスされたページはGoogle検索上で通常と同じように検索結果に表示される
  • クリックされるとGoogleにキャッシュされたページが表示される

というのが基本的な流れになります。

つまり巷でいう「AMP化」というのはこれを総合したものと思慮します。

具体的に1つ1つの事柄について確認方法や動作を説明していきますね。

WordPressサイトの個別投稿をAMP対応にする意味や意義、対応させた後どうなるのか?の検証|Knowledge Base

まずGoogleにインデックスされても誰も何も教えてくれません(笑)。AMPページとしてインデックスされたかどうかを確認するには「Search Console」で調べる必要があります(↓画面参照)。

これは「あ、このページはAMP対応しているんだ」→「そのページにエラーはない?」→「大丈夫みたいだからモバイル検索に反映(インデックス)しよう」とGoogleのクローラーが巡回したときに自動判別されて登録されていきます。

どの位の時間で登録されていくかはクローラーの巡回頻度や重要度などによってバラバラですから焦っても仕方ありませんので気長に待ちましょう。

さらっと書きましたが、いくら「AMP対応ページありまっせ!」と言ったところで、クローラーがページのチェックをしてエラーがあるものはスルーされますのでご注意ください。

次にインデックスが終わっても、Googleのモバイル検索画面上ではあまり違いがありません(⚡マークが出るという話ですが、私が確認した限りでは他と変わらない気がします・・)。

でも・・・インデックスされた=Google内にページがキャッシュ(保存)されたということになりますので、検索結果からその記事をタップすると、爆速でページが表示されます(つまりキャッシュされたページが表示されます)。

1例として私が作ったけど半ば放置している園芸関係の子サイトでは
観葉植物を水栽培から土栽培へ変更させる方法
という記事が最初にインデックスされました。AMP対応から1日程度かかったと思います。この園芸サイトの中では一番よく見られているページですので最初にインデックスされたのだと推察されます。

試してみたい方はスマホなどのモバイル環境か、デベロッパーツールでモバイル表示にした後のGoogle検索で「観葉植物を水栽培から土栽培へ変更させる方法」(タイトルそのまま)で検索いただくとトップに表示されます(2019年12月29日現在)ので実際にやってみてください。

ちなみにデベロッパーツールでの検索結果がこちら

WordPressサイトの個別投稿をAMP対応にする意味や意義、対応させた後どうなるのか?の検証|Knowledge Base

そして記事をタップした後のページがこちら

WordPressサイトの個別投稿をAMP対応にする意味や意義、対応させた後どうなるのか?の検証|Knowledge Base

通常のレスポンシブページがこちら

WordPressサイトの個別投稿をAMP対応にする意味や意義、対応させた後どうなるのか?の検証|Knowledge Base

ね、インデックスされることでモバイル検索結果からタップするときちんとAMP対応したページが表示されるんです。


これがWordPressサイトをAMP対応した後どうなるのか?という流れになります。

ついでに上記ページでURLの末尾に「?amp=1」を追加する、しないでAMPページとレスポンシブ表示のページの速度差を実際に確認いただくのもいいでしょう。本当に雲泥の差ですから・・・。

ただ1つ懸念があるとすればURLがGoogleのアドレスになること。

https://www.google.co.jp/amp/s/AMPページのURL

こんな風になります。これを見て訪問者の方が勝手に別のページにリダイレクトされた!!としてアクセス数が減ったというような記事が多数あります。作り手からしたら「AMPなんだから仕方ない」と思うでしょうけど、普通の方はそんなこと知らないのですから当然といえば当然。現在この件についてはGoogleさん側でもどうするか検討中のようです。

また、検索結果からAMPページを表示する流れについてはGoogleモバイル検索のみが対応しており、他の検索エンジンでは反映されませんから、そうしたこともAMP対応したのに効果的でないと判断される材料になっているようです。調べたところ、Yahooが最近AMPページの検索結果表示を行うべく調整を進めているようです。これが他の検索エンジンにも広がれば・・という過程であることには違いないでしょう。ですから、まだスタンダードになってない段階でせっかくしたAMP対応をやめてしまうのは非常にもったいないと感じます。

インデックス前のページはどうなるの?

ここまで読んで疑問が湧きますよね(湧かない)?AMPに対応しているページかどうかはURLの末尾に「/?amp=1」や「/amp」をつけて表示されるかで確認できるのはAMP対応を試みた方なら100%ご存知のハズ。
※どこに何を加えるかはAMP対応の仕様によります

そして、先ほど紹介したように、インデックスされたページで、Googleのモバイル検索結果からタップされた場合のみがAMPページとして表示されます。つまりURLの末尾に何も加えなければ、インデックスされる前のページはレスポンシブ表示のまま(表示速度が遅いまま)で表示されることになります。

せっかく全部のページがAMP対応なのにもったいない!!と考えた場合、理論的にはインデックスされているかどうかに関わらず、ページはもうあるのだから、すべて「/?amp=1」や「/amp」を付けたページにてしまうことでインデックス前でも高速表示できる(常時AMP対応した画面を表示)ようになります。が、諸所に問題や課題があります(詳しくは語りません)ので自然に任せるのが一番でしょう。

ついでに、過去にAMPページとしてインデックスされたページで不備があり、AMP対応でなくなってしまったものはどうなるのか?ですが、Googleにキャッシュが残っている期間は一瞬残念な画面(一瞬なのでスクショは撮れませんでした・・・)が表示され、レスポンシブ表示に切り替わります。

WordPressサイトをAMP対応にした後気を付けること

AMP対応ページかどうかの判断基準は非常に厳しいものがあります(できるだけ簡素なページにして表示を高速化することが目的ですから当然と言えば当然)。そして、WordPressの表示に関わる機能やプラグインなどではまだまだ未対応のものがありますので、AMP対応後も以下の点に注意が必要です。

機能追加時には動作確認をしっかりすること

AMPの基準に適合しているかは最終的に表示されるHTMLでのみ判断されます。つまり訪問者に表示する画面ということになります。

WordPressの機能追加で使うプラグインの中には表示画面にいろいろな変化を加えたりするものが数多くありますから、そうしたものを追加した時にはきちんとAMPでエラーが出ないかの確認を行う必要があります。

特に訪問者が何かを入力するというフォーム機能には結構厳しい制限がありますので厳重にチェックしましょう。フォーム入力がどうしても必須な場合にはAMPページを示すURL末尾の「/?amp=1」や「/amp」の追記を省いたリンクを設置して、通常のレスポンシブ表示ページへ遷移して入力してもらうようにするなどの工夫が必要です。

AMP対応させるコンテンツ(投稿や固定ページ)の公開時にはAMP対応ページも確認すること

投稿や固定ページなどを公開するとき、普通ならプレビューして問題なし、で公開ボタンをクリックして完了となります。でもAMP対応を始めると、公開後に「/?amp=1」や「/amp」などを付けてのチェックが必須となります。

一旦検索エンジンクローラーが来て「AMP対応してるって言ってるけどエラーじゃん」と判断されるとAMPページとしてのインデックスはされませんので、修正してから次項の手順でGoogleに伝えるか、自然に次の巡回を待つしかありません。大抵新しい記事は1日もかからずに巡回されますのでそのタイミングを逃さないためにもきちんとチェックするようにしましょう。

コンテンツの更新後はGoogleに知らせる

ここまで読んで理解されているかと思いますが、AMP対応ページがインデックスされた以降はGoogleのコンピュータの中にあるキャッシュ(保存)されたページが表示されます。このキャッシュは次回クローラーがそのページを訪れて更新するまで変化はありません。

定期的な巡回を待つのが一番ですが、大がかりな変更を行ったり、重要な修正をしたページではそうもいきませんから、そんな時はGoogle Search Consoleで変更を通知しましょう。

以前「Fetch as Google」という機能があったのをご存知ですか?新しいSearch Consoleではこの機能を使うためのメニューがなくなっていて、「使えなくなったのか・・」と思っている方も多いでしょう。

でもきちんと代替手段があります。それは「URL検査」というメニューです。

WordPressサイトの個別投稿をAMP対応にする意味や意義、対応させた後どうなるのか?の検証|Knowledge Base

クリックしてURLを入力後しばらく待つとそのページを検証してくれる機能です。実際に既にGoogleでインデックスされているページを検査すると

こんな画面が表示されますから、右下の「インデックス登録をリクエスト」をクリックするとかつての「Fetch as Google」と同じようにある程度優先して巡回してくれますので、急ぎの場合は使用するとよいでしょう。

あとがき

いかがでしたか?WordPressサイトをAMP対応にした後の流れ、ご理解いただけたでしょうか??

この記事ではAMP化ではなく「AMP対応」という言葉を使ってきました。多分「化」とした方が検索ヒット数も増えるのでしょうけど、ここまで読んでいただいた方なら「対応」という単語を使った意味をお分かりになるかと思います。

AMPはサイトを化かす「化」ではなく、最終的にGoogleのサーバーにキャッシュされたページを高速で表示させるためのページを用意しておく「対応」なのですからね。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)