WordPressでAMPを解除(削除)したい時 - 賢威7

先日WordPressでサイトをAMPに対応させようと思いまして、AMPのプラグインを導入しました。僕に知識がなかったため、使っているWordPressテーマである『賢威7』はAMPに対応しておらず、自分のサイトにスマートフォンでアクセスするとレイアウトが崩れ、ユーザビリティを著しく落としてしまう結果となりました。

この記事は「レイアウトが崩れてるやばい！」とかなり感情的になって書き殴ったものですが、色々と調べて解決方法が見えてきましたので、それをこのnoteに残します。

AMPの仕組みを理解する

まずはじめにAMPをちゃんと理解しましょう。AMPはモバイル端末でサイト表示速度を上げる仕組みです。サイト内のcssやJavaScriptに制限をかけ、さらにGoogleにそれらをキャッシュすることでAMPを実現させます。

僕がインストールしたプラグインは下の画像のものです。

WordPressでAMPに対応させるプラグインを導入すると、自分のサイトページのHTMLに下のような記載が追加されます。

<link rel="amphtml" href="https://サイトのドメイン/web-disable-amp/?amp=1" />

厳密にはこれとは異なるかもしれませんが、rel="amphtml"の部分の記載があると、「このページにはampに対応したページがあるよ」という通知をGoogleクローラbotにします。この記載がある中でGoogleクローラbotがサイトページに訪れると、AMPページをインデックスし、スマートフォンブラウザの検索結果にそちらを表示します。

スマートフォンブラウザでは、AMPに対応しているページは「https://サイトのドメイン/ページのパス/amp」に飛んで、AMP用のページが表示されます。URLを「https://自分のサイトのドメイン/ページのパス」で検索をすると、正規のページが表示されるはずです。よって、URLから/ampの部分を消すために、.htaccessを編集します。

.htaccessを編集する

自分のサイトのあるサーバ(僕の場合はレンタルサーバ)にFTPなどでアクセスをし、編集したいサイトの.htaccessを開きます。大抵はサイトのルートディレクトリに.htaccessがあるかと思います。

次に、.htaccessを以下のように編集してください。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^(.*)/amp/?$ $1 [R=301,L] #この部分を追加！
</IfModule>

# END WordPress

これでスマートフォンデバイスの検索結果からアクセスがあった場合は、/ampなしのURL、つまり正規のページにリダイレクトがされます。

もう一段階です。最後にGoogle検索結果からAMPページではなく正規のページを表示させます。

AMPプラグインを停止あるいは削除する

次にプラグインの停止をしてください。これをすることで、HTMLから<link rel="amphtml" href="https://サイトのドメイン/web-disable-amp/?amp=1" />の部分が削除されます。しかしすぐにはGoogleクローラbotはサイトを訪れてはくれません。

そこでFetch as Googleでページ更新のリクエストを送ってください。これをすることで早めにクローラを呼ぶことができます。確か1日に10リクエストまでしかFetch as Googleできないらしく、それ以上になるとエラーになってしまうと思います。

何もせずともクローラは自分のサイトを訪れ、正規のページを検索結果に表示してくれるようになりますがそれまでどれくらい時間がかかるかわかりません。また、リダイレクトがかさむ分表示速度が遅くなってしまいます。アクセスの多いページからFetch as Googleで更新リクエストを送るのが良いのではないでしょうか。

まとめ

Googleから「AMP対応は重要だよ！」って通知を受けて、何も考えずにホイホイ手を出すことは危険だと身をもって経験しました。自分にとってはAMPは害悪な存在なようですが、WordPressのテーマや内容によってはAMPは非常に有効な手段です。高速表示は正義です。

AMPに関する記事がそこまで多くないので、「サーバとかHTMLとかの知識があまりない...」という方はプロの方にお願いするか、AMPはまだ対応しないようにするかの方が良さそうです。間違って僕のような被害を受ける人が少なくなることを祈っています。