ブログ

AMP有効化したらデザインが崩れて、無効化したらページが見つからなくなった話

こんにちは!みゆまむ@miyumam2525です。

突然ですが、ここ数日で私のブログに起きていた事件について、一応解決したのでご紹介したいと思います。

簡潔にいうと、こんな感じ↓

この記事では、どうやって解決したのかをなるべく初心者にもわかりやすく詳細にご紹介したいと思います!(私が調べる中で全くわからないだらけだったので・・)

Google Adsense 最適化のオススメに乗っかる

これが全ての始まりでした。。GoogleAdsenseの「最適化」ページに「広告の表示スピードを早くすることができます」的なことが書いてありました。

Adsenseヘルプより 「AMP(Accelerated Mobile Pages)について」

https://support.google.com/adsense/answer/7632421?hl=ja

みゆまむ
みゆまむ
よっしゃー!最適化最適化!!

最適化というワードに深く考えもせずに飛びつき、AMPプラグインをダウンロード、有効化しました。また、グーグル先生がオススメしているということもあり、全く調べずに言われるがままに入れてしまいました。

ここで反省すべきなのは、一度でも「AMP 影響」等で調べていたら、何かしらの情報に触れられたのではないかということです。

自分できちんと調べずにサイトを変更してしまうのは、本当に怖いことなのだと今回思い知らされました。

Twitterからの表示でデザインが壊れる

まだまだドメインパワーの弱い私のブログは、pvのほとんど全てがTwitterからの流入です。そんな私にとってTwitterからの表示でデザインが壊れるなんて死活問題。気づいた時には青ざめました。

https://twitter.com/miyumam2525/status/1068298831668760576

焦ってます笑

吹き出しとかも、ただの画像になっていて、「なにこれ!?」と思いました。ほんと、気持ち悪かったw

正しいデザイン↓

 

壊れたデザイン↓

そして、時を同じくして私と同じ現象が起きているさきちちゃん@aoopena。一緒にあわあわしてくれました。

そんなさきちちゃんもなんとAMPを数日前に適用していて、どうやらそれが原因になっているらしいことが判明・・!

AMPプラグインを停止すると記事が見つからなくなった

みゆまむ
みゆまむ
よっしゃープラグイン停止しよ!

待ったぁぁぁぁぁぁぁぁ・・・

良いですか。何度も言いますが(自戒)、実行する前にちゃんと調べましょうね。

なんと、AMPプラグインを停止すると今度はTwitterのリンクから記事が見つからなくなってしまったのです。

JINの場合、デザインを崩さずに自動的にエラーページを返してくれるので、その点は良かったなぁと思いました。また、そのエラーページから、トップに飛んでみると普通に見ることができました。

(エラーページのキャプチャ撮り忘れた…)

https://twitter.com/miyumam2525/status/1069387279632752640?s=21

これまた焦っています笑

次は、ページのリダイレクトだ!

サロンメンバーに助けてもらいながら、どうやら、「ページのリダイレクトをすればいいこと」と、そのために、「.htaccess」ファイルにコードを追加すると良いらしいということがわかりました。

参考にさせていただきました★
【初心者向け】AMP化をやめて,正規ページにリダイレクトする方法
https://toge510.com/2018/06/08/howtoquitamp/

.htaccessファイルにコードを追加する

これ、意味わかりますか?意味わからなくても、手順がすぐに思い浮かびますか?

私は、まっっったくわかりませんでした…なので、出来るだけ詳しく説明したいと思います!

目的:ページリダイレクトをする
手段:.htaccessファイルにコードを追加する

  • 手順1
    エックスサーバーにログインする※レンタルサーバーがエックスサーバーの場合
  • 手順2
    ファイルサーバーにアクセスする
  • 手順3
    .htaccessファイルを探す

ドメイン名→public_html→.htaccess

  • 手順4
    下記のコードをRewriteBase/のあとに追加する

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

すでにRewriteRuleのコードがある場合があります!その場合は、RewriteRuleの後を更新します。

私はこれがわからなくて、単純にコード追加しちゃいました。
すると500エラーでブログ自体が全く開かなくなってしまったのです…!!恐ろしや。。

またエラー画面とっとくの忘れた…

というわけで、注意点の通り、RewriteRuleの後を更新する形で修正すると直りましたー!!Twitterの方もデザイン、ページ遷移ともに直っていることが確認できました。

みゆまむ
みゆまむ
か、感動…!!!

まとめ プラグインを入れる場合やデザインを変更する時は一旦調べる!

ほんとね、これに尽きますね。でも今回のことがあって自分でコードいじったり調べたりして、少しだけ賢くなったような気がします。

AMPプラグインを入れてデザインが崩れると、有料デザインのJINを入れた意味がなくなってしまうし、まだまだ私には扱えないものでした。

困っている人に届きますように。

こちらもどうぞ。

ブログ超初心者が本当に困ったこと&困っていることこんにちは!みゆまむ@miyumam2525 です。 今日は、ブログ超初心者の私がWordpress開設後間もない頃に困ったこと&...