AMP 問題 モバイルサイトの表示がおかしくなっていた原因が判明。 Googleによってamp/という別ページに飛ばされていたんです。なので対策！

ここの所、サイトのアクセスにおいてモバイル端末からの接続が激減していました。

今まではPC4割、モバイル6割くらいの比率だったのが、最近はPC7割、モバイル3割。

おかしいと思いながらそのままにしていたのですが、ひょんな事からその原因がわかりました。

キッカケはGoogle Search Console Teamからのメール

サイト https://butler885.com/で「AMP」の問題が新たに検出されました

こういう文面でgoogleから来たメール。

開いてみると、「クロールエラー」が検出されたとの事。

そのエラーが出たAMPバージョンのURLを見てみると

AMP 問題 モバイルサイトの表示がおかしくなっていた原因が判明。 Googleによってamp/という別ページに飛ばされていたんです。なので対策！

ここの所、サイトのアクセスにおいてモバイル端末からの接続が激減していました。 今まではPC4割、モバイル6割くらいの比率だったのが、最近はPC7割、モバイル3割。 おかしいと思いながらそのままにしていたのですが、ひょんな事からその原因がわか

butler885.com

ん？amp/とはなんぞ？

そんなパーマリンクを作った覚えはないぞ？

んん？？

そういえば以前、Googleから言われてAMPプラグインとやらを導入したな。

そこでクロールエラーの確認の為に改めてbutler885.com/amp/のサイトにアクセスしてみた所…

なんぞこれ？！

いやもうびっくりしました。

そこには本来のサイトレイアウトとは全く別物に成り果てた記事がありました。

ちょっと笑ったのはamazon primeの「prime」のマークが異常に大きく表示されていた事。

いや、笑い事じゃない。

記事がとんでもなく見難くなっている上にいくつかの画像が表示されなくなってるじゃないか！

そこで慌ててGoogleでAMPを検索してみたのです。

AMPで調べてみると、自分だけではなく他の人のサイトでも問題が発生していた

そもそも、AMPプラグインを導入したのはGoogleからの勧めでした。

なんか入れるとサイト表示が速くなるし、Googleも検索に於いて今後AMP対応かを考慮するよ！

とか言ってきて。

それでさほど考える事無くAMPプラグインを導入していたのです。

自分はブログ更新の時にPCから行うので、主に検索からブログに来てくれた方のモバイルからのアクセスが本来の記事のアドレスではなく/amp/という別のアドレスに誘導されていた事に気づいていませんでした。

そりゃPCアクセスが増えるわけですよね。

モバイル限定とはいえ、こんな見難いサイトじゃ見る気もしない。

そこで直ぐにAMPプラグインを無効化したのですが、それだけでは問題は解決しませんでした。

AMPプラグインを無効化しても、Googleサーバーに一度記録されたAMP専用ページは消えない

仮にAMPを無効化、若しくはAMPプラグインのアンインストールを行っても、web上に記録されたbutler885.com/○○○○/amp/のサイト情報は消えません。

例えばAMPプラグインを無効化した後にモバイルからbutler885.com/sgnl-4の記事を検索で見つけてアクセスした場合、Googleサーチはbutler885.com/sgnl-4/amp/のサイトに送ります。

そうすると、AMPを無効化した状態のページにアクセスする事になるので、404エラー、つまりページが存在しない、とGoogleサーチから返される事になります。

よって、ただAMPを無効化or消去するだけでは、せっかくブログを見に来てくれた人にページが存在しないと思われてしまう事になるのです。

更に存在しないページに対してのアクセスを放置する事によってGoogleからの評価も落ちる可能性が、、、。

このままではイカン！…そうだ、リダイレクトしよう！！

一度覚えてしまったampサイトをGoogleにnonindexしてもらう為には結構な手間がかかります。

そこで、最も手軽な解決法として、/amp/のページにアクセスしたら自動的に通常ページに飛ぶ様に設定しました。

wordpress環境なら方法は本当に簡単。

1. 「Simple 301 Redirects」というプラグインをインストール
2. その設定画面の Request の欄に　butler885.com/*/amp/　と入力
3. 右側の Destination の欄に  butler885.com/*/  と入力
4. Use Wildcards?のチェックボックスにチェックを入れる

以上４つの手順だけ。

もし、同じようにAMPの無効化で404エラーが出て困っている人がいたら、試してみてください。

その際は2と３の手順にある butler885.com の部分を自分のサイトのURLに変えてもらうだけです。

*のマークはアスタリスクと言って、この場合は

「アスタリスクは 1 文字以上の任意の文字列を表しますよ。」

という意味。

カードゲーム「UNO」のワイルドカードと同じですね。

なので、「Simple 301 Redirects」の設定画面上でアスタリスクをサイトのホームアドレスと/amp/の間に記述する事により、全てのブログ記事へリダイレクトの設定がされた事になるわけです。

とりあえず解決したけど、これからはGoogleがどんなに勧めてきても、AMPは使いません。

まとめ

もし、8月位からモバイルでアクセスして頂いた方で表示が崩れて見難い思いをされた方がいらっしゃったら申し訳ありません。

今後は記事を書く際に「AMPページを生成しない」にチェックを入れていきますので、同じ問題は発生しないと思います。

それにしても、Googleに勧められてAMP導入したのに酷い目にあいました…。