サイトをAMP化したらサイトが壊れに壊れたのでAMP化をやめて必死こいてリダイレクト設定を行ったお話

当ブログではAMP化をしておりました。

なんでAMP化してるかっていったら天下のGoogle様が推奨しているし、今現在私がつかっているブログのテーマ「Cocoon」でも高速化できるぜ！みたいな雰囲気を出していたので、

くぼた

高速化できるのならAMP化しておくか

くらいの気持ちでAMP化していました。

ユーザビリティ最高

そんなこんなで最近ブログの中の1つの記事が上位検索されるようになり「わーい！」と喜んでたのもつかの間、記事の確認を行ったらサイトが壊れに壊れているではありませんか。

▼実際の壊れ具合

本来なら…

うん、タイトルも画像も広告もしっかり表示されていますね。というかこの方美人すぎるんですけど！！！

AMP化された記事を見てみると…

吹き出しは僕がつけたのですがタイトルと画像の間に謎のスペースができていますね。女性の方の顔が見えないよ！！！

これだけだとわかりにくいと思うのでもう一つだけご紹介。

何の変哲もない吹き出しでのやり取りです。うわああああああ！

吹き出しが量産されていますね。

とまあこんな具合で僕の場合は主に画像の表示がバグってしまいました。

他の方の壊れ具合も調べてみると広告が表示されなかったり本来設定している色が変わっていたりと色々あるみたいです。

編集画面では何の変化もないのですっかり見落としていました…。

前置きが長くなりましたがそんなこんなで上位表示されているのにサイトがバグっているという謎の羞恥プレイをかましていたので、AMP化を停止してリダイレクトの設定をてんやわんやで行いました。

その一連の方法をご紹介できればと思います。

AMP化の辞め方

ワードプレスでのAMP化停止

前述しておりますが僕はブログのテーマは「Cocoon」を使っているのでブログ側での停止はいたって簡単です。

まずはCocoon設定をクリックし、

次にAMPのタブをクリックします。

最後に「AMP機能を有効化する」のチェックを外して終了です。簡単ですね。

サーバーでのリダイレクト設定

ワードプレスでAMP化をやめても検索表示されている記事はAMP化されているので、その記事が既にインデックスされていると検索結果はAMPページが表示されてしまい、

その時点でユーザーにクリックされてしまうと「404エラー」が出てしまいます。

そうならないようにリダイレクト設定を行っておかないと天下のGoogle様の評価が下がってしまいます。

そこでリダイレクト設定の手順をご紹介します。

僕はmixhostというサーバーを利用しているのでそちらを例にご紹介します。

cPanelにログインしてファイルマネージャーを開きます

右上の「設定」ボタンを押します

非表示のファイルの表示 (dotfiles) に「✔」を入れます。そうすると普段表示されないリダイレクト設定を行うための.htaccess というファイルが表示されるようになります。

.htaccessファイルが見つらない場合は右上の検索ボックスから検索しましょう。

赤線のファイルをデスクトップにダウンロードしてワード等で開くとこんな画面になります。

赤線の部分

上記の文を

に変えます。

上書き保存をして元にあったファイルを上書きしましょう、上書きする前のファイルのバックアップを取るのも忘れずに！何かあったら元の状態に戻せなくなるので。

上書きをしたら元のAMPページが正規ページにリダイレクトされるか試してみましょう。

これでとりあえず正規のURLにリダイレクトされるようになります。あとはGoogle様からインデックスされるのを待つのみ。

AMP化のメリット

ここからは余談ですがAMP化に何のメリットがあるのでしょうか。

Google様もユーザーファースト！って掲げながら進めてくるし。

AMP化のメリットは下記の通りです。

さすが推奨されるだけあってメリットが豊富ですね。

特に1つ目の高速化については本当に早いです。

体感で「ひゅーん」が「ひゅん！」くらいになります。

実際には4秒かかるものが1秒になるだとか。

これはAMP化するしかないですね！

AMP化のデメリット

はい、せっかく高速化されて検索結果が上位に表示されてもデザインがぶっ壊れているんじゃ意味がないですね。

前述しましたが僕の記事の一つで検索結果の1ページ目に表示されているのにデザインがぶっ壊れているという羞恥プレイを受けています。

他にもデメリットはあるみたいですが皆さんに1番身近なのはサイトのデザインが壊れることではないのでしょうか。

AMP化しなくてもいいですね。

AMP化は専門家の指導の下行うべき

「餅は餅屋」ということわざがあるように初心者が何でもかんでも手を出すべきではないとわかりました。

AMP化は向いているサイトとそうでないサイトがあるみたいです。

というよりやるにしてもちゃんと調べてからやるべきでしたね。

当ブログ使用テーマ「Cocoon」製作者のわいひらさんも「Cocoonの高速化対策を行っていればAMP化は不要」とおっしゃっていました。

安易にAMP化を行って辞めるとなるととんでもない労力がかかるので行うのであればよく調べてから行うのがおすすめです。

ここまでお読みいただきありがとうございました。