Accelerated Mobile PagesプラグインでAMPエラー→削除ページ非表示の対処法

AMPのプラグイン入れたんだけど、表示崩れたからプラグイン停止したら非表示になったー！完全なバグだー！やべー！これはどうやって直せばいいの？？コードとか難しいことはこわいからやめてー！

という人向けです。

さっきまでサイトバグって飛んでたので、備忘録的な意味もあります。

わかりやすい記事が少なかったので、htmlとかcssど素人向けに書いていきますね！

Accelerated Mobile Pages（AMP）とは？

AMPについて説明します。もう知っとるわ！！という方は次の見出しからご覧ください。

AMP(Accelerated Mobile Pages)とはGoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクト、またはそのためのフレームワーク(AMP HTML)のことです。引用：AMPとは

要するにスマホからのアクセスを高速表示する設定のことです。

SEOにおいて携帯の高速表示は非常に重要なので、それを狙って入れた人が多いのではないかと思います。

『Accelerated Mobile Pages』というプラグインは、その設定をプラグインの導入のみでできるため、活用する人が多いんですね。

AMPのデメリット：エラーが多い

もはやAMPは素人がやるものじゃないと思います。

とにかくエラーが発生するのが当たり前という感じですね。どのサイトを見てもエラー対応をしていました。

だいたい多いのがページの表示がバグるという現象みたいです。

僕もAMP導入後、2~3日後に携帯からの検索画面がバグりました。

症状としてはこんな感じ

ロゴが消える
タイトルがでかくなる
ショートコードが消える
広告が表示されない
pvが鬼下がる　etc

ロゴ消える・タイトルでかくなる

ショートコードや見出し、広告も消える

普通の表示だと

こんな感じです！

pvが鬼下がる

pvがめちゃくちゃ下がりました。

ちなみにオレンジが携帯端末です。

最初これを見た時、一瞬アプデ食らったのかと思って冷や汗でしたが、携帯に連動しているため、AMPのせいだとわかりました。

それにしても下がり幅がえぐい汗汗

若干誤差があるのはページ自体が全部インデックスされてなかったからですね。

AMPを導入するとURLの末尾に「/amp」や「/amp/」と入るようになるのでそのURLがグーグルにインデックス（チェック）されるまでは通常通り表示されるってことです。amp入りのurlをグーグルが認識次第、順々にSEO表示されます。

こういった感じでバグが普通に起こるみたいですね。

グーグルが推奨しているプラグインだそうです。

今回僕もグーグルが推奨！っていうので表示されてたから入れたのに、とんだ迷惑を被りました。

AMPで表示がバグってプラグインを消す（前に・・）

AMPの表示がバグった場合、本来は次のように対処します。

サーチコンソールでバグったページを確認
コードを修正

AMPプラグインを無効化
WordPressのメニューの「設定」にある「パーマリンク設定」から「変更を保存」をクリック。
AMPプラグインを有効化

という対応をして修正をかけたりします。参考：木村石鹸　髪飾り情報局

それで表示改善できたら完璧です。詳しくは「AMP　エラー　対処法」とかでググってください。

ただ、これにも色々素人には不明な点がありました。

サーチコンソールでエラー表示されていない記事の表示もバグっている

なので本当に全部の記事の表示が正常かは不明です。

ここでややこしいのでAMPプラグインを消しちゃえばいいや！ということで削除してしまうと、グーグルからの検索で表示されなくなってしまいます。

要はurlがamp/とグーグルから認識されているのに、プラグインの削除でまた変わるのでブログの所在が宙に浮いた状態になるということですね

AMPプラグイン停止によるページ非表示の症状

まず、上位表示されている記事をググった場合、⚡️マークみたいなのが付いています。

で、これを開くとこんな感じで「404:That’s an error」と出ます。

もうこの時点でだいぶパニックですwww

うっわ！なんだこれなんだこれ！！！(◎_◎;)

調べても難しい記事ばっかでどうにもならん。とコードが苦手な僕みたいな素人ブロガーはパニックになってしまいます。

AMPのプラグイン削除によるページ非表示の対処法

プラグインを削除したら例に漏れずページは非表示になります。

この段階からの対応方法は3つあります。

ほっとく
XMLサイトマップを再送信する
301リダイレクトする

ちなみに全部できるならやったほうが良さげです。

①ほっとく

結論、ややこしかったらほっといても大丈夫です。

現状どういう状態かというと

AMPを導入→url末尾に「amp」が反映→インデックスでグーグルが認知→表示エラー→AMPプラグイン削除→ampのURLが無効化→グーグルで表示されてるのはampのurlなので開いても表示されない

こういう状態です。

なので、また新たに元のURL記事がインデックスされるまでほっとくのも手です。

早ければ数時間、遅くとも10日間くらいで元に戻ります。

とはいってもその間ずっと非表示なのは嫌ですよね。ほかのサイト見たら「ずっと待つしかない！」って書いてあったので焦りましたが、そんなことないです。後述しますがSEOにも影響してしまいます。早めに解決する対処法をここからお伝えしますね

②XMLサイトマップを再送信する

XMLサイトマップをグーグルに再送信しましょう！

手順は簡単！

『Google XML Sitemaps』というプラグインを導入
サーチコンソールの「サイトマップ」を開く
「/sitemap.xml」と入力して送信

これで万事OKです。

僕はこの対応で半日で元に戻りました。（サイトによって誤差あり）

③301リダイレクトをする

これは一応2パターンあります。

htaccess.を編集する
function.phpを編集する

どっちかでOKです。

さすがに色々カスタマイズしたおかげで僕は慣れましたが、なにこれ？って人はあまりいじらないほうがいいかもしれません。

一応いじる前はバックアップ（使ってるサーバーorプラグインで取れます）取ってから編集してください。

htaccess.を編集する

RewriteEngine On
RewriteBase /
RewriteRule ^(.*)/amp/?$ $1 [R=301,L]

これをサーバーのhtaccess.ファイルに入れるとリダイレクトされるそうです。

htaccess.ファイルとは？

ワードプレスサイトのサーバー側でいじれるファイル。サイトの根幹の法則設定が可能です。Xserver、ロリポップなどの有名サーバーはだいたいいじれます。

WordPressブログ初心者にオススメのサーバーはどれ？ランキング形式で解説

2019年8月22日

ちなみに、僕はこれでリダイレクトされなかったため、urlの末尾が「/amp」になっているのではと考え、以下のように編集してリダイレクトしました。

RewriteEngine On
RewriteBase /
RewriteRule ^(.*)/amp$ $1 [R=301,L]
RewriteRule ^(.*)/undefined$ $1 [R=301,L]

ただ、これでも反映されなかったため、結局明確な原因はわかりませんでした汗w

みなさんは行けるかもしれないので、順番に確認してみてください。

※リダイレクトの確認方法

リダイレクト設定する→携帯のキャッシュ削除（前述）→ググって前のページが表示されたか確認

ちなみに挿入するときは<IfModule mod_rewrite.c></IfModule>というタグの中に入れて、ほかのコードと被らないようにするのが基本だそうです！

ややこしいのでやる場合はちゃんとバックアップを取るor詳しい人に聴きながらやりましょう！

function.phpを編集する

function redirect_to_canonical_from_amp() {
  $url_orig = $_SERVER["REQUEST_URI"];
  if ( substr( $url_orig, -5 ) === '/amp/' ) {
    $url_canonical = substr( $url_orig, 0, strlen( $url_orig ) - 4 );
    if ( wp_redirect( $url_canonical, 302 ) ) {
      exit;
    }
  }
}
add_action( 'parse_request', 'redirect_to_canonical_from_amp' );