Web

AMP for WordPress プラグインを利用した AMP対応をやめる方法

投稿日:2018年7月13日 更新日:

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順 では、AMP for WordPress プラグインの利用方法について説明しましたが、今回のその逆です。AMP for WordPress プラグインの使用をやめる手順について説明します。

1. はじめに

本ページで、「AMP for WordPress プラグインの使用をやめる」と言っているのは、「AMP対応自体をやめる」という意味でもあります。

他のAMP用プラグインを使ったり、何か別の方法で AMP対応自体は続けるといった場合ではありません。但し、AMP for WordPress プラグインの仕様によって「既存の URL末尾に、/amp/?amp を追加した URL」が Google にキャッシュされてしまっている状況をなんとかしたい(他のURLでAMPページを用意したい)と思っている方にも役に立つ可能性があります。

本ページにおける用語

AMPページ (AMP page)
AMP対応したページのことです。
AMP for WordPress プラグインの場合は、末尾に /amp/?amp を付けたURLで示されるページを指します。
正規ページ (canonical non-AMP page)
AMP対応する前から存在している記事ページを指します。
本来、AMPページも正規ページを兼ねることはできるのですが、AMP for WordPress プラグインの場合は、別々にページが用意されていますので、元の記事ページのみを指しています。

2. AMP for WordPress プラグイン をやめる理由

これは人によって様々あると思います。

※ 先程も書きましたが、ここでは「AMP対応自体をやめる」という意味も入っています。

  • AMP用に自動生成されるシンプル過ぎる画面を、ユーザーに提供したくない。
  • CDN からも記事が配信されるため、アクセスしてくれるユーザーが把握し辛い。
  • PVが減った。

ちなみに、このウェブサイトも AMP for WordPress プラグインを一旦停止しています(他のウェブサイトでは使っています)。

3. AMP for WordPress プラグインを利用した AMP対応 をやめる手順

といっても手順は簡単です。

1. AMP for WordPress プラグインを停止します。

AMP for WordPress プラグインを停止します。

AMP for WordPress プラグイン
AMP for WordPress プラグイン

Glue for Yoast SEO & AMP プラグインをインストールしている場合は、こちらも停止します(停止しなくてもよいです)。

Glue for Yoast SEO & AMP プラグイン
Glue for Yoast SEO & AMP プラグイン

これにより、何が起きるのか?

AMP for WordPress プラグインを停止することによって、以下の動作が変わることを把握しておきましょう。

  • 「記事のURL末尾に /amp/ を追加したURL」で表示されていたAMPページがなくなります。
  • 通常の記事ページ(正規の記事ページ)内に埋め込まれていた「対応するAMPページへのリンク情報」が出力されなくなります。

2つ目の変化により、Google 検索のクローラが次に記事ページをクロールした時に、「対応するAMPページはない」ということが伝わります。

4. AMPページがあったURLにアクセスがきたら、正規のページにリダイレクトさせます。

この時点では、Google の検索結果に AMPページが存在したままになっているため、AMPページはまだアクセスされる可能性があります(外部 CDN に保存された AMP キャッシュが返されるだけのはずですが、念の為です!)。

しかし、既にAMPページはないですので、もしAMPページにアクセスがきたら、正規ページにリダイレクトするようにしておきます。

functions.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' );

AMPページへのアクセスが完全になくなったら、この記述は削除します。

5. Search Console で正規ページを Google 検索に読み込ませる

Google Search Console を使って、なるべく早く AMPページがなくなったことを Google 検索に伝えます。

「Fetch as Google」ページで「Mobile: Smartphone」を指定して、特定のURLをフェッチしたり、それでは面倒ということであればサイトマップのページをフェッチしたりします。

また、Sitemaps のページでは、ちゃんとサイトマップを登録しておきましょう。

※ これらをしたからといって、必ずしもすぐに Google 検索側で AMPがなくなったことを認識してくれるとは限りません。待つしかなかったりします。

6. その後

1週間から10日経って、ようやく Google 検索結果ページに AMPページではなく正規ページが表示されるようになりました。

7. おわりに

実は、今回一番伝えたかったのは、「AMPページから正規ページへのリダイレクトの処理は簡単に書けますよ」という部分です。AMP関連ではなくても、似たような処理が必要になった時には、このコードを参考にしてみてください。

8. 参考

9. 関連

Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

2018.07.12

📂-Web

