見出し画像

WordPressAMP導入によるページレイアウト崩潰

先日運営しているWordPressブログで、モバイルWebブラウザーでの表示速度を上げたいと思い、AMP化したら色々とトラブルが発生したのでそのメモを残します。


WordPressでAMPを導入したらレイアウトが崩れた

最悪...。Google Analyticsで「なんか最近アクセスが落ちてるなー...」と思って自分のサイトをスマホで確認してみたところ、こんなことになっていました。ブログの編集って普段はパソコンからしか行わないので、スマホで自分の過去の記事を確認することって少ないですよね。色々調べてみると、AMP化を測ってプラグインを導入したことが原因だとわかりました。たまったもんじゃねぇ...!スマートフォンで僕のサイトに訪れてくれた方には申し訳ないです。


WordPressでAMPを解除したい

Googleの公式ドキュメントによれば、解除する方法が書いてありました。

しかし僕これを読んでもよくわからなかった...。とりあえずAMP化するプラグインは停止しましたが、検索結果にはまだAMP化されたページが表示されてしまいます。

赤枠のアイコンは「AMP化されたやつだよー」って意味でして、これがまだ表示されているということは、AMPが無効化されていないということになります。そんでもってこれをクリックしてみると...?

AMP化プラグインを停止したため、AMP化されたページが見つからず、404エラー(指定したページ(ファイル)が見つからねぇぞ!)ってのが出てしまいます。このエラー画面は数秒後にリダイレクトされるのですが、リダイレクト後の画面は...

WordPressの404エラー画面に飛びます。それもそのはず、『https://materialmechanics.work/archives/667/amp』みたいに末尾が/ampとなっている箇所にリダイレクトされるからです。URLから『https://materialmechanics.work/archives/667』と直打ちすれば、ちゃんと正規のページを表示してくれます。


WordPressでAMPを解除したい時の対処方法は?

色々調べてみたところ、即座に解除できる方法はなさそうとのことです。サーバー管理とかプログラムコードがわかる人はできるかもしれませんが、僕はまだその段階にまで達しておらず...。

GoogleのAMP解除の公式ドキュメントを読んだところで、理解して対処できる人の方が少ないはずです。AMPプラグインを解除したのに、スマートフォンブラウザでAMPページが検索結果に表示されてしまうのは、Googleにそちらがインデックスされてしまっているからです。

Googleクローラ「おっ!キミAMP対応してるね!検索結果はそっちを表示しとくよ!」

ってなことで、AMPプラグインを解除した後、ページを再びGoogleクローラにインデックスされるまで検索結果にはAMPページが表示されたままということです。早急な対応策としては、Google Search Consoleでプラグイン解除後にURLをリクエストすることでしょうか。これでリクエストされたページは早めに元のページが検索結果に表示されるでしょう。

サイトマップをsearch consoleするのも早いかもしれません。色々試してください。


AMPは必要なのかどうか?

AMPは必要なのでしょうか?AMPに対応していなかったとしても、読者の方に情報を提供することができますし、表示速度にそこまでストレスを感じていないのであれば、僕は必要ないかと思います。『AMP 解除』なんかで検索すると、僕と同じようなトラブルが発生している方が多くいるようで、利点よりもデメリットの方が多いように感じられます。

AMPに対応すると表示速度は劇的に改善されますが、それはcssやJavaScriptがある程度制限されるからです。そうするとJavaScriptを使っているGoogle AnalyticsやGoogle Adsenseなどは適切な処理を行わない可能性があります。AMPはGoogleやTwitterが共同して進めているものらしいので、アナリティクスやアドセンスにまで影響の出ることはないだろうと思いますが...。

スマホコンテンツを力入れて作るのであれば、スマートフォンアプリを作る方が良いのでしょう。


追記 - 解決策を書きました

下のnoteにてAMPの解除のやり方についてまとめました。


この記事が気に入ったらサポートをしてみませんか?