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の表示がバグった場合、本来は次のように対処します。

  1. サーチコンソールでバグったページを確認
  2. コードを修正
  1. AMPプラグインを無効化
  2. WordPressのメニューの「設定」にある「パーマリンク設定」から「変更を保存」をクリック。
  3. AMPプラグインを有効化

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

①ほっとく

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

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

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

こういう状態です。

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

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

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

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

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

手順は簡単!

  1. Google XML Sitemaps』というプラグインを導入
  2. サーチコンソールの「サイトマップ」を開く
  3. 「/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' );

function.phpの場合はこのコードを下に貼り付ければOKです。

ワードプレスの外観→テーマエディター→function.php→一番下に改行して貼り付け

基本これでもいけるようです。

ただ、僕はこれやってもリダイレクトされませんでした。原因は不明です。

function.phpはいじった段階でエラーが起きるとワードプレスも開けなくなります。そういう場合は落ち着いて「function.php エラー 対処法」とググれば出てきます。

Xserverなら「ファイルマネージャ」→「対象ドメイン」→「publichtml」→「wp-content」→「themes」→「テーマ名_custom」→「function.php」を編集で、さっきエラーの原因になった追加したコードを消せば元に戻ります。

AMPのバグで非表示になっている間の弊害・疑問

ちなみにこの間の弊害ってなんかあるの?って僕もめちゃくちゃ気になったので実体験をもとに解説します。

Q.301リダイレクトの反映に時差はある?

301リダイレクトの設定をして、それが実際リダイレクトされるまで誤差はあるのかという疑問ですが、結論ないっぽいです。これはエンジニアの知り合いに聞きました。

なので、リダイレクト対応して携帯からキャッシュ削除(手順:設定→safari→履歴とWebサイトデータの消去)してからスマホ画面確認した時に、ページが表示されなかったらできていないってことになります

僕は前述したように、反映されなかったです汗

Q.SEOに影響はある?

SEOに影響あるかめっちゃ気になってたんですが、これはありました汗

僕は「大学生 借金地獄」というKWで1位だったのですが、表示がバグって、インデックスリクエスト送ったら記事が一気に下がりました。

これは流石に正直焦りました汗w

SEOでマイナス評価されたら表示が回復してもその後元に戻るまで結構時間がかかる可能性があるからです。

しかもこのほかのKWもぽつぽつ圏外に飛びました。

きっく
やべええええええ!!!大損害じゃああああ!!

ただ、不幸中の幸い。サイトの表示が元に戻った瞬間に順位も戻りました。

なのでこれで死ぬほど焦ってる人は安心してください笑。前のページのURL評価は変わってないのでセーフです。

ということで、以上です!

僕はエンジニアではないし初心者ブロガーなのでこの程度の知識で手一杯です汗

他に知りたいことがあればコメント欄で答えられる範囲でお答えします!

【ブログ始めたい人は】:【雑記ブログの始め方最短ルート】サルでも分かるブログ開設手順!