SANGOでAMPを有効化するとデザインが崩れてしまう

昨年末から何度かGoogleにモバイル最適化のためにAMP対応を勧められ、WordPressのプラグインを使ってAMPを有効化しました。

結果、サイトのデザインが大きく崩れてしまい無効化することに…。Page Speed Insightsでページの読み込み速度を確認してみましたが、私の場合はAMP化によるスコアの変動もありませんでした。

WordPressテーマ「SANGO」とAMPは現時点では相性が悪く、AMP対応は止めておいた方がいいです。（2021年1月時点）

SANGO公式のカスタマイズガイドをみても、AMP化には対応していないようです。

・WordPressテーマ SANGOについてのよくある質問

AMPはプラグインで対応可

AMP化自体はプラグインの導入ですぐに完了します。

デザインが大きく崩れる

AMP有効化から5日〜1週間も経つと、検索結果にアンプのマークが反映されるようになります。

安心したのも束の間、検索結果からクリックしてみるとデザインが大きく崩れてしまっていました。

• タイトルロゴがAMPのデフォルト仕様に
• 画面右上の検索アイコンが消える
• Webフォントが反映されていない
• シェアアイコン類が全て削除される
• SANGOの吹き出しデザインが崩れる

• 目次デザインが簡略化される
• ショートコードを使った見出しデザインも全く反映されず
• 上へ戻るボタンが削除される

SANGOの強みであるデザインが、AMP化によって軒並み矯正されてしまいました。

Google広告＆Analyticsが表示されなくなる

もう一つ困ったことに、AMP導入後サイトに掲載していたGoogle Adsense広告が全て反映されなくなりました。

また広告と同様に、Google Analyticsの方も設定を変更しないとPVにカウントされません。

こちらはアドセンスのコードをAMPに対応した新しいコードに張り替えるなど、対応が必要なようです。

・AMPプラグイン導入の際の、グーグルアドセンスとアナリティクスの設置方法

AMP停止前にリダイレクト設定をしておく

もしもAMP導入後に停止する場合は、必ずリダイレクト設定をしておきましょう。

1. 404エラーに対するリダイレクト設定をする
2. AMPを停止する

この手順を踏むことで、エラーページが表示されて途方に暮れてしまうユーザー数を最小限に抑えることができます。

Search ConsoleのAMP画面から、どの程度のページがAMP化されているかを見ることができます。

AMPのプラグインを停止すると、約1週間ほどで元のページに戻ります。しかし停止〜復旧までの間にAMP化されたページを検索結果からクリックすると、404エラーが表示されてしまいます。

検索結果にはそのまま残り続けるため、このままだとクリックしたユーザーを混乱させてしまいます。

.htaccess設定をする

私の場合はサーバーの「.htaccess」設定を編集し、AMP化されたページにアクセスしたユーザーを本来のページへリダイレクトさせることで方法を取りました。

エックスサーバーの場合はサーバーパネルから「.htaccess」の編集ができます。

1. エックスサーバーのログイン→サーバーパネルにログインする
2. 「ホームページ」→「.htaccess設定」→ドメイン名を選択する
3. 以下のコードを「.htaccess」へ記入

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

を

</IfModule>

の前に記述すると機能します。

各サーバーの設定から「.htaccess」の編集ができるかどうかを確認してみてください。

設定後ページを確認してみると、一瞬だけ404エラーページが表示された後、自動で元のページに遷移するようになりました。

「.htaccess」設定後にAMPのプラグインを無効化することで、404ページが表示されて途方に暮れてしまうユーザーをなくすことができます。

・AMP停止・削除・復旧の具体的手順を解説。AMP対応したブログを元に戻す方法

おわりに

SANGOユーザーには、まだAMP対応することをおすすめしません。

AMP対応するとサイトのデザインが大きく崩れてしまう可能性があることを覚えておきましょう。

今後SANGOでのAMP対応に進捗があった場合は追記します。