執筆者:labo


  1. goo助(ハンドルネームです・・) より:

    はじめまして! AMP for WordPress を利用していたため、とても助かります。

    一つ不明な点があるのですが、記事の終わりの方の・・
    「4. AMPページがあったURLにアクセスがきたら、正規のページにリダイレクトさせます。」
    ・・のところで、「functions.php に以下を記述します。」とありますが、functions.php  の中のどの部分に貼り付ければよいのでしょうか? ここからここまでの間に貼り付ける、といった場所の指示を出していただけると助かります。m( _ _ )m

    • labo より:

      コメントありがとうございます。
      特にどこという制約はありません。どこでも大丈夫です!

  2. なな より:

    すごい助かりました★★★★!!!!!★★★★

    ほんとうに、ありがとうございます★★★★!!!!!!!!!!★★★★

    • labo より:

      お役に立てて嬉しいです!

      追記:エラーが発生したそうですが、解決したようで安心しました!

  3. かぼちゃの季節 より:

    コメント失礼いたします。
    Googleから「URL が見つかりませんでした(404)」でエラーが76も
    出ており、AMPをはずしたくこちらのサイトを閲覧させて頂きました。

    プラグインしたのは、AMPのみで停止したのですが、「functions.phpに
    以下を記述します」のところで手間取っております。

    WPのテーマの編集からfunctions.phpに行き、一番上にコピペで張り付けた
    のですが「何かうまくいかなかったようです」のメッセージが出ました。

    コピペした部分を削除し元にもどしても「何かうまくいかなかったようです」の
    メッセージが出ています。

    張り付ける場所は、一番上でも大丈夫でしょうか?
    またこの部分を編集すると、エラーが出ている76記事が正規ページが
    表示されるようになるのでしょうか?

    お手数ですが、教えていただけると助かります。
    よろしくお願いいたします。

    • labo より:

      コメントありがとうございます。

      「何かうまくいかなかったようです」というエラーが発生する場合、
      レンタルサーバーのWAF機能がオンになっている可能性があります。
      “substr” の部分を攻撃用文字列とみなしてブロックするようです。
      ですので、レンタルサーバーのWAF機能をオフにすると直る可能性があります。
      しかし、「元にもどしても」同じエラーが発生するのであれば、
      今のところその原因は思いつきません。

      貼り付ける場所は、本来どこでもいいはずですが、一番上よりは一番下をお勧めします。

      本記事に載せているコードは、例えば
      (1) https://example.com/amp/ というAMPページのURLにアクセスがきたら、
      (2) https://example.com/ にリダイレクトしてあげる(こちらが正規ページです)
      という処理を行っているだけです。
      ですので、「URLが見つかりませんでした(404)」というエラーのURLが、
      (1)のようなAMP用URLであれば、今回の追加コードによって
      正規ページにアクセスし直すはずなので、エラーはなくなると思われます。

  4. かぼちゃの季節 より:

    丁寧に教えていただいてありがとうございます。

    WAF機能でエラーが出ると教えて頂いて、助かりました。

    質問させて頂いた後も色々といじってみたのですが・・・

    私の場合、
    (1) https://example.com/amp/ というAMPページのURLにアクセスしてみたら、
    「URLが見つかりませんでした(404)」というエラーが出ていて、
    2) https://example.com/ の正規ページにアクセスするとページが出ました。

    AMPを停止したので、(1) https://example.com/amp/ のページが見つからなく
    なったんだと思います。

    正規ページのアドレスでページが表示される場合は、何も処理をしなくても
    いいのでしょうか?

    • labo より:

      その例で言いますと、https://example.com/ ページ内に
      <link rel=”amphtml” href=”https://example.com/amp/”>
      といったタグが出力されていなければ、AMP用ページは用意されていないということですので、Google の検索エンジンも「AMPページはない」と認識してくれるはずです。
      あとは、Googleのクローラーがサイトを巡回しにくるのを待つか、Google Search Console を使い、手動で各ページを読み込ませるかすればよいと思います。

      • かぼちゃの季節 より:

        お返事ありがとうございます。
        「AMPページはない」と認識してくれるはずと知って安心しました。

        教えて頂いてありがとうございました。

  5. サイトさま 突然のコメント失礼いたします。

    サイトのAMPを辞めたくてこちらに行き着きました。

    数ヶ月前にAMP化にしたくてプラグインの『AMP』をインストールして使っていましたが、辞めたくてこちらの記述を参考に、

    1プラグインの停止
    2 https://example.com/amp/ というAMPページのURLにアクセスがきたら
     https://example.com/(正規ページにリダイレクトリ) するように、記載のコードをfunction.phpに追記しました。

    PCで確認すると正しく正規ページに飛びますが、スマホで記事をヤフー検索してアクセスすると404 error になります。スマホでも正規ページに飛ぶようにするにはどうしたら良いでしょうか?

    wordpress初心者のため拙い質問ですいません。アドバイスいただければ幸いです。

    • labo より:

      コメントありがとうございます。

      「スマホ」+「Yahoo!JAPANでの検索」の組み合わせのみ 404 になるということでしょうか?
      「PCでの検索結果」及び「スマホでの検索結果」の両方で、雷マーク ⚡(AMPのマーク)が表示されている状態でしょうか?

      Yahoo!JAPAN の検索は Google の検索エンジンを使っていますが、AMPに関する部分では検索結果に何か違いがあるのかもしれません。また、Google は「PC用 Googlebot」と「スマホ用 Googlebot」の2種類でウェブページをクロールしますが、これらの AMPに対する影響が何か関係しているのかもしれません。このあたり、私も詳しくは分かりません。

      とはいえ、PC だと正規ページが表示されるということですので、「既にAMPが使われていない」ということをGoogle側は認識できているはずです。楽観的に考えますと、もうしばらく待てば Yahoo!JAPANの検索結果にも正規ページが反映されるのではないかと思います。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Vitals

highlight.js が引き起こすレイアウト・シフトを防止する

highlight.js が引き起こすレイアウト・シフトを防止する方法を紹介します。

Google

Google マップ (Google Maps) で緯度経度を指定して場所を見つける方法

例えば「北緯35度40分57秒 東経139度45分10秒」という情報があった場合に、それがどこなのか調べるには Google マップ を利用することができます。では、どうやればよいのでしょうか? 実は …

web development

HTTPレスポンスヘッダ COEP, COOP, CORP, CORS についてのメモ

HTTP Response Header である COEP, COOP, CORP, CORS についてのメモです。

Web

ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

Web

Source Map に関する情報

目次1. Source Map とは?従来の問題点ソースマップ(Source Map)ソースマップに関連するファイルを整理するソースマップの動作ソースマップは誰が作るのか?2. Chrome ブラウザ